0

Supongamos que tengo lo siguiente:

<div class="modal-body" style="">
  <div class="row">
    <div class="col-4" style="display: flex;justify-content: between">
        <input style="display: inline" type="number" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty">
        <input style="display: inline" type="number" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty">
        <input style="display: inline" type="number" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty">
        <input style="display: inline" type="number" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty">
        <input style="display: inline" type="number" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty">
    </div>
  </div>
</div>

Me gustaría que el ancho de cada input sea automático, ya que los years peudes ser un array de N elementos

NOTA: - uso Bootstrap v4.0.0-alpha.6 - los inputs se tienes que ajustar al col-4 en una sola fila

7
  • Creo que tienes que añadir la clase form-control a tu input. Así tendría el 100% siempre. el 9 mar. 2018 a las 8:42
  • poniendo lo que me comentas se divide en 5 filas, es decir, mete un salto de linea
    – sirdaiz
    el 9 mar. 2018 a las 8:45
  • prueba al div padre ponerle display: flex y que los input hijos tengan display: inline. También en el padre justify-content: between
    – David
    el 9 mar. 2018 a las 8:46
  • @David actualizo mi post como me comentas, ahora me salen dos inputs en cada fila
    – sirdaiz
    el 9 mar. 2018 a las 8:56
  • tiene que ser el padre inmediato, no el padre del padre
    – David
    el 9 mar. 2018 a las 8:58

2 respuestas 2

0

Prueba con display flex

<div class="row">
    <div class="col-4" style="display: flex;justify-content: between">
        <input style="display: inline" type="number" ng-repeat="year in years track by $index" />
    </div>
</div>

También usando bootstrap puedes reemplazar los styles por clases predefinidas que hacen lo mismo que el código anterior. Sería de la siguiente manera:

<div class="row">
    <div class="col-4 d-flex justify-content-between">
        <input class="d-inline" type="number" ng-repeat="year in years track by $index" />
    </div>
</div>
6
  • lo he probado asi, pero se me descuadra todo
    – sirdaiz
    el 9 mar. 2018 a las 9:02
  • puedes poner el codigo html que se genera despues del ng-repeat? el código final?
    – David
    el 9 mar. 2018 a las 9:17
  • he modificado mi comentario con lo que me pides
    – sirdaiz
    el 9 mar. 2018 a las 9:34
  • he probado el html que has puesto y se me ve bien, todos los input en fila (pegados uno al otro) si quisieras separarlos simplemente tendrias que jugar con los margenes y padding. Puedes añadir tambien un pantallazo de como te queda el resultado en la web?
    – David
    el 9 mar. 2018 a las 9:41
  • me salen todo ahora en una misma fila pero el ancho de los inputs no se ajustan
    – sirdaiz
    el 9 mar. 2018 a las 9:45
0

usando JQuery puedes ajustar el input al tamaño del texto que tienen en su interior de la siguiente manera:

$('input').each(function() {
  $(this).attr('size', $(this).val().length);
});

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]').keyup(resizeInput).each(resizeInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body" style="">
  <div class="row">
    <div class="col-4">
        <input type="text" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty" value="10">
        <input type="text" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty" value="555">
        <input type="text" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty" value="8888888">
        <input type="text" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty" value="1">
        <input type="text" ng-model="slider" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty" value="999999999999">
    </div>
  </div>
</div>

Para que puedas cambiar el size del input, este no puede ser type number, puedes utilizar un type text y hacerlo readonly por ejemplo para que no lo puedan editar, o solo permitir que el usuario introduzca números tambien por javascript. los values son simbólicos para que se vea en el ejemplo.

1
  • gracias por tu respuesta @David, el problema es que el cliente necesita que sea number no tipo text, no importa si escribe muchos numero y solo se vea los 3 primeros, mientras los inputs aparezcan del mismo tamaño en el div col-4
    – sirdaiz
    el 9 mar. 2018 a las 10:35

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.