CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxcss-position
Salar
Salar

Reputation: 2114

Strange behaviour when absolute positioning span around an input

I am trying to create validation error message for my input boxes, but I have encountered a strange behavior and difference between Chrome and other browsers.

I need to set the error label to display next to inputs, and it should be displayed over other elements. My approach is working fine in FF but not in chrome.

The problem is that in Chrome the error message falls below the input box.

Example: http://jsfiddle.net/ewuq44xg/3/

Resize the html preview area to see the effects.

.editor-group {
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
    margin-right: 10px;
}
.editor-label {
    min-width: 120px;
    display: inline-block;
    vertical-align: middle;
}
.editor-field {
    min-width: 150px;
    display: inline-block;
    margin: 3px 0;
    vertical-align: middle;
}

.field-validation-error {
    background-repeat: repeat-x;
    min-width: 20px;
    position: absolute !important;
    text-align: center;
    z-index: 1000;
    outline: 0 none;
    background-position: center center;
    background-color: #FFF4C9;
    border: solid 1px #FFE79E;
    color: #635145;
    margin-right: 6px;
    display: inline-block;
    padding: 2px 5px 1px 6px;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
    font-weight: normal;
    font-size: .85em;
}
<div class="editor-group">
    <div class="editor-label editor-required">
        <label  for="NameOfReceiptNo1">Name</label>
    </div>
    <div class="editor-field">
        <input type="text" value="">
        <span class="field-validation-error">
            <span class="k-icon k-warning"></span>
            Name is required
        </span>
    </div>
</div>

Upvotes: 0

Views: 157

Answers (2)

Rohit Kumar
Rohit Kumar

Reputation: 2031

add float: left to .editor-field input and float: right to .field-validation-error, also you can remove the display: inline-block from .field-validation-error

Fiddle

Upvotes: 1

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

when you are using position:absolute it's better to specify where exatctly should element exist. in your example I added right: -116px; top: 0; CSS to .field-validation-error and position:relative to .editor-group the first parent of field-validation-error so now field-validation-error will know to stay in right side of editor-group

plunker

.editor-field {
 min-width: 150px;
 display: inline-block;
 margin: 3px 0;
 vertical-align: middle;
 position: relative;
}

.field-validation-error {
 background-repeat: repeat-x;
 min-width: 20px;
 position: absolute !important;
 text-align: center;
 z-index: 1000;
 outline: 0 none;
 background-position: center center;
 background-color: #FFF4C9;
 border: solid 1px #FFE79E;
 color: #635145;
 margin-right: 6px;
 display: inline-block;
 padding: 2px 5px 1px 6px;
 border-radius: 4px 4px 4px 4px;
 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
 font-weight: normal;
 font-size: .85em;
 right: -116px; top: 0;
 }

Upvotes: 1

Related Questions