Show container only if text inside it


Tags: css,css3

Problem :

I have a container a the top of the webpage which I use to dynamically display status messages. By default the container is empty but it's still visible because the of the red background and the padding.

How can I make this container visible only if there is text inside it using CSS?

#status_container {
  width: 240px;
  padding: 6px 16px;
  margin: 5px 8px;
  height: auto;
  background: red;
}
<div id="status_container"></div>


Solution :

Instead, apply styling to a child element. Then use CSS to display that child element if it exists like so:

.status_container {
  overflow: hidden;
}

.status_container > p {
  padding: 6px 16px;
  margin: 5px 8px;
  background: red;
}

<div class="status_container">
    <p>Upload successful.</p>
</div>

Set overflow: hidden on parent so that the margin of the child p is still visible

See this jsFiddle of an empty and full message.


    CSS Howto..

    How do I repeat select elements in HTML

    How to get a CSS selector using Selenium WebDriver?

    How to make text blink on website? [duplicate]

    Bootstrap “jumbotron-narrow” example. how does the style change?

    how to add dots (…) with the same width?

    How can I “cloak” my Javascript and CSS files using PHP?

    Odd visual effect (little line shows) when hovering over button in browser

    How do I center my responsive form and align it evenly with everything else?

    How to Center-Justify links in CSS?

    Gradient css borders not showing in internet explorer an firefox

    How to make a stable two column layout in HTML/CSS

    CSS - How to add a second background image

    how to add items into a CSS based text rotator (similar to news ticker)

    How to install Firefox “Stylish” css file? [closed]

    How to make sure JQuery dynamically inject CSS properly and ready to use?

    How to have different transition durations for css and angular transition on same element?

    Show/Hide & Change CSS functions are not working

    Border positioning: how to?

    In Python, I can print HTML to the browser, how can I ensure that the CSS that relates to it also get “printed”

    How to add Bootstrap to Fullpage.js

    Css - How to override css for a table cell

    How to apply style rules that are tied to a model in AngularJS?

    Pure JavaScript - how to add class to a class? Or change style in class

    How to Add flexibility to SASS for another color

    how do you change the color of nav bar

    How can I achieve this Flash effect using jQuery?

    How to fix the headline row in a table using css? [closed]

    How can I get the bottom padding of an input working in IE8?

    How can I reduce ons-list-item height?

    How To Change Text Box Content On Hover