Topic: Disable Label Floating
mog5808
pro
asked 5 years ago
pug
.col-md-6
.md-form
input#form52.form-control(type='text')
label(for='form52') Your email
The code above works well for the floating labels when i remove the md-form
there is too much padding and i tried the following and it does not work either
form.form-group
.row
.col-md-6
label.active(for='userFirstName') First Name *
input.form-control#userFirstName(type='text')
Any ideas?
Thanks
Magdalena Obalska
free
answered 5 years ago
<div class="md-form">
<input placeholder="example input" type="text" id="form1" class="form-control">
<label for="form1">Example label</label>
</div>
nickgardnermedia pro commented 5 years ago
For anyone else looking to solve this, just modify the following line in SCSS for pro: _variables.scss -> line 195 -> translateY( ) This is a negative number and moves the label up when the input is selected. I changed from -140 to something more subtle like -10 but you could put 0 or remove the line to keep it static. Also, for non scss just add the following to custom styles.scss: .md-form label.active{-webkit-transform:translateY(-10%);-ms-transform:translateY(-10%);transform:translateY(-10%)} Replace -10% with your value as necessary.
mog5808
pro
answered 5 years ago
<div class="md-form">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
</div>
The code above will create an input
with type=text
then when clicked the label Example label
will move up. How can i stop the label from moving up.
Basically i want the label to always stay on top.
Cheers,
Magdalena Obalska
free
answered 5 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No