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)

[anton-staroverov]

@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 [email protected] 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="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

First Name

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 https://github.com/tonystar/float-label-css/issues/24#issuecomment-361326183 , 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.