Bootstrap预填充输入框显示异常 is-filled类不生效问题

问题根因 #

你添加is-filled类不生效的核心问题是类的挂载位置错误：
Material Dashboard的表单组件要求is-filled类必须添加在<input>外层的.input-group.input-group-outline容器上，而非输入框本身；同时组件自带的交互JS默认仅监听用户手动聚焦、输入、失焦事件来切换该类，页面初始加载时不会自动识别输入框已有的value值自动加类，就会出现label和输入内容重叠的异常。

异常展示效果：

修复步骤 #

• 调整模板中输入框外层容器的类逻辑，渲染页面时判断对应字段如果存在初始值，就给外层.input-group容器追加is-filled类。以你现有代码为例，nombre字段的容器修改后代码如下：

<div class="card card-frame">
    <div class="card-body">
        <div class="container">
            <div class="row fieldcontain ${hasErrors(bean: materialInstance, field: 'nombre', 'error')} required">
                <div class="col">
                    <!-- 核心修改：给外层input-group加动态is-filled判断 -->
                    <div class="input-group input-group-outline my-1 ${materialInstance?.nombre ? 'is-filled' : ''}">
                        <label class="form-label"><g:message code="material.nombre.label" default="Nombre" /></label>
                        <input class="form-control" name="nombre" required="" value="${materialInstance?.nombre}">
                    </div>
                </div>
            </div>

            <hr>

            <div class="row fieldcontain ${hasErrors(bean: materialInstance, field: 'cantidadMinima1', 'error')} required">
                <div class="col">
                    <!-- 其他预填充字段做相同处理 -->
                    <div class="input-group input-group-outline my-1 ${materialInstance?.cantidadMinima1 ? 'is-filled' : ''}">
                        <label class="form-label"><g:message code="material.cantidadMinima1.label" default="Cantidad Mínima" /></label>
                        <input class="form-control" name="cantidadMinima1" required="" value="${materialInstance?.cantidadMinima1}">
                    </div>
                </div>
            </div>
            <!-- 其余字段按相同规则修改即可 -->
        </div>
    </div>
</div>

• 检查静态资源引入顺序：确保jQuery、Bootstrap JS引入完成后，再引入Material Dashboard的核心JS文件，否则表单的交互逻辑（聚焦上浮、失焦判断值保留样式）会失效。

预期效果 #

修复完成后，加载带初始值的编辑记录时，输入框label会自动上浮到边框位置，边框高亮，不会和输入内容重叠，效果如下：

内容的提问来源于stack exchange，提问作者Manuel Calles