Validation messages overlay field name

cliffmcmanus commented 6 years ago

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 commented 6 years ago

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

cliffmcmanus commented 6 years ago

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 notifications@github.com 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 commented 6 years ago

Finally got back in the office. Thanks for looking into my problem

Here is the HTML snippet in my Edit.CSHTML

@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)

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:notifications@github.com] Sent: Monday, January 29, 2018 12:45 PM To: tonystar/float-label-css Cc: cliffmcmanus ; Mention Subject: Re: [tonystar/float-label-css] Validation messages overlay field name (#24) @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 .

b3nnee commented 6 years ago

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.

anydigital / float-label-css

Validation messages overlay field name #24