Bootstrap Material 设计浮动标签与输入文本重叠

Question

我正在使用 bootstrap material 设计，当文本被预填充时，我的标签与我的输入文本重叠。（参考下面我的屏幕截图）。有什么办法可以防止标签重叠？

我的代码：

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

提前致谢！

Answer 1

已更新

translateY() 值将在输入处于活动状态或获得焦点时更改标签的位置。您可以操纵它的值来设置所需的标签位置，也可以更改字体大小值。

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%);
}

希望对您有所帮助

Answer 2

如果您使用的是 Angular2，则无需创建自定义指令即可执行此操作。在标签上做这样的事情。

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

Answer 3

我遇到了同样的问题，并通过在元素上使用焦点 class 解决了这个问题。如果您使用 vuejs，您可以使用内联语句检查值是否已填充，然后调用 focused class（使用 v-bind:class），这将为元素设置样式。

像这样：

<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。这也可以用于具有适当语法的其他框架。

Answer 4

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

来源：https://mdbootstrap.com/docs/jquery/forms/inputs/

Bootstrap Material 设计浮动标签与输入文本重叠

Bootstrap Material design floating labels overlap input text

twitter-bootstrap

material-design

mdbootstrap