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!

Answer 1

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

Answer 2

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.