Home <div> with display: inline-grid and <select multiple>control inside is misaligned

Questions

<div> with display: inline-grid and <select multiple>control inside is misaligned

January 18, 2024

I’m trying to make a dual list to include/exclude items, and I’m having a problem that I can’t identify.

I have 3 divs, which must be displayed next to each other: the first one with the "include" list, the second one with the actions to move items from one list to another, and the third one with the "exclude" list.

.dual-list .dual-list-include-container, 
.dual-list .dual-list-actions, 
.dual-list .dual-list-exclude-container {
    display: inline-grid;
}

<div class="dual-list">
  <div class="dual-list-include-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-include" style="width:200px !important;height:90px !important;" ondblclick="...">
    </select>
  </div>
  <div class="dual-list-actions">
    <div>
      <a href="...">Exclude all</a>
    </div>
    <div>
      <a href="...">Include selected</a>
    </div>
    <div>
      <a href="...">Exclude selected</a>
    </div>
    <div>
      <a href="...">Exclude all</a>
    </div>
  </div>
  <div class="dual-list-exclude-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-remove" style="width:200px !important;height:90px !important; color:gray" ondblclick="...">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    </select>
  </div>
</div>

When one of the lists is empty, the container remains misaligned.

enter image description here

Any ideas on how to fix it?

I tried adding some more elements besides and fixing the top of the container, but it didn’t work.

>Solution :

As with any inline elements the default alignment is baseline. Just apply vertical-align: top.

.dual-list .dual-list-include-container,
.dual-list .dual-list-actions,
.dual-list .dual-list-exclude-container {
  display: inline-grid;
  vertical-align: top;
}

<div class="dual-list">
  <div class="dual-list-include-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-include" style="width:200px !important;height:90px !important;" ondblclick="...">
    </select>
  </div>
  <div class="dual-list-actions">
    <div>
      <a href="...">Exclude all</a>
    </div>
    <div>
      <a href="...">Include selected</a>
    </div>
    <div>
      <a href="...">Exclude selected</a>
    </div>
    <div>
      <a href="...">Exclude all</a>
    </div>
  </div>
  <div class="dual-list-exclude-container">
    <select size="6" multiple="" class="dual-list-ctl dual-list-remove" style="width:200px !important;height:90px !important; color:gray" ondblclick="...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
  </div>
</div>