Right-align dropdown menu in select2

Question

Is there a way to right-align the dropdown menu with dropdownAutoWidth: true in a select2, instead of the standard left-align? I want the select to stay the same, but the dropdown to move to the left so it aligns with the select on the right side. See snippet below with the wrong alignment...

Note: I want different sizes of the select and the dropdown just as shown.

Edit // Updated with suggestion to add direction: rtl; text-align: right;. This only right-aligns the text. I want the whole dropdown to right-align with the selected option above it. E.g. the dropdown should stick out to the left of the selected option, not to the right.

Edit 2 // Updated with .select2-dropdown { left: -69px !important; } This makes it look the way I want, but is there a way to not have to set a fixed value of -69px?

$(".form-control").select2({
    width: '100px',
    dropdownAutoWidth : true,
});

.select2-container--default .select2-results > .select2-results__options { direction: rtl; text-align: right; }
.select2-dropdown {
left:-69px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

I want it to look like this, but not with a fixed value to achieve it.

Answer 1

As you want to have different sizes of the select and the dropdown, here is my solution using select2 built-in options and some CSS, but maybe not perfect one.

Making rtl is dead easy, just use dir, but we need to pass some other options as shown below:

$('select').select2({
    dir: "rtl",
    dropdownAutoWidth: true,
    dropdownParent: $('#parent')
});

The key here is dropdownParent, also you need to edit your HTML as follow:

<div id='parent'>
    <select>
      <option selected="selected">orange</option>
      <option>white</option>
      <option selected="selected">purple</option>
    </select>
</div>

And finally you need some CSS:

#parent {
  /* can be any value */
  width: 300px;
  text-align: right;
  direction: rtl;
  position: relative;
}
#parent .select2-container--open + .select2-container--open {
  left: auto;
  right: 0;
  width: 100%;
}

You can see it in action here on codepen

If you have more that one select, you need some JS code to handle dropdownParent option. btw your life will be easier if you remove dropdownAutoWidth option ;)

Answer 2

If still looking for an alternative method. I recently needed to achieve this as well and the RTL answer was not a viable solution for my project. If you are using the select2.js(4.0.6) and do not mind modifying the script you can replace the following code and achieve right positioning with adding a class to the target element.

Look for lines 4381 to 4384

var css = {
  left: offset.left,
  top: container.bottom
};

Replace with the following

var containerWidth = this.$container.outerWidth()
var right = ($("body").outerWidth() - (offset.left + containerWidth));

if (this.$element.hasClass("right-align")) {
    var css = {
        right: right,
        top: container.bottom
    };
} else {
    var css = {
        left: offset.left,
        top: container.bottom
    };
}

Add the class right-align to your target select input.

<select id="client_select" class="form-control right-align">
     <option value="01">Example One</option>
     <option value="02">Example Two</option>
     <option value="03">Example Three</option>
</select>

That should be all you need. If the target element has the class then the code will position the dropdown using right instead of left positioning. Should work the same if container is set to a parent. However, this is not thoroughly tested. It may not be an elegant solution, but it does not require overriding anything with CSS. Should do the trick until an update is made to add an option for handling right aligned dropdowns. Hope it helps.

Answer 3

I managed to make it work slightly different. I needed to expand the dropdown to the left while keeping the options texts aligned left. I thought it's worth sharing. Here is the setup:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<div id="select2-container">
    <select class="form-control">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>
</div>

CSS

.select2-container.select2-container--default.select2-container--open {
    right: auto;
    left: unset !important;
}

.select2-container.select2-container--default.select2-container--open .select2-dropdown.select2-dropdown--below {
    width: fit-content !important;
    left: unset;
    right: 0;
}

JavaScript

$('.form-control').select2({ dropdownParent: $('#select2-container') });

Result looks like: