如何解决文本区域的 Bootstrap 5 浮动标签与滚动输入重叠
查看 textarea 的浮动标签 https://getbootstrap.com/docs/5.0/forms/floating-labels/ 的文档,如果内容可滚动,则标签似乎与输入重叠:
有没有办法防止这种情况发生并使标签下方的可滚动区域?
解决方法
这是 Bootstrap 5 #32800 的一个已知问题。
我所做的是一个小黑客,同时他们已经修复了这个错误。
基本上我在 textarea 之间创建了一个伪元素,并用白色背景色标记了一个图层。
.form-floating {
position: relative;
max-width: 300px; /* not relevant */
margin: 40px 20px; /* not relevant */
}
.form-floating:before {
content: '';
position: absolute;
top: 1px; /* border-width (default by BS) */
left: 1px; /* border-width (default by BS) */
width: calc(100% - 14px); /* to show scrollbar */
height: 32px;
border-radius: 4px; /* (default by BS) */
background-color: #ffffff;
}
.form-floating textarea.form-control {
padding-top: 32px; /* height of pseudo element */
min-height: 80px; /* not relevant */
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="form-floating fix-floating-label">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。