Bootstrap input group sizes - css

Question

I'm working on a web page and have some problems with the design, this is the piece of code where I need some help:
<form id="form_articulo_ver" method="post" action="./articulo/articulo_ver.php" role="form" target="frame_articulo_ver">
<div class="input-group col-md-3">
<div class="input-group-btn">
<button class="btn btn-primary" type="button" onClick="busca_referencia()" data-toggle="tooltip" data-placement="top" title="Buscar Referencia"><span class="glyphicon glyphicon-search"></span> </button>
</div>
<input type="text" class="form-control" placeholder="Referencia"/>
<span class="input-group-btn">
<button class="btn btn-success" type="button" onClick="aceptar_referencia()" data-toggle="tooltip" data-placement="top" title="Confirmar Referencia"><span class="glyphicon glyphicon-ok"></span> </button>
</span>
</div>
</form>
<br>
<form id="form_lineas_ref" method="post" action="./articulo/frame_lineas.php" role="form" target="frame_lineas">
<div class="input-group custom-input-group">
<input type="hidden" class="form-control"/>
<span class="input-group-addon">Desc.</span>
<input type="text" class="form-control" placeholder="Descripción"/>
<span class="input-group-addon">Precio</span>
<input type="text" class="form-control" placeholder="Precio"/>
<span class="input-group-addon">Uds.</span>
<input type="text" class="form-control" placeholder="Unidades"/>
<span class="input-group-addon">Dcto. %</span>
<input type="text" class="form-control" placeholder="Descuento"/>
<span class="input-group-addon">Importe</span>
<input type="text" class="form-control" placeholder="Importe"/>
<span class="input-group-addon">€</span>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onClick="aceptar_linea()" data-toggle="tooltip" data-placement="top" title="Añadir linea"><span class="glyphicon glyphicon-ok"></span> </button>
</div>
</div>
</form>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" id="frame_lineas" name="frame_lineas" frameborder="0"></iframe>
</div>
This code looks like this:
But I need "Descripción" input to be larger than the others. I found a css that breaks the input when the screen is smaller, works fine... I don't care if "Descripción" input is same size in lite screen but in large ones need to have more witdh.
Here is the css of the "custom-input-group":
#media (max-width:500px) {
.custom-input-group.input-group .input-group-btn {
width:99%;
display:block;
margin-bottom:5px;
}
.custom-input-group.input-group .input-group-btn .btn {
width: 34%;
}
.custom-input-group.input-group .input-group-btn .btn:last-child {
border-radius:0 4px 4px 0
}
.custom-input-group {
display: block
}
.custom-input-group.input-group .input-group-addon {
clear: both;
display: block;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
}
.custom-input-group.input-group .input-group-addon + .form-control {
border-radius: 4px;
margin-bottom: 5px;
}
}
Thank you very much. Sorry for my English.

Answer 1

Hello Just use Size=50 in your input tag .Hope it will help you
<span class="input-group-addon ">Desc.</span>
<input type="text" class="form-control " size="50"
placeholder="Descripción"/>

Answer 2

I suggest you use expanding on click input box for the description.
<div class="container-fluid">
<!--expanding input field -->
<h2 class="timeline-title">Expanding Input (CSS only)</h2>
<p><small class="text-muted">Grows wider when clicked...</small></p>
<input class="form-control input-lg" id="myInput" placeholder="Click here" type="text">
</div>
CSS here.
body {
background-color:#e9e9f4;}
/* expanding input CSS only */ #myInput{ width:130px; -webkit-transition:width 0.3s ease-in-out; } #myInput:focus { width:100%; -webkit-transition:width 0.5s ease-in-out;}
hope this helps