Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] :empty hide empty widget area issue

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #196230
    zephyr44
    Participant

    Hi all, having some trouble with :empty css on empty WordPress widget area.

    :empty won’t work on the outer element as there is still html code inside the aside tag.

    Is there a way to fix this with CSS?

    <aside id=”advanced_text-7″ class=”widget advanced_text”>

    < d i v c l a s s = ‘AdvancedText’ >< / d i v >

    </aside>

    .advanced_text:empty {display:none}
    .AdvancedText:empty {display:none}

    #196233
    Senff
    Participant

    This can only work if the (outer) aside has no padding and has no borders or box shadow or anything like that, and then it will have a height of 0 (and thus not visible) when the inner .AdvancedText is empty.

    But yeah, if the outer one has padding, or borders, or shading or anything like that…then no, you can’t fix this with just CSS.

    http://codepen.io/senff/pen/ZYxKZd

    #196279
    zephyr44
    Participant

    Thanks for the tip! I swapped the margins around on the CSS and it’s now displaying correctly.

    .AdvancedText {margin-bottom: 50px}
    .AdvancedText:empty {display:none}
    .widget.advanced_text {margin-bottom: 0px}

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.