Show HTML select dropdown list to the right with options on the left

Question

Need a small jquery/javascript script to change the focus selector so that when an option is selected in the dropdown it maintains the HTML select dropdown width (NOT the widest option).

A the moment the select:focus selector works although you have to click twice to achieve the result I am after.

See fiddle - https://jsfiddle.net/qsca7nr2/2/

    <table width="100%">
      <tr>
        <td width="80%">
                    Some long paragrph here klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj flskd jflksj flks jflks dflks dfkl skldf klsdj flksd flks dfkl sdlk flksd flksd flksd flkj lskd flksd flksdj fklsjd fklsdf lksdj f
        </td>
        <td>
          <div class="dropdown_container">
            <select class="my_dropdown" id="my_dropdown">
                      <option value="1">MEDIUMMMM OPTION</option>
                      <option value="2">short</option>
                      <option value="3">LONG LONG LONG LONG LONG LONG LONG L LONGLO PTIONLOPTI ONLOPTIONLO PTIONLOPT IONOPTION x</option>
            </select>
          </div>  
        </td>
      </tr>
    </table>

As I need to disable the :focus selector after first click I have tried something like this?

    $(function() {
                $("select").change(function() {
                   $( this ).blur();
                });
    }

why don't you just give it a width instead ? say for example give it `width: 140px` and it won't change forever — Dhiraj, Mar 18 '15 at 23:47
@DhirajBodicherla in this case fixed width is not an option but thank you. — , Mar 18 '15 at 23:50
This question is answered here... http://stackoverflow.com/questions/20091481/auto-resizing-the-select-element-according-to-selected-options-width — Dinesh, Mar 19 '15 at 00:01
Thank you @Dinesh although the form appears on the right of the page with the options to the left. — , Mar 19 '15 at 00:08

score 0 · Answer 1 · answered Mar 19 '15 at 00:01

0

I am interpreting your question in two ways - Either you need the actual dropdown control to maintain its size while ignoring the size of the tray that opens on clicking, or you want the tray to also be the same size.

For the former, you simply need to change your CSS to:

select:focus {
    width: 100%;
}

answered Mar 19 '15 at 00:01

bPratik

6,894
4
36
67

It should work the way it currently works if you click through the options by clicking the mouse button twice (because of the :focus). It needs to work by only clicking once. Hope that makes sense. – Mar 19 '15 at 00:11
Ok, I'm slightly confused now! Simply changing the CSS is giving me the behaviour that I see in the accepted answer, without using the JS. https://jsfiddle.net/pratik136/qsca7nr2/6/ Maybe I am not understanding what you are after. :) – bPratik Mar 19 '15 at 00:24
Try clearing your browser cache or using this code to start a new fiddle from scratch. – Mar 19 '15 at 02:49

score 0 · Accepted Answer · answered Mar 19 '15 at 00:04

0

Just do this:

$(function () {
    $("select").change(function () {
        $(this).blur();
    });
});

JS Fiddle Demo

answered Mar 19 '15 at 00:04

blex

24,941
5
39
72

Show HTML select dropdown list to the right with options on the left

2 Answers2

JS Fiddle Demo