Issue
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.
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>
Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.