CODEWITHSUNDEEP
twitter-bootstrapmaterial-designmdbootstrap
Trung Tran
Trung Tran

Reputation: 13741

Bootstrap Material design floating labels overlap input text

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?

enter image description here

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!

Upvotes: 4

Views: 7931

Answers (4)

Hari
Hari

Reputation: 51

<!-- 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/

Upvotes: 0

Brane
Brane

Reputation: 3339

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.

Upvotes: 1

KevinM
KevinM

Reputation: 1807

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>

Upvotes: 0

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

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

Upvotes: 3

Related Questions