Fluid input-append in Bootstrap Responsive

Question

Non riesco a ottenere un input con un elemento input-append per avere la larghezza corretta in un layout fluido. Sto usando v2.0.4 di Bootstrap. Mentre ridimensiono per rendere la pagina più piccola, si rompe su una nuova riga. Idealmente avrei l'input per tutta la larghezza del pozzo (come gli avvisi). Ho incluso il markup e alcuni screenshot qui sotto. Qualsiasi aiuto molto apprezzato!

<div class="row-fluid"> 
    <div class="span3 well"> 
     <form class="form-horiztonal"> 
      <h2>Filters</h2> 
      <fieldset> 
       <div class="control-group"> 
        <label class="control-label" for="msisdn">MSISDNs</label> 
        <div class="controls"> 
         <div class="input-append"> 
          <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button 
          class="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i></button> 
         </div> 
        </div> 
       </div> 
      </fieldset> 
     </form> 
    </div> 

    <div class="span9"></div> 
</div> 

Answer 1

il CSS reattivo è quello che sta inciampare questo.

Con l'override alcuni dei css reattivo utilizzando

#msisdn { 
    width: 75%; 
    display: inline-block; 
    } 

si spera si può vedere cosa sta succedendo. Questo ti porterà abbastanza vicino speranzoso.

Answer 2

Poiché il input è un .span10, il pulsante deve essere un .span2.

<div class="input-append"> 
    <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button class="btn btn-primary span2" type="submit"><i class="icon-plus icon-white"></i></button> 
</div> 

Ma il comportamento del pulsante cambia radicalmente. È possibile risolvere il problema con questo css:

.input-append .btn { 
    float: none!important; 
    margin-left: 0!important; 
} 

E per essere ancora più precisi, il pulsante dovrebbe essere grande come un .span2 più il fluidGridGutterWidth. Che è width: 17.02127659% in base ai valori predefiniti.

Answer 3

sostituire <form class="form-horiztonal"> con <form id="formfilters" class="form-horiztonal">

Aggiungere il seguente codice jQuery.

function sizing() { 
    var formfilterswidth=$("#formfilters").width(); 
    $("#msisdn").width((formfilterswidth-46)+"px"); 
} 
$(document).ready(sizing); 
$(window).resize(sizing);​ 

E sembra allways buona

Piccolo:

Grande:

Answer 4

Ho una risposta e un nuovo problema da risolvere.

Ho creato una funzione che cercherà tutti gli input-append e li ridimensionerà in base al loro parent(). Width().

Qui:

function sizeInputs() { 
    $(document).find(".input_app").each(function(){ 
    var container_width = $(this).parent().innerWidth(); 
    var btn_width = $(this).parent().find(".btn_app").width(); 
    // I don't know why but I need to add 25 here...??? 
    $(this).css('width', container_width-(btn_width + 25)); 
    }); 

Hai solo bisogno di classe il vostro input è come ".input_app" e correlate di pulsanti come ".btn_app" e mettendoli in un div.

Questo funziona ovunque tranne che nei tavoli. Poiché la larghezza della tabella è dettata dalla larghezza dell'elemento, è l'uovo e il dilemma del pollo. Se ingrandisci la tabella, funziona, ma se riduci la sua larghezza, non lo fa.

Tutto questo può essere visualizzato in Fiddle input-append

Se qualcuno ha un'idea su come risolvere il tavolo ridimensionare problema sarà molto apprezzato.

Answer 5

Questa è una soluzione CSS pura che funziona jQuery/JavaScript impressionante e non dannoso per il layout.

http://jsfiddle.net/9Ma8V/

Il codice HTML

<div class="inline-button-input"> 
    <input type="submit" value="Submit"/> 
    <div> 
     <input type="text"/> 
    </div> 
</div> 

Il CSS

input[type=text] { 
    width: 100%; 
} 
.inline-button-input { 
    width: 100%; 
    float: right; 
} 
.inline-button-input div { 
    overflow: hidden; 
    padding-right: .5em; 
} 
.inline-button-input input[type=submit] { 
    float: right; 
}