neděle 17. února 2013

CSS - Exact same height and alignment of text and input text box in major browsers

This is the story about long time testing behaviour of this feature for Firefox, IE9, Chrome, Opera and Safari.
My goal was to have pretty labelled text input fields on the web site, which are connected together to one visual compact object. Finally I was successful but not for 100%. There is still browser reaction to different  fonts, font-size and browsers. But anyway, there are results with different fonts here:

As you can see, there was a goal to keep element compact in different themes, which I have in my application. May goal was also to have independent <input type="text"> element, so wished behaviour was to make automatically compacted label and text element when the label exists. If label does not exist I wanted to have same input-text, but without joining to the text (second text-item row in result).

Finally result does not work for 100% in all browsers and themes, it needs short "trimming" of the vertical padding for your exact case, to reach the same width for both elements.

Shadows and gradients is another story, so now I would like concentrate to compact fields only.

 The very important to create useful cross-browser application is the html header definition:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

So, there is the testing form code here:

<div style="padding:10px; font-family: Calibri; font-size: 14px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field textnbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>
<div style="padding:10px; font-family: Calibri; font-size: 9px;">
Field text <input class="lf-ui-form-item" type="text" value="some other value"/>
</div>


There are defined two blocks, one contains the compact labelled text input and the second standard text input with normal unformatted text label. 

 Important for this solution, is set-up font-family and font size in the parent block:

 <div style="padding:10px; font-family: Calibri; font-size: 14px;">

So children elements inherits font-family and font size from the parent. For the label element I used the DIV after several test with SPAN and LABEL. Finally I learned the DIV is the best for my goal.

The label DIV is marked with class lf-ui-label and the text-input is marked with lf-ui-form-item class. The second item block is defined without the label DIV:

div.lf-ui-label {
    margin: 0px;
    font-size: inherit;
    font-weight: bold;
    background-color: #CCCCCC;
    border-width: 0px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
}
div.lf-ui-label + input.lf-ui-form-item {

    padding: 5px 10px 5px 10px;
    margin: 0px 0px 0px -10px;
    font-size: inherit;
    background-color: #2b55a8 !important;
    vertical-align: middle;
    border-width: 0px;
}
input.lf-ui-form-item {


    background-color: #3b3b3b;
    font-size: inherit;
    padding: 4px 7px 4px 7px;
    font-weight: bold;
    border: none 0px;
    outline: none;
}

Background colours are used as markers for particular elements.

font-size and font-weight must be inherited, to keep the same vertical size, but for my themes I used bold for all form elements, so, I defined it here.

For label is very important to keep follow styles:
margin: 0px 
border-width: 0px;
display: inline-block; - gets the DIV in line with text input element
vertical-align: middle; - important for cross browser alignment
overflow: hidden; - multi-line is not allowed

This class div.lf-ui-label + input.lf-ui-form-item is styling the input with class .lf-ui-form-item located next to DIV with .lf-ui-label. So if I put text-input next to label is styled with this class. If the text-input is not located next to .lf-ui-label is not styled. So this CSS part is taking care about compact behaviour.

For text item located next to label DIV (in css: div.lf-ui-label + input.lf-ui-form-item) is very important to keep top and bottom margin on zero: margin: 0px 0px 0px -10px;

Finally, to reach the same vertical size it is necessary to trim top and bottom padding in both classes to reach the compact effect. Commonly it is very easy for standard fonts and sizes and work it in all browsers.

There is the result from experimental solution in the JSFIDDLE:
JSFIDDLE.Net experiment link - there you can take the complete experiment code too

Experiment HTML code:



<div style="padding:10px; font-family: Calibri; font-size: 8px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 8px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 9px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 9px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 10px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 10px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 12px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 12px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 14px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 14px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 16px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 16px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 18px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 18px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 20px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 20px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 22px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 22px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>

 <div style="padding:10px; font-family: Calibri; font-size: 26px;">
<div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 26px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value" style="width:71%" />
</div>
    
    
<div  style="padding:10px; font-family: Calibri; font-size: 26px;">
Field text <input class="lf-ui-form-item" type="text" value="some other value"/>
</div>




Sources:

Vystavil v
Štítky: , , , ,

Žádné komentáře:

Okomentovat

Přihlásit se k odběru: Komentáře k příspěvku (Atom)