Validation messages overlay field name

[cliffmcmanus]

I am developing a new app and love the visual for the float label. However when I add an asp-validation- the field name is overlay-ed. I would like the validation messages to appear under the field. I don't know if this is my lack of my knowledge of HTML/CSS or understanding of the usage of the add in. Here is an section of the cshtml file

@Html.EditorFor(m => m.Guarantor.FirstName, new {htmlAttributes = new {@Class = "form-control",
@Placeholder = @Html.DisplayNameFor(m => m.Guarantor.FirstName )}})
@Html.LabelFor(m => m.Guarantor.FirstName)

[tonystar]

@cliffmcmanus can you please share the screenshot? Also, generated markup would be helpful.

[cliffmcmanus]

Sorry overcome by life events. I will get you both this evening. Cliff Office: 404-506-2409 Mobile: 678-371-4841 Home: 770-641-9204

…

On Jan 29, 2018, at 12:44 PM, Anton Staroverov ***@***.***> wrote: @cliffmcmanus can you please share the screenshot? Also, generated markup would be helpful. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[cliffmcmanus]

Finally got back in the office. Thanks for looking into my problem Here is the HTML snippet in my Edit.CSHTML <div class="container"> <div class="row" name="Content"> <div class="col-sm-2" name="Col1"> <div class="form-group has-float-label"> @Html.EditorFor(m => m.Guarantor.FirstName, new {htmlAttributes = new {@Class = "form-control", @Placeholder = @Html.DisplayNameFor(m => m.Guarantor.FirstName )}}) @Html.LabelFor(m => m.Guarantor.FirstName) <span asp-validation-for="Guarantor.FirstName" class="text-danger"></span> </div> Here is the generated markup <div class="form-group has-float-label"> <input class="form-control text-box single-line" data-val="true" data-val-length="Cannot be greater than 35" data-val-length-max="35" data-val-required="The First Name field is required." id="Guarantor_FirstName" name="Guarantor.FirstName" placeholder="First Name" type="text" value="Fred" /> <label for="Guarantor_FirstName">First Name</label> <span class="text-danger field-validation-valid" data-valmsg-for="Guarantor.FirstName" data-valmsg-replace="true"></span> </div> I will attach the files so you have full content Screen shot. I brought up the screen, cleared the first name field then selected Save As you can see the error message overlays the field name rather than appearing under the field. Any assistance would be great. Thanks Cliff Cliff From: Anton Staroverov [mailto:[email protected]] Sent: Monday, January 29, 2018 12:45 PM To: tonystar/float-label-css <[email protected]> Cc: cliffmcmanus <[email protected]>; Mention <[email protected]> Subject: Re: [tonystar/float-label-css] Validation messages overlay field name (#24) @cliffmcmanus <https://github.com/cliffmcmanus> can you please share the screenshot? Also, generated markup would be helpful. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#24 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/AXeV8qRyZQx64pjZj3sFakyWBm2Uktz7ks5tPgOAgaJpZM4Rv1sg> .

[b3nnee]

I noticed @tonystar has not been able to treat this.

Here is a fix. Put this in a custom.css file or at the bottom of the bootstrap version of the floatinglabel css file. Tweak as needed.

.has-float-label .form-control:placeholder-shown:not(:focus)+label.error {
    font-size: 80%;
    opacity: 1;
    top: auto;
}

.has-float-label label.error {
    display: block;
    position: relative;
    top: auto;
    clear: both;
    left: auto;
    right: auto;
    margin: 5px;
    /*make this "left" if you wish and increase the bottom-margin/margin  so it does not clash with any floating labels below it (if any).*/
    text-align: right;
    font-size: 80%;
}

.has-float-label label.error::after {
    content: " ";
    display: block;
    position: relative;
    height: auto;
    top: auto;
    clear: both;
    left: auto;
    right: auto;
    font-size: 80%;
    z-index: -1;
}

My validation message class and element is different from yours, so factor that in but the content of the CSS is generally the same.