tonycorporated / bootstrap-float-label Goto Github PK

View Code? Open in Web Editor NEW

118.0 118.0 40.0 123 KB

Pure CSS implementation of Float Label pattern for Bootstrap v3 and v4.

Home Page: https://codepen.io/tonystar/pen/LRdpYZ

License: MIT License

bootstrap-float-label's People

Contributors

Stargazers

Watchers

Forkers

deawx tquoc229 davegaprasistozipmend vaibhavnoreply urbinopescada richiufo rafwell madebymak ponsakthianand klimsko figacz maneql amebberson tlongren aalpert smichae 0xonebeing vidalpj b3nnee mangowi marcelodd shrinivasans pixinvent annango21 ahmadalsadder nuckyfox josephjlee vijay-pal carlin-q-scott vaibhavap martinsk09 pankaj-yadav0507 adriansarbu-spark msd117 mrsrobbot saurabh1811 valiantboymaksud impayru mauriciosouza-unoeste gorkdesign

bootstrap-float-label's Issues

create a scss mixin

The following has been tested for normal input fields of type text in most recent Safari, Firefox, Chrome on mac os x.

Here is a sample html markup, it includes some vue markup as well, but this can be removed without any side effects:

<div class="row">
                    <div class="col-24 col-md-18">
                        <keep-alive>
                            <ValidationProvider name="street" rules="required" v-slot="{ errors }">
                                <div class="form-group">
                                    <label class="has-float-label">
                                        <input class="form-control" name="street" type="text" placeholder="Street"
                                               :class="{ 'is-invalid': errors[0] }"
                                               v-model="formData.street">
                                        <span>Street</span>
                                    </label>
                                    <p class="invalid-feedback d-block">
                                        {{ errors[0] }}
                                    </p>
                                </div>
                            </ValidationProvider>
                        </keep-alive>
                    </div>
</div>

Could this be added to the sources somehow? A mixin can come pretty handy for those that use bootstrap-sass anyway.

@import "~bootstrap/scss/functions/";
@import "~bootstrap/scss/mixins/";
@import "~bootstrap/scss/variables/";

@mixin has-float-label {
  // taken from https://github.com/tonystar/bootstrap-float-label/blob/master/bootstrap-float-label.css
  display: block;
  position: relative;

  label, & > span {
    background: white;
    position: absolute;
    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 2px;
  }

  .form-control {

    &::placeholder {
      opacity: 1;
      transition: all .2s;
    }

    &:placeholder-shown:not(:focus)::placeholder {
      opacity: 0;
    }

    &:placeholder-shown:not(:focus) + * {
      font-size: 100%;
      color: $input-placeholder-color;
      transform: translateY(-50%);
      top: 50%;
    }
  }

}

Use `pointer-events: none;` to avoid label blocking click

<label for="author" class="has-float-label">
	<input class="form-control" type="text" name="author" placeholder="Name" />
	<span style="pointer-events: none;">Name</span>
</label>

Add _mixins.scss for better re-usability

Are you planning on releasing a newer version to NPM? Version 4.0.1 doesn't work on firefox, so to get around that, I've been pulling your latest version from github. I've had no problems with that so far, but being able to pull from npm will be a little neater.

    "bootstrap-float-label": "https://github.com/tonystar/bootstrap-float-label.git",

`:placeholder-shown` doesn't have IE support

:placeholder-shown does not have support for IE and Edge.
Is there any alternative for it ?

Long labels wrapping badly, duplicated label with focused input.

Playing around with long labels causing badly looking, wrapped text. Here's the quick fix for that so:

.has-float-label label { white-space: nowrap; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; display:block; }

Focused input is showing placeholder and label in the same time. Quick fix for this too:

.has-float-label .form-control:focus::placeholder { color: transparent; }

Reduce the font size of the place holder

i cant seem to reduce the font size of the place holder in the input field

Use namespaces instead relative paths in @import-s

Bootstrap 4 stable

Is comaptible with bootstrap 4 stable?

input-group-addon and alpha6

.input-group-addon no longer works with alpha6 (tested with codepen in README)

Not Working for number type inputs

Thanks for this css code, really useful. I found that it is not working for number type inputs on firefox, is this a bug or was it never intended for it?

Make more default styles

Control label/placeholder sizing
Control label placement

Support Bootstrap v3

Up to Bootstrap v4 alpha 6

Laggy Animation with many fields

I found that the floating animation lags a lot when there are a lot going on in the same page. Because my app is designed to have many fields on it on the same page, and I'm using Angular which probably does a lot of checking and processing.

As a result, each time the page is loaded the animation is halted each time causing the label to overlap with the value in the inputs.

So, I did a little digging and found that the animation works a lot better with transform instead of changing the layout or size of the element directly.

Here's the fixed CSS code below. You might need to update the initial top attribute a bit, as I have another class that tells the size of my input boxes.

.has-float-label {
  display: block;
  position: relative;
}
.has-float-label label, .has-float-label > span {
  position: absolute;
  cursor: text;
  font-size: 75%;
  opacity: 1;
  z-index: 3;
  line-height: 1;
  padding: 0 1px;
}
.has-float-label label::after, .has-float-label > span::after {
  content: " ";
  display: block;
  position: absolute;
  background: white;
  height: 2px;
  top: 50%;
  left: -.2em;
  right: -.2em;
  z-index: -1;
}
.has-float-label .form-control::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.has-float-label .form-control::-moz-placeholder {
  opacity: 1;
  transition: all .2s;
}
.has-float-label .form-control:-ms-input-placeholder {
  opacity: 1;
  transition: all .2s;
}
.has-float-label .form-control::placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
}
/* These rules are to hide the actual placeholder, when the input doesn't have value yet isn't focused on */
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder {
  opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
  font-size: 150%;
  opacity: .5;
  font-weight: normal;
  top: .3em;
}

.input-group .has-float-label {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.input-group .has-float-label .form-control {
  width: 100%;
  border-radius: 0.25rem;
}
.input-group .has-float-label:not(:last-child), .input-group .has-float-label:not(:last-child) .form-control {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right: 0;
}
.input-group .has-float-label:not(:first-child), .input-group .has-float-label:not(:first-child) .form-control {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

/* This is to set the starting point of the animation of the label */
.has-float-label .form-control + label {
  top: 1.5em;
}
.it-dynamic-component .has-float-label .form-control:focus + label, .it-dynamic-component .has-float-label .form-control:not(:placeholder-shown) + label {
  transform: translateY(-2.8em);
  transition: transform .2s;
}

RTL support

Do you have any plan for supporting RTL?

No default jsDelivr CDN file set

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

Placeholders don't display properly in Firefox

In Firefox 53, the labels and placeholders are displayed over each other. This problem affects both v3 and v4 of bootstrap-float-label.

Edit: Actually this only affects v3. The CodePen for v4 is affected, but the actual v4 code in GitHub is not.

Otherwise, this library rocks - thanks for creating it! :)

Doesnt appear to work correctly on mobile devices

The cursor is massively offset when using on a phone.

Although the text appears in the correct place, it seems the mobile doesnt render the text cursor correctly.

Any one else experiencing this?

Thanks.