I try to create complex control in my online application. Control have two listboxes and two buttons between. Width of listboxes (listbox-target, listbox-source) must be equal. Width of control-buttons can be fixed. Height of all controls must be equal too. HTML
and JS
code below.
I try to make this with css, but can't. I wrote javascript to calculacte width and height of each element.
Width of listbox-target = listbox-source = ('fullwidth of attributeref-two-listboxes' - 'width of control-buttons') / 2.
It work good, but must be called everytime from resize event. Sometimes resize event is not fire and width of controls not change.
I think, best of all is make this with css only, but how?! Please, help!
function resizeAttributerefTwoListboxes() {
var is_ff = navigator.userAgent.toLowerCase().indexOf('firefox') > -1,
is_ie = navigator.userAgent.toLowerCase().indexOf('MSIE') > -1 || /Trident.*rv[ :]*(\d+\.\d+)/.test(navigator.userAgent);
$("div.attributeref-two-listboxes div").removeAttr("style");
$("div.attributeref-two-listboxes").each(function(){
var that = $(this),
target = that.find(".listbox-target"),
source = that.find(".listbox-source"),
control = that.find(".control-buttons");
if (this.offsetWidth < 420) {
control.find('a[method="add"] > i').addClass("fa-angle-up").removeClass("fa-angle-left");
control.find('a[method="remove"] > i').addClass("fa-angle-down").removeClass("fa-angle-right");
target.css({"width":"100%"});
control.css({"width":"100%"});
control.children().css({"display":"inline-block"});
source.css({"width":"100%"});
} else { //horizontal alignment
control.find('a[method="add"] > i').addClass("fa-angle-left").removeClass("fa-angle-up");
control.find('a[method="remove"] > i').addClass("fa-angle-right").removeClass("fa-angle-down");
var w = Math.ceil((this.offsetWidth - control[0].offsetWidth - (is_ff || is_ie ? 2 : 1))/2);
target.css({"width":w+"px"});
source.css({"width":w+"px"});
control.children().css({"height":(target[0].offsetHeight-20)+"px"}); //20 - paddings from top and bottom (10+10)
control.css({"height":target[0].offsetHeight+"px"});
}
});
}
<div class="attributeref-two-listboxes">
<div class="listbox-target" style="width: 549px;">
<select id="Objectint_chg_management_change_user" acode="chg_management_change_user" atype="8" astyle="3" aislist="0" class="form-control tooltipstered" multiple="multiple" style="max-width: 750px;" size="4" name="Objectint[chg_management_change_user][]"></select>
</div>
<div class="control-buttons" style="height: 90px;">
<div style="height: 70px;">
<a class="btn btn-primary option mover" target="Objectint_chg_management_change_user" source="Objectint_chg_management_change_user_select" method="add" href="#">
<i class="fa fa-angle-left"></i>
</a>
<a class="btn btn-primary option mover" target="Objectint_chg_management_change_user" source="Objectint_chg_management_change_user_select" method="remove" href="#">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
<div class="listbox-source" style="width: 549px;">
<select id="Objectint_chg_management_change_user_select" acode="chg_management_change_user" atype="8" astyle="3" aislist="0" class="form-control" multiple="multiple" style="max-width: 750px;" size="4" name="[]">
<option value="68">User 1</option>
<option value="61">User 2</option>
<option value="76">User 3</option>
</select>
</div>
Use float: left
and min-width
.
The min-width
should be at least the widths of the elements. If the section can span the entire width of the page, using 960px
is not a bad idea because it displays well in most form factors (tablets, smartphones, PCs, occupies 1/2 of a 1080p display).
This way you can also avoid using display: inline-block
which is not supported in older browsers (though that window keeps sliding forward so this isn't much of a problem these days except for enterprise web apps,etc.).
.attributeref-two-listboxes { min-width: 960px; overflow: hidden; font-size: 0; } .chooser { float: left; width: 300px; height: 100px; font-size: 14px; } .buttons { float: left; } .buttons input { width: 30px; height: 30px; background-color: rgb(34,131,203); color: #fff; border: 1px solid #333; display: block; margin: 13px 16px; font-size: 16px; }
<div class="attributeref-two-listboxes"> <select multiple size=4 class='chooser'> <option>Uno</option> <option>Dos</option> <option>Tres</option> </select> <div class='buttons'> <input type='button' value='<' /> <input type='button' value='>' /> </div> <select multiple size=4 class='chooser'> <option>Uno</option> <option>Dos</option> <option>Tres</option> </select> </div>
Flex-box allow to avoid using JS in some cases like your.
@media screen and (max-width: 500px) {
.flex_container {
flex-direction: column;
flex-basis: 100%;
}
.arrays_v {display : none}
.arrays_h {display : inline}
}
I suppose my my solution will be useful for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.