Bootstrap Material design floating labels overlap input text

Question

I am using bootstrap material design and my labels overlap my input texts when the text is pre-populated.. (ref. my screenshot below). Is there a way I can prevent the label from overlapping?

My code:

<div className="modal-body">
    <div className="md-form">
        <input type="text" className="form-control" defaultValue={ project.name } ref="name"/>
        <label>Name</label>
    </div>
    <div className="md-form">
        <input type="text" className="form-control" defaultValue={ project.description } ref="description"/>
        <label>Description</label>
    </div>
    <div className="md-form">
        <input type="text" className="form-control" defaultValue={ project.slug } ref="slug"/>
        <label>Slug</label>
    </div>
</div>

Thanks in advance!

Jyoti Pathania · Accepted Answer · 2016-09-19T17:45:12.653

3

Updated

translateY() value will change the position of label when input is active or focused. You can manipulate its value to set the desired position of label and also you can change the font-size value.

HTML:

<div className="md-form">            
        <input type="text" className="form-control" defaultValue={ project.name } ref="name"/>    
        <label>Name</label>        
</div>

CSS:

.md-form label.active {
    font-size: 0.8rem;
    transform: translateY(-140%);
}

I hope this helps you

edited Sep 19 '16 at 17:45

answered Sep 19 '16 at 16:29

Jyoti Pathania

4,944
1
17
29

Hi - this results in a little less overlap, but it's still overlapping.. – Trung Tran Sep 19 '16 at 17:06
2

Earlier i assumed that you are using [fezvrasta material design library](http://fezvrasta.github.io/bootstrap-material-design/). Since you are using [mdbootstrap](http://mdbootstrap.com/components/forms/). your earlier syntax were correct. Can your replicate your problem in jsfiddle or codepen. I have created the codepen example everything work fine there. check the codepen **[link](http://codepen.io/jpI/pen/QKKQpZ?editors=1100)** – Jyoti Pathania Sep 19 '16 at 17:27

score 1 · Answer 2 · answered Feb 17 '19 at 18:41

I have the same issue and fixed by using focused class on element. If you are using vuejs you can use inline statement to check if the value is filled and then call focused class (using v-bind:class) that will set style for the element.

Something like this:

<div class="form-line"  v-bind:class="[name != null ? 'focused' : '']">
     <input type="text" class="form-control" v-model="name">
     <label class="form-label" >Name</label>
</div>

P.S. This also can be used for other frameworks with appropriate syntax.

This is working well, I'm using is-filled in vue instead of focused. — CKGrafico, Jun 30 '19 at 17:28

score 0 · Answer 3 · answered Oct 09 '16 at 03:04

0

If you are using Angular2 then you can do this with out creating a custom directive. On the label do something like this.

<label [class.active]="name && name.length > 0">Some Label</label>

answered Oct 09 '16 at 03:04

KevinM

1,799
4
28
58

1

Does this method even work? For some reason my active class keeps getting removed from the label. – Neve12ende12 Aug 21 '17 at 21:47
@Neve12ende12, It should still work. You just need to make sure bootstrap is using the active css class. – KevinM Aug 22 '17 at 23:33
1

You are correct, I must have just did something wrong. In VueJS it is something like v-bind:class="[name ? active: '']" – Neve12ende12 Aug 24 '17 at 17:10

score 0 · Answer 4 · answered Jan 21 '20 at 18:31

0

<!-- Material input -->
<div class="md-form">
  <input value="John Doe" type="text" id="myid" class="form-control">
  <label for="myid">Example label</label>
</div>

Source: https://mdbootstrap.com/docs/jquery/forms/inputs/

answered Jan 21 '20 at 18:31

Hari

51
1
8

Bootstrap Material design floating labels overlap input text

4 Answers4