Quiero usar los componentes "Etiqueta flotante" y "Grupo de entrada" de Bootstrap juntos. El problema que tengo es que la etiqueta está oculta cuando la entrada está enfocada. En mi ejemplo de código a continuación, tengo estos escenarios:
¿Alguien sabe de una manera de hacer que estos componentes funcionen juntos?
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-floating input-group mb-3"> <input type="text" class="form-control" name="code1" placeholder="Code 1"> <label for="code1">Code 1</label> <span class="input-group-text"><i class="fas fa-times"></i></span> </div> <div class="form-floating mb-3"> <input type="text" class="form-control" name="code4" placeholder="Code 4"> <label for="code4">Code 4</label> </div>Coloque la etiqueta flotante dentro de otro div input-group .
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group mb-3"> <div class="form-floating flex-grow-1"> <input type="text" class="form-control" name="code1" placeholder="Code 1"> <label for="code1">Code 1</label> </div> <span class="input-group-text"><i class="fas fa-times"></i></span> </div>Para mejorar la respuesta de @Unmitigated, terminé eliminando el radio de ambas esquinas derechas de la entrada.
.form-floating-group input { border-bottom-right-radius: 0; border-top-right-radius: 0; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group mb-3"> <div class="form-floating form-floating-group flex-grow-1"> <input type="text" class="form-control" name="code1" placeholder="Code 1"> <label for="code1">Code 1</label> </div> <span class="input-group-text"><i class="fas fa-times"></i></span> </div>.input-group .form-floating input { border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; }gracias por el anidamiento adecuado, ¿por qué usar un nuevo espacio de nombres de clase?
Encontré las mismas necesidades.
Aquí está mi solución:
La forma :
<div class="col-12"> <div class="input-group mb-3"> <span class="input-group-text">Label :</span> <div class="form-floating"> @Html.EditorFor(model => model.FieldA, new { htmlAttributes = new { @class = "form-control", placeholder = "Field A" } }) @Html.LabelFor(model => model.FieldA) </div> <div class="form-floating"> @Html.EditorFor(model => model.FieldB, new { htmlAttributes = new { @class = "form-control", placeholder = "Field B" } }) @Html.LabelFor(model => model.FieldB) </div> </div> </div>Nota: estoy usando ASP.NET, reemplace Editor y Label -Para llamadas con su código correspondiente:
<input type="text" class="form-control" name="code1" placeholder="Code 1"> <label for="code1">Code 1</label> <span class="input-group-text"><i class="fas fa-times"></i></span>Encuentre la forma original de Bootstrap (V5.1) de manejar el borde redondeado. Aquí están las líneas de código originales:
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu), .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-control, .input-group > .form-select { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }Y aquí está mi css personalizado basado en lo que sé de los selectores de css (en realidad soy un desarrollador de back-end):
.input-group:not(.has-validation) .form-floating:not(:last-child) > :not(.dropdown-toggle):not(.dropdown-menu), .input-group:not(.has-validation) .form-floating > .dropdown-toggle:nth-last-child(n+3) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group.has-validation .form-floating:nth-last-child(n+3) > :not(.dropdown-toggle):not(.dropdown-menu), .input-group.has-validation .form-floating > .dropdown-toggle:nth-last-child(n+4) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group .form-floating:not(:first-child) > :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { /*margin-left: -1px;*/ border-top-left-radius: 0; border-bottom-left-radius: 0; } /* for form to be responsive */ .input-group > .form-floating { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }Supongo que los selectores podrían mejorarse mucho, ya que algunos casos ya no podrían ocurrir, ¡siéntase libre de enviar mejoras!
Clases rounded-0 rounded-start necesario para evitar border-radius a la derecha del texto de entrada
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="container mt-5"> <div class="input-group"> <div class="flex-grow-1 form-floating"> <input placeholder="Search address" aria-label="Search address" aria-describedby="basic-wallet" type="text" class="rounded-0 rounded-start form-control" value="New York"> <label>Your wallet address</label> </div> <span class="input-group-text"><i class="fas fa-times"></i></span> </div> </div>