0

Mi @Html.TextBox esta adentro de un <div class="input-group"> pero me ocupa solo una parte en cuanto al ancho del <div>, y ademas el icono de la lupa para hacer la búsqueda esta muy separada, mi idea es que el ancho del @Html.TextBox llegue hasta el icono de la lupa, que queden pegados. Intente establecerle a mi @Html.TextBoxel ancho en porcentaje con CSS, pero no pasa nada, lo ignora. De que forma se puede solucionar?.

Aca en el .cshtml

@using (Html.BeginForm("Libros", "Home", FormMethod.Post))
{
        <div class="input-group">
            @Html.TextBox("searching", "", new { @class = "form-control", id = "txt_search", placeholder = "Ingrese nombre del libro" })
             <div class="input-group-btn">
                  <button class="btn btn-default" type="submit" value="search">
                  <i class="glyphicon glyphicon-search" id="iconLupa"></i></button>
             </div>
        </div>   
}

Aca mi CSS

#txt_search{
width: 100%;

}

Aca muestro la imagen de lo que sucede:

introducir la descripción de la imagen aquí

Intente agregando <div class="input-group-prepend"> pero tampoco, aca el codigo cuando inspecciono el elemento (Estoy usando la version Bootstrap v3.3.7):

<form action="/Home/Libros" method="post">    <div class="input-group">
        <input class="form-control" id="txt_search" name="searching" placeholder="Ingrese nombre del libro" type="text" value="">
        <div class="input-group-prepend">
            <button class="btn btn-default" type="submit" value="search">
                <i class="glyphicon glyphicon-search" aria-hidden="true" id="iconLupa"></i>
            </button>
        </div>
    </div>
</form>

4
  • Estas trabajando con un proyecto estándar creado con Visual Studio? el 17 ene. 2020 a las 19:07
  • si con visual studio 2017!
    – Claudio
    el 17 ene. 2020 a las 19:08
  • Todo este formulario esta adentro de <div class="container body-content"> por ahí existe alguna propiedad en ese div que no me este permitiendo el ancho del textBox?
    – Claudio
    el 17 ene. 2020 a las 19:09
  • 1
    En tu primera versión cambia el div por span en el input-group-btn el 17 ene. 2020 a las 19:52

4 respuestas 4

0

Esto es debido a que se generan dos contenedores para tus elementos <div class="form-control"> y el <div class="input-group-btn">, debes reemplezar input-group-btn por input-group-append.

Botstrap 4. input-group

Esta clase permite generar un grupo de elementos junto a un input, permitiendo agrupar otros elementos antes del input con input-group-prepend o después del elemento con input-group-append, asi los elementos que agregues dentro de estos contenedores quedaran a la derecha o izquierda del tu input.

Para que funciones correctamente el input-group-prepend se declara antes del form-control y el input-group-append despues del form-control

Botstrap 3. input-group

Esta clase permite generar un grupo de elementos junto a un input, permitiendo agrupar otros elementos al input con input-group-btn, si declara se antes del form-control quedaran agrupados a la izquierda y si declara después del form-control quedaran agrupados a la derecha.

<!-- cargar bootstrap y fas icons -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">


<body>
<!-- derecha -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Escribe aqui">
  <div class="input-group-btn">
        <button class="btn btn-outline-secondary" type="button">
        <i class="fas fa-search" aria-hidden="true"></i>Buscar</button>
  </div>
</div>
<!-- izquierda -->
<div class="input-group">
  <div class="input-group-btn">
          <button class="btn btn-outline-secondary" type="button">
          <i class="fas fa-search" aria-hidden="true">        </i>Buscar</button>
    </div>
  <input type="text" class="form-control" placeholder="Escribe aqui">
  
</div>

<!-- dentro de formulario -->
<form action="/Home/Libros" method="post">   
  <div class="input-group">
    <input class="form-control" id="txt_search" name="searching" placeholder="Ingrese nombre del libro" type="text" value="">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit" value="search"><i class="glyphicon glyphicon-search" aria-hidden="true" id="iconLupa"></i>
      </button>
     </div>
   </div>
</form>
</body>

