CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3
BinteHava
BinteHava

Reputation: 149

Bootstrap Validation Error Messages CSS

I am using Bootstrap 3 Popover Validation With JQuery . I am facing the issue of the css. I have textboxes in table. Validation is working fine the only issue is that unable to show error above the respective textbox.

Validation Picture.

The error in the above picture should points to the right textbox which i have highlighted but its not happening this way. CSS I used for coloring is:

CSS

.popover.error-popover {
    background-color: #F2DEDE;
    border-color: #EED3D7;
    box-shadow: none;
    color: #B94A48;
    cursor: pointer;
    max-width: none;
    z-index: 1099;
}
</style>

JS code is:

$('#myform').validate_popover({onsubmit: false, popoverPosition: 'top'});

HTML The width of each textbox is 55. here is a structure of the above table.

<form id="myform">
<table>
<tr>
<td>
<input style="width:55px" name="code" />
</td>
<td>
<input style="width:55px" id="type" name="type"/>
</td>
.
.
.
</tr>
</table>
</form>

Upvotes: 1

Views: 3313

Answers (1)

mainguy
mainguy

Reputation: 8331

You need to setup css definition for the arrow too:

.popover.error-popover.top .arrow {
    border-top-color: #EED3D7;
    left: 30px;
}

Play around with colors (style.css) in this Plunker

Upvotes: 1

Related Questions