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

http://stackoverflow.com/questions/774054/should-i-put-input-tags-inside-a-label-tag

I can see that you have CSS for select tag, but I cant see a demo and I cant seem to figure out how exactly it is supposed to work.
Kudos for this. I searched a lot for no JS floating label input.

una/YouMightNotNeedJS#28

This looks like an awesome pattern but it breaks in Bootstrap 4 Alpha 6:

https://codepen.io/anon/pen/aypeVo

Any chance you can take a look?

Thank you!

Hi,

I'm I doing something wrong or the library doesn't work with Firefox?

To make has-float-label compatible with select2. In previous versions you only need to apply a small change in the script, ".has-float-label> span" add the pseudo-element "not (.select2)" to prevent -float-label from being applied to the span tags that you create select2 but now with the style improvements it is not possible to apply that change.

.has-float-label label, .has-float-label> span: not (.select2) {
        position: absolute;
        left: 0;
        top: 0;
        cursor: text;
        font-size: 75%;
        opacity: 1;
        -webkit-transition: all .2s;
        transition: all .2s;
        top: -.5em;
        left: 0.75rem;
        z-index: 3;
        line-height: 1;
        padding: 0 1px;
    }

The input placeholder is visible in Firefox

when not in focus

This.
Please update them.

Via attr/content

Float label works with placeholder="" but it don't works without placeholder attribute in an input element.

I found a workaround by styling an invisible placeholder if it is equal to # (like to disable href="#" links), by adding this code in input, select, textarea { } selector :

&[placeholder="#"]::placeholder {
    color:transparent;
}

This CSS code .has-float-label select:placeholder-shown:not(:focus) + * doesn't make sense to me. select can't have a placeholder attribute, it would have to be handled via a selected / disabled / hidden option. - Of course that's where the css only solution comes to the edges of what it can do - unless I'm missing something here.

https://codepen.io/Julix/pen/EXpVjz

Anyone know of a CSS way of getting the select's "placeholder" (i.e. disabled option) to display the label (and not when other things are selected)? -- Else, what's a simple js solution for this?

This code worked fine in version 1.0.0, now in version 1.0.2 it breaks

<div class="col-xs-12">
  <div class="form-group has-float-label">
    <input type="text" name="username" id="username" class="form-control" placeholder=" ">
    <label class="control-label" for="username">Username</label>
    <span class="help-block"> Help message </span>
  </div>
</div>

Aparently, this change scss/_mixins.scss#L6 made all spans inside a .has-float-label element become a float label, when it shouldn't

Can someone explain to me why this change was made? And why it was needed?

In my application we have a lot of fields, all of them using float label. We had been using v1.0.0, but a new dependency made v1.0.2 required and this bug appeared.

I know I can change the spans to p but how could I solve this without messing with the current HTML?

https://github.com/picnicss/picnic/issues/122

• Works w/ validation
• Works w/ any input fields
• Works w/ selects

pure-css/pure#596

you-dont-need/You-Dont-Need-JavaScript#60

Doesn't work nicely with rounding the corners on input-group.

Here's an example:

<div class="form-group input-group has-float-label">
  <input class="form-control" type="text" name="title" id="title" value="" placeholder=" ">
  <label for="title">Title</label>
</div>

And here's kind of a fix, could be improved probably:

.has-float-label input:first-child:nth-last-child(2) { border-top-right-radius: .25em; border-bottom-right-radius: .25em; }

https://github.com/mdbootstrap/bootstrap-material-design/issues/17

With bootstrap 4 box-shadow around the input elements, the label pseudo content's height and position are off.

https://github.com/ginader/HTML5-placeholder-polyfill