html - Setting element heights using jQuery giving improper height -
i have list of elements (cards i'm calling them) each 33% width in order fill page. inside them header , detail , want show detail of of them click of checkbox. length of detail variable between cards when user clicks show details attempt height of each card's detail, set them same, , show details on them all.
i set heights correctly once slidedown() called on them given height greater set. able figure out has data-set-label , data-set-data being inline-block , having width of 50%. if remove that, slidedown() shows proper height. it's if slidedown() not taking consideration inline block elements on same line, doesn't seem right...
what's going wrong?
$(document).ready(function() { $("#showdetailscheckbox").change(function() { if ($(this).is(":checked")) { setcontentdataheights(); $(".cards-card-detail").slidedown(); } else { $(".cards-card-detail").slideup(); } }); }); function setcontentdataheights() { var maxcontentdataheight = 0; $(".cards-card-detail").each(function() { if ($(this).height() > maxcontentdataheight) maxcontentdataheight = $(this).height(); }); if (maxcontentdataheight > 0) { $(".cards-card-detail").each(function() { //$(this).css("height", maxcontentdataheight.tostring() + "px"); $(this).height(maxcontentdataheight); }); } }* { box-sizing: border-box; } .cards { font-size: 0; } .cards-card { font-size: 12pt; display: inline-block; width: 33%; vertical-align: top; border: 1px solid red; } .cards-card:nth-child(2n) { width: 34%; border: 1px solid green; } .cards-card-header { height: 100px; } .cards-card-detail { padding: 10px; border-top: 1px solid red; display: none; } .data-set-wrapper { width: 100%; font-size: 0; } .data-set-label { font-size: 12px; border: 1px solid red; width: 50%; display: inline-block; } .data-set-data { font-size: 12px; border: 1px solid red; width: 50%; display: inline-block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <input type="checkbox" id="showdetailscheckbox" />show details <div class="cards"> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> </div>
that's pretty funky.
a theory:
when .cards-card-detail elements have display:none, widths undefined. .data-set-label elements have width:50% but, parents' widths undefined, widths calculated in strange way causes inner text wrap , heights thrown off.
some tests:
in test below, width of .data-set-label computed "50 pixels", though it's defined "50%". when .cards-card-detail display:block, more accurate width returned.
$(function() { console.log("display:none - " + $('.data-set-label').width()); $('.cards-card-detail').show() console.log("display:block - " + $('.data-set-label').width()); });* { box-sizing: border-box; } .cards { font-size: 0; } .cards-card { font-size: 12pt; display: inline-block; width: 33%; vertical-align: top; border: 1px solid red; } .cards-card:nth-child(2n) { width: 34%; border: 1px solid green; } .cards-card-header { height: 100px; } .cards-card-detail { padding: 10px; border-top: 1px solid red; display: none; } .data-set-wrapper { font-size: 0; } .data-set-label { font-size: 12px; border: 1px solid red; width: 50%; display: inline-block; } .data-set-data { font-size: 12px; border: 1px solid red; width: 50%; display: inline-block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="cards"> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> </div>setting width of .data-set-label explicitly "50px" makes text wrap , increases height of .cards-card-detail, seemingly same "wrong" height in example (coincidence?).
* { box-sizing: border-box; } .cards { font-size: 0; } .cards-card { font-size: 12pt; display: inline-block; width: 33%; vertical-align: top; border: 1px solid red; } .cards-card:nth-child(2n) { width: 34%; border: 1px solid green; } .cards-card-header { height: 100px; } .cards-card-detail { padding: 10px; border-top: 1px solid red; } .data-set-wrapper { font-size: 0; } .data-set-label { font-size: 12px; border: 1px solid red; width: 50px; display: inline-block; } .data-set-data { font-size: 12px; border: 1px solid red; width: 50px; display: inline-block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="cards"> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> </div>a solution:
i had success defining width of .cards-card-detail @ "100%" in hopes childrens' "50%" width set correctly.
$(function() { $("#showdetailscheckbox").change(function() { if ($(this).is(":checked")) { setcontentdataheights(); $(".cards-card-detail").slidedown(); } else { $(".cards-card-detail").slideup(); } }); }); function setcontentdataheights() { var maxcontentdataheight = 0; $(".cards-card-detail").each(function() { if ($(this).height() > maxcontentdataheight) maxcontentdataheight = $(this).height(); }); if (maxcontentdataheight > 0) { $(".cards-card-detail").height(maxcontentdataheight); } }* { box-sizing: border-box; } .cards { font-size: 0; } .cards-card { font-size: 12pt; display: inline-block; width: 33%; vertical-align: top; border: 1px solid red; } .cards-card:nth-child(2n) { width: 34%; border: 1px solid green; } .cards-card-header { height: 100px; } .cards-card-detail { padding: 10px; border-top: 1px solid red; display: none; width: 100%; } .data-set-wrapper { font-size: 0; } .data-set-label { font-size: 12px; border: 1px solid red; width: 50%; display: inline-block; } .data-set-data { font-size: 12px; border: 1px solid red; width: 50%; display: inline-block; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <input type="checkbox" id="showdetailscheckbox" />show details <div class="cards"> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> </div>i'm curious other explanations.
edit:
i see mean: solution above doesn't work consistently.
here's alternative technique:
set .cards opacity:0 until heights of .card-card-detail set. reveal cards.
$(document).ready(function() { setcontentdataheights(); $('.cards-card-detail').hide(); $('.cards').addclass('show'); $("#showdetailscheckbox").change(function() { if ($(this).is(":checked")) { $(".cards-card-detail").slidedown(); } else { $(".cards-card-detail").slideup(); } }); }); function setcontentdataheights() { var maxcontentdataheight = 0; $(".cards-card-detail").each(function() { if ($(this).height() > maxcontentdataheight) maxcontentdataheight = $(this).height(); }); if (maxcontentdataheight > 0) { $(".cards-card-detail").height(maxcontentdataheight); } }* { box-sizing: border-box; } .cards { font-size: 0; opacity: 0; transition: opacity .25s; } .cards.show { opacity: 1; } .cards-card { font-size: 12pt; display: inline-block; width: 33%; vertical-align: top; border: 1px solid red; } .cards-card:nth-child(2n) { width: 34%; border: 1px solid green; } .cards-card-header { height: 100px; } .cards-card-detail { padding: 10px; border-top: 1px solid red; } .data-set-wrapper { font-size: 0; } .data-set-label { font-size: 12px; border: 1px solid red; width: 50%; display: inline-block; vertical-align: top; } .data-set-data { font-size: 12px; border: 1px solid red; width: 50%; display: inline-block; vertical-align: top; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="showdetailscheckbox" />show details <div class="cards"> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label label label label label label </label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label label label label label label label label label label </label> <div class="data-set-data"> data </div> </div> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> <div class="cards-card"> <div class="cards-card-header"> here header information </div> <div class="cards-card-detail"> <div class="data-set-wrapper"> <label class="data-set-label">label</label> <div class="data-set-data"> data </div> </div> </div> </div> </div>wiki
Comments
Post a Comment