Archives For css

Problem
In jQuery, getting a numeric property returns a string.
What if we want a css property value as an integer or float?

Solution

parseInt($('#elem').css('top'));
parseFloat($('#elem').css('top'));

Expand Div with Floats

February 10, 2016 — Leave a comment

Problem

How do you expand a div to contain floats?
Elements like div’s grow to fit its contents, but when you use the float property on its children, the div will not expand.
The div will show a height of 0.

Solution to Contain a Float

Set the parent to overflow:auto.

<div style="overflow: auto;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

Found a bug in the .has-feedback icon alignment in bootstrap 3. Add the following to your css file to fix it.

.has-feedback .form-control-feedback {
    position: absolute;
    top: 3px;
    right: 15px;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}