CSS Collapsing/Hiding divs with no data in <span>
- by Chance
I am trying to display an address which includes the following information: Title, division, address1, address2, town/state/zip, and country (5 seperate lines worth of data). The problem is sometimes the company may only have the title, address1, and town/state/zip yet other times it may be all but address2. This is determined upon a db record request server side. Therefore how can I make my output look proper when some of my labels will be blank? I would like div's that contain an empty span to be essentially collapsed/removed. My only idea of how was to use jquery and a selector to find all divs with blank spans (since thats all an asp.net label really is) and then remove those divs however this seems like such bad form. Is there any way to do this with css? Possible Code would be something like: $('span:empty:only-child').parent('div').remove();
Picture Examples (Ignore spacing/indentation issues which I will fix)
Missing Division, Address2, and Country
All Possible Fields
The Html
<asp:Label runat="server" ID="lblBillingAddressHeader" CssClass="lblBillingAddressHeader" Text="Billing Address:" />
<div style="position:relative; top:150px; left: 113px;">
<div class="test">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
</div>
The CSS
.test {
position: relative;
top: 0px;
left: 0px;
height: 12px;
width: 300px;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
