Dynamically expand Dropdowns

Question

I have a table with several dropdowns with different lengths (widths).
I want the shorter dropdowns to have the same widths as the longer ones:

A quick solution is:

.mySel {
  width: 35%;
}

But, of course, this is not dynamically.

It there any way to dynamically define the widths of the shorter dropdowns, so that it expands over the entire table cell?
Maybe with jQuery?

Here is a fiddle.

Your html is having two select dropdowns with same id, you should never ever have same id to different element in same page, accept it and live happy life. — Rahul, Feb 23 '17 at 10:43

score 2 · Accepted Answer · answered Feb 23 '17 at 10:41

you can achieve that using flex box like this

.flx{
  display:flex;
}

.flx select {
  flex-grow: 1;
}

<table border="1">
  <tbody>
    <tr>
      <td>Some Text</td>
      <td>
      <div class="flx">
      
    
        From:
        <select id="mySel1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        To:
        <select id="mySel2">
          <option>11</option>
          <option>12</option>
          <option>13</option>
        </select>
          </div>
      </td>
    </tr>
    <tr>
      <td>More Text</td>
      <td>
        <select>
          <option>Option 4</option>
          <option>Option 5</option>
          <option>Option 3</option>
        </select>
        <select>
          <option>A very loooong option</option>
          <option>Option 5</option>
          <option>Option 3</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

try this answer https://stackoverflow.com/a/37601680/7490341 my suggestion is to maintain seperate <td> for each drop down and in css style follow the above link

edited May 23 '17 at 11:46

Community

1
1

answered Feb 23 '17 at 10:39

mymail

131
2
12

Next time, whenever you will have answer related to question or same question asked before, please raise duplicate flag. – Rahul Feb 23 '17 at 10:41

Dynamically expand Dropdowns

2 Answers2