CSS Collapsing/Hiding divs with no data in <span>

Posted by Chance on Stack Overflow See other posts from Stack Overflow or by Chance
Published on 2012-11-08T22:15:51Z Indexed on 2012/11/08 23:00 UTC
Read the original article Hit count: 274

Filed under:
|

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

Missing Division, Address2, and Country

All Possible Fields

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;
}

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about css