Set width of dropdown element in HTML select dropdown options

Question

I am working on a website that involves automatically populating a select box using a PHP script   This all works fine except the problem is that what I am using to populate the text box have very long titles  they are journal articles and presentation titles    The dropdown box extends to the width of the longest element  which stretches off the edge of the screen  therefore making the scrollbar impossible to reach   I have tried various methods of trying to manually set the dropdown box using CSS to a particular width  but so far to no avail   The best I have accomplished it to set the Select box to a certain width but the dropdown menu itself is much  much wider   Any tips on this would be greatly appreciated    EDIT   It turns out that the following CSS line works in all of the primary browsers except for Google Chrome  which is what I was testing the page in    If a solution for Chrome is known  that would be good to know about   select  option   width

User · Answer

I find the best way to handle long dropdown boxes is to put it inside a fixed width div container and use width:auto on the select tag. Most browsers will contain the dropdown within the div, but when you click on it, it will expand to display the full option value. It does not work with IE explorer, but there is a fix (like is always needed with IE). Your code would look something like this.

HTML

<div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div>

CSS

div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto\9;
}

User · Answer

HTML    lt select class  shortenedSelect  gt       lt option value  0  disabled gt Please select an item lt  option gt       lt option value  1  gt Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more lt  option gt   lt  select gt    CSS    shortenedSelect       max-width  350px      Javascript      Shorten select option text if it stretches beyond max-width of select element   each     shortenedSelect option    function key  optionElement        var curText     optionElement  text          this  attr  title   curText           Tip  parseInt  350px   10  removes the  px  by forcing parseInt to use a base ten numbering system      var lengthToShortenTo   Math round parseInt   this  parent  select   css  max-width    10    7 3        if  curText length  gt  lengthToShortenTo              this  text          curText substring  curText length - lengthToShortenTo   curText length                  Show full name in tooltip after choosing an option     shortenedSelect   change function           this  attr  title      this  find  option eq     this  get 0  selectedIndex       attr  title            Works perfectly  I had the same issue myself  Check out this JSFiddle http   jsfiddle net jNWS6 426

User · Answer

On the server-side    Define a max length of the string Clip the string  optional  append horizontal ellipsis   Alternative solution  the select element is in your case  only guessing  a single-choice form control and you could use a group of radio buttons instead  These you could then style with better control  If you have a select  multiple  you could do the same with a group of checkboxes instead as they can both be seen as a multiple-choice form control

User · Answer

Small And Best One   test  width  202px     lt select id  test  size  1  name  mrraja  gt

User · Answer

Small And Better One  var i   0      container  gt  option   each function         if   this  val   length  gt  i            i     this  val   length           console log i           console log   this  val

User · Answer

You can style  albeit with some constraints  the actual items themselves with the option selector   select  option   width          This way you are not only constraining the drop-down  but also all of its elements

User · Answer

u can simply use  width  attribute of  style  to change the length of the dropdown box   lt select class  my dropdown  id  my dropdown  style  width APPROPRIATE WIDTH IN PIXLES  gt   lt option value  1  gt LONG OPTION lt  option gt   lt option value  2  gt short lt  option gt   lt  select gt    e g   style  width 200px

[html] Set width of dropdown element in HTML select dropdown options

Examples related to html

Examples related to css

Examples related to html-select