Bootstrap input group sizes

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>&nbsp;</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>&nbsp;</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>&nbsp;</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