mog5808 pro asked 6 years ago


I want to disable the label floating. I am using 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 6 years ago


Ok, now it's clear.
<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 6 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 6 years ago


Sure thing,

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


Paste here all the exact code and explain in details what's wrong and what's your aim.

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No