apply css to empty value

Question

I have the following css:

.ReadOnlySettingsListField {
    width:150px;
    float: left;
    padding: 2px;
    background-color: #eeeeee;
}

My html is as follows:

<table>
     <tr>
         <td>
             <div id="value1" class="ReadOnlySettingsListField ">{{ value1 }}</div>
             <div id="value2" class="ReadOnlySettingsListField ">&nbsp;</div>
             <div id="value3" class="ReadOnlySettingsListField ">{{ value3 }}</div>          
         </td>
     </tr>
 </table>

My problem is whenever the values: value1 or value3 are empty,the div does not look the way it should i.e. The background color only shows as a wee thin strip at the top. If the value1 or value3 have any text at all then it looks as expected (150 wide, background color=eeeeee)

How can I make the css to apply to 'empty' values as well?

The CSS does apply to empty elements as well, but you haven't specified any height values. — isherwood
– isherwood, Commented Mar 13, 2013 at 16:35

Sachin · Accepted Answer · 2013-03-13 16:33:47Z

2

Try to use min-width and min-height property in your css class like this

.ReadOnlySettingsListField 
{
 width:150px; 
 float: left; 
 padding: 2px; 
 background-color: #eeeeee;
 min-width:150px;
 min-height:100px;

}

answered Mar 13, 2013 at 16:33

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

apply css to empty value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related