6
  • Gracias @Diego Mesa por responder!, pero sigue sin funcionar, es mas poniendo lo que acabas de compartir el icono de la lupa se sitúa abajo del textbox, y el textbox sigue sin ocuparme el ancho
    – Claudio
    el 17 ene. 2020 a las 18:36
  • Puede actualizar la pregunta, agregando la salida del HTML que generar en el navegador ( si es chrome click derecho > inspeccionar elemento ) para conocer la estructura real del html generado por el helper.
    – Diego Mesa
    el 17 ene. 2020 a las 18:43
  • Ademas que versión de bootstrap estas usando ?
    – Diego Mesa
    el 17 ene. 2020 a las 18:44
  • Estoy usando la version Bootstrap v3.3.7
    – Claudio
    el 17 ene. 2020 a las 18:58
  • 1
    @Claudio he actualizado la respuesta usando Bootstrap v3.3.7 , si siguen sin funcionar probablemente es que tienes cambios en tu css que alteran el comportamiento de estas clases.
    – Diego Mesa
    el 17 ene. 2020 a las 20:00
0

La solución que encontré a este problema fue poner la propiedad display:block al <div class="input-group"> acá el código cshtml:

@using (Html.BeginForm("Libros", "Home", FormMethod.Post))
          {
              <div class="input-group" style="display:block">
                 
                      @Html.TextBox("searching", "", new { @class = "form-control", id = "txt_search", placeholder = "Ingrese nombre del libro" })
                  
                      <button class="btn btn-default" id="btn_search" type="submit" value="search">
                          <i class="glyphicon glyphicon-search" aria-hidden="true" id="iconLupa"></i>
                      </button>
                 
              </div>
          }

Y después cree un estilo CSS donde establecí el ancho del @Html.TextBox y un ancho para el botón de búsqueda.

Aca el CSS

#txt_search{ 
    max-width: 95% !important;
}

#btn_search{
    max-width: 5% !important;
}

El único problema o defecto que hay es que por ejemplo si achico la pantalla del navegador a una resolución de 375 x 667 (tamaño de iphone 6) el icono de la lupa se sitúa abajo del textBox en ves de quedarme al lado.

0

SOLUCIONADO! no se porque razón no se me actualizaban los cambios. La solución fue poner un id = "txtBuscar" al @Html.TextBox para después darle el ancho con una hoja de estilos CSS creada por mi. También se ajusta perfectamente a los diferentes tamaños de pantalla aca .cshtml:

@using (Html.BeginForm("Libros", "Home", FormMethod.Post))
{
   
      <div class="input-group">
          @Html.TextBox("searching", "", new { @class = "form-control", id = "txtBuscar", placeholder = "Ingrese nombre del libro", maxlength = "80" })
          <div class="input-group-btn">
              <button class="btn btn-default" type="submit">
                  <i class="glyphicon glyphicon-search"></i>
              </button>
          </div>
      </div>
}

y en el CSS escribir !important:

#txtBuscar {
max-width: 100% !important;

}

0

Vi que solucionaste tu problema pero podrías revisar esta opción: Dentro del archivo Site.css que viene por defecto en MVC, hay un estilo para los input, select y textarea que les formatea un width. Es exactamente esta parte del codigo de la hoja de estilos

input,
select,
textarea {
    max-width: 280px;
}

Fijate si le sacas eso, o si le pones

max-width: 100%

3
  • Gracias @iMSn20 por responder!. Si, ya me habían dicho que haga eso pero no me había funcionado tampoco, sin embargo ahora volví a hacerlo como vos dijiste ahí en Site.css puse max-width: 100% y borre los estilos que había puesto en mi .css y me funciona perfecto, lo cual me llama la atención por qué razón antes no me actualizaba los cambios cuando los editaba desde el Site.css.
    – Claudio
    el 24 ene. 2020 a las 0:58
  • @Claudio si ves que haces un cambio y no se te actualiza agrega !important luego de la propiedad. Ejemplo: max-width: 100% !important Y fijate si asi funciona. Aveces un estilo en otra hoja u otro lado sobreescribe al que estas queriendo agregar.
    – iMSn20
    el 27 ene. 2020 a las 13:17
  • Si eso había hecho! gracias por responder!
    – Claudio
    el 27 ene. 2020 a las 15:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.