Member Avatar for gagan22

hi all,

I have done one work in using multiple select box in which i am fetching value of select boxes from database. This all work i have done using ajax. Like when we select country form first select box then it will show state comes under country. But now problem is that when i am selecting country form first select box then 2nd select box which is for state. This is dyanmically changes size . Sometimes it becomes large and sometime it is very short in size. Because value are changing dynamically . So i want now that size should be fixed of 2nd select box.

IS there any way in html code in which we can fix the size of 2nd select box or we can fix the larges size which it can be ?? how i can set this fix size?????

Please help me to solve this issue.
Thanks,
Gagan

  • 4 Contributors
  • 3 Replies
  • 107 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short summary: the select is resizing because its contents change after your AJAX call. pointed to a CSS-based fix, cautioned about different screen sizes, and suggested seeding a longest option so the box never shrinks. Below are practical, non-redundant ways to make the control stable and usable across devices.

Options to try (ordered from easiest to most robust):

  1. Responsive CSS approach — keep the select visually consistent without hardcoding a single pixel value by sizing relative to font or container (so it scales on different screens). Also make sure borders/padding are accounted for by your layout rules.

  2. Measured-width JavaScript — after the AJAX fills options, measure the rendered width required for the longest label (use an off-screen element with the same font metrics), add a small buffer for padding/arrow, and apply that width to the select. This gives a tight fit that adapts to actual option text and font settings.

  3. Replace the native select with a lightweight custom widget when you need truncation, tooltips, or consistent cross-browser rendering. Use a well-maintained library that preserves keyboard and ARIA support; avoid DIY replacements that break accessibility.

Troubleshooting and cautions:

  • Test on multiple browsers, OSes, and DPI settings; fonts and native select decorations differ and affect width.
  • Avoid relying on option-level styling (most browsers ignore complex styles on option elements). If label length is a problem, consider abbreviating labels and showing full text in an adjacent readout or tooltip.
  • If using the JavaScript measurement method, run it after the DOM update from AJAX so you size against the current options.

If you want, share which browsers and how options are populated (example labels) and someone can suggest the exact measurement steps or a small plugin that fits your stack.

Recommended Answers

All 3 Replies

Member Avatar for essential

Try to apply this with your select element:

<select id="sel" name="sel" style="min-width: 300px; max-width: 300px; width : 300px;" size="1">

you can do the same thing with height.

Member Avatar for MidiMagic

Just remember that this will be tiny on some screens, and huge on others.

Member Avatar for almostbob

set before you populate the select box put a value in it equal to the largest expected size, in the code below function populate is not defined, I figure you have yours already written, and my javascript isnt good enough

<select id='country' onchange='populate("nextselect");'>
<option> Select </option>
<option value='appleland'>appleland</option>
<option value='bananaland'>bananaland</option>
<option value='carrotland'>carrotland</option>
</select>
<select id='nextselect'>
<option value=""> --------------- </option></select>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.