Right-align dropdown menu in select2











up vote
3
down vote

favorite
1












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.



enter image description here










share|improve this question




























    up vote
    3
    down vote

    favorite
    1












    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.



    enter image description here










    share|improve this question


























      up vote
      3
      down vote

      favorite
      1









      up vote
      3
      down vote

      favorite
      1






      1





      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.



      enter image description here










      share|improve this 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.



      enter image description here






      $(".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>





      $(".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>






      javascript jquery html css jquery-select2






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Aug 9 at 4:06

























      asked Aug 6 at 8:02









      SeaBass

      392114




      392114
























          4 Answers
          4






          active

          oldest

          votes

















          up vote
          1
          down vote



          accepted










          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 ;)






          share|improve this answer






























            up vote
            0
            down vote













            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.






            share|improve this answer





















            • Thanks, I’ll test it!
              – SeaBass
              Nov 10 at 21:31


















            up vote
            -1
            down vote













            option tag of select cannot be modified by css it need to be done jquery plugin
            http://selectric.js.org/demo.html
            It should help you my friend






            share|improve this answer























            • Please read my question again. I’m not trying to modify the option tag. I want to re-position a select2 dropdown.
              – SeaBass
              Aug 6 at 14:31


















            up vote
            -1
            down vote













            I think it will help you to get what exactly you need.if u wont get it ping me back






            select {
            text-align-last: right;
            }

            option {
            direction: rtl;
            }

            <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>








            share|improve this answer























            • Thank you! I updated my post above. Not sure if it's possible to do with pure css or if some js calculations are needed.
              – SeaBass
              Aug 6 at 8:31











            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51703078%2fright-align-dropdown-menu-in-select2%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            4 Answers
            4






            active

            oldest

            votes








            4 Answers
            4






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            1
            down vote



            accepted










            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 ;)






            share|improve this answer



























              up vote
              1
              down vote



              accepted










              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 ;)






              share|improve this answer

























                up vote
                1
                down vote



                accepted







                up vote
                1
                down vote



                accepted






                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 ;)






                share|improve this answer














                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 ;)







                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Aug 9 at 4:49

























                answered Aug 9 at 4:41









                Mehdi Dehghani

                3,78032536




                3,78032536
























                    up vote
                    0
                    down vote













                    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.






                    share|improve this answer





















                    • Thanks, I’ll test it!
                      – SeaBass
                      Nov 10 at 21:31















                    up vote
                    0
                    down vote













                    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.






                    share|improve this answer





















                    • Thanks, I’ll test it!
                      – SeaBass
                      Nov 10 at 21:31













                    up vote
                    0
                    down vote










                    up vote
                    0
                    down vote









                    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.






                    share|improve this answer












                    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.







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 10 at 21:23









                    RyDog

                    12




                    12












                    • Thanks, I’ll test it!
                      – SeaBass
                      Nov 10 at 21:31


















                    • Thanks, I’ll test it!
                      – SeaBass
                      Nov 10 at 21:31
















                    Thanks, I’ll test it!
                    – SeaBass
                    Nov 10 at 21:31




                    Thanks, I’ll test it!
                    – SeaBass
                    Nov 10 at 21:31










                    up vote
                    -1
                    down vote













                    option tag of select cannot be modified by css it need to be done jquery plugin
                    http://selectric.js.org/demo.html
                    It should help you my friend






                    share|improve this answer























                    • Please read my question again. I’m not trying to modify the option tag. I want to re-position a select2 dropdown.
                      – SeaBass
                      Aug 6 at 14:31















                    up vote
                    -1
                    down vote













                    option tag of select cannot be modified by css it need to be done jquery plugin
                    http://selectric.js.org/demo.html
                    It should help you my friend






                    share|improve this answer























                    • Please read my question again. I’m not trying to modify the option tag. I want to re-position a select2 dropdown.
                      – SeaBass
                      Aug 6 at 14:31













                    up vote
                    -1
                    down vote










                    up vote
                    -1
                    down vote









                    option tag of select cannot be modified by css it need to be done jquery plugin
                    http://selectric.js.org/demo.html
                    It should help you my friend






                    share|improve this answer














                    option tag of select cannot be modified by css it need to be done jquery plugin
                    http://selectric.js.org/demo.html
                    It should help you my friend







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Aug 6 at 12:22









                    Ashu

                    826820




                    826820










                    answered Aug 6 at 12:04









                    Minal Munakarmi

                    1324




                    1324












                    • Please read my question again. I’m not trying to modify the option tag. I want to re-position a select2 dropdown.
                      – SeaBass
                      Aug 6 at 14:31


















                    • Please read my question again. I’m not trying to modify the option tag. I want to re-position a select2 dropdown.
                      – SeaBass
                      Aug 6 at 14:31
















                    Please read my question again. I’m not trying to modify the option tag. I want to re-position a select2 dropdown.
                    – SeaBass
                    Aug 6 at 14:31




                    Please read my question again. I’m not trying to modify the option tag. I want to re-position a select2 dropdown.
                    – SeaBass
                    Aug 6 at 14:31










                    up vote
                    -1
                    down vote













                    I think it will help you to get what exactly you need.if u wont get it ping me back






                    select {
                    text-align-last: right;
                    }

                    option {
                    direction: rtl;
                    }

                    <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>








                    share|improve this answer























                    • Thank you! I updated my post above. Not sure if it's possible to do with pure css or if some js calculations are needed.
                      – SeaBass
                      Aug 6 at 8:31















                    up vote
                    -1
                    down vote













                    I think it will help you to get what exactly you need.if u wont get it ping me back






                    select {
                    text-align-last: right;
                    }

                    option {
                    direction: rtl;
                    }

                    <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>








                    share|improve this answer























                    • Thank you! I updated my post above. Not sure if it's possible to do with pure css or if some js calculations are needed.
                      – SeaBass
                      Aug 6 at 8:31













                    up vote
                    -1
                    down vote










                    up vote
                    -1
                    down vote









                    I think it will help you to get what exactly you need.if u wont get it ping me back






                    select {
                    text-align-last: right;
                    }

                    option {
                    direction: rtl;
                    }

                    <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>








                    share|improve this answer














                    I think it will help you to get what exactly you need.if u wont get it ping me back






                    select {
                    text-align-last: right;
                    }

                    option {
                    direction: rtl;
                    }

                    <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>








                    select {
                    text-align-last: right;
                    }

                    option {
                    direction: rtl;
                    }

                    <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>





                    select {
                    text-align-last: right;
                    }

                    option {
                    direction: rtl;
                    }

                    <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>






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Aug 6 at 12:22









                    Ashu

                    826820




                    826820










                    answered Aug 6 at 8:16









                    RaviChandra Thangallapally

                    67




                    67












                    • Thank you! I updated my post above. Not sure if it's possible to do with pure css or if some js calculations are needed.
                      – SeaBass
                      Aug 6 at 8:31


















                    • Thank you! I updated my post above. Not sure if it's possible to do with pure css or if some js calculations are needed.
                      – SeaBass
                      Aug 6 at 8:31
















                    Thank you! I updated my post above. Not sure if it's possible to do with pure css or if some js calculations are needed.
                    – SeaBass
                    Aug 6 at 8:31




                    Thank you! I updated my post above. Not sure if it's possible to do with pure css or if some js calculations are needed.
                    – SeaBass
                    Aug 6 at 8:31


















                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51703078%2fright-align-dropdown-menu-in-select2%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Florida Star v. B. J. F.

                    Danny Elfman

                    Lugert, Oklahoma