Allineare esattamente 'lista scelta' alla larghezza del campo input

[robynosse]

Ciao a tutti,

vorrei allineare esattamente la lista scelta <ul> alla larghezza del campo input:

                <input type="text" class="form-control" placeholder="#CERCAPLACEHOLDER#" name="cerca" style="height: 46px;">
                <ul class="list-group fisso" style="margin-top:46px;">
                    
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>

Attualmente si vede così:
cerca.jpg

Adesso ho aggiunto delle regole style direttemente nel codice html, che poi sposterò nel css, potreste aiutarmi dicendomi cosa aggiungere direttamente nel codice html?
Il codice html di quello che si vede è il seguente:

<div class="row margin-15">
    <form action="#FORMLINK#" method="POST" name="formCerca">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="input-group input-group-lg">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-verde dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        #ORDINE#
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu elementi-menu">

                        #TIPOLOGIEORDINE#                               

                    </ul>
                    <a href="#ORDINELINK#" class="btn btn-morado" aria-hidden="true" title="#ORDINELINKTITOLO##CLICCAPERINVERTIRE#"><span class="glyphicon glyphicon-sort-by-alphabet#ORDINECLASSE#"></span></a>

                </span>
                
                <input type="text" class="form-control" placeholder="#CERCAPLACEHOLDER#" name="cerca" style="height: 46px;">
                <ul class="list-group fisso" style="margin-top:46px;">
                    
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
                
                <span class="input-group-btn">
                    <button class="btn btn-azuloscuro" type="button">#CERCA#</button>
                </span>

            </div>
        </div>
    </form>          
</div>

la classe fisso è questa:

.fisso{
    z-index: 101 !important;
    position: absolute !important;
}

Grazie,
Roberto

[m4rko80]

Ciao, potresti mettere un DIV intorno al tutto e dare una width 100% all'input e all'UL.
PS
non ho fatto test perche' manca la parte css

[robynosse]

Ciao, potresti mettere un DIV intorno al tutto e dare una width 100% all'input e all'UL.
PS
non ho fatto test perche' manca la parte css

Ciao ho provato così:

                <div>
                    <input  style="height: 46px;  width:100%;"  id="cercaInput" type="text" class="form-control" placeholder="#CERCAPLACEHOLDER#" name="cerca" >
                    <ul style="margin-top:46px; width:100%; " id="cercaLista" class="list-group fisso">

                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>

e anche così:

                <div style="width:100%;">
                    <input  style="height: 46px;  width:100%;" id="cercaInput" type="text" class="form-control" placeholder="#CERCAPLACEHOLDER#" name="cerca" >
                    <ul style="margin-top:46px; width:100%; " id="cercaLista" class="list-group fisso">

                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>

Ma in in entrambi i casi la lista (sotto il cerca) arriva oltre il bottone cerca, arriva fino al margine destro dello schermo!

In che cosa sbaglio?

[m4rko80]

Ciao, ho fatto caso ora che stai usando bootstrap
Questa prova che ho fatto come vedi (se la provi in un file a parte) vedrai che incolonna correttamente. Basta usare le classi col-* corrette per il risultato che si vuole.
[code]
<div class="col-lg-12">
<div class="col-lg-2">
<button class="btn btn-success">Ordine</button>
</div>
<div class="col-lg-8">
<input type="text" class="form-control">
</div>
<div class="col-lg-2">
<button class="btn btn-primary">Cerca</button>
</div>


<div class="col-lg-8 col-lg-offset-2">
<ul style="margin-top:46px;" id="cercaLista" class="list-group fisso">


<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>


</div>
[code]
Non avendo il tuo css e non sapendo come popoli l'UL e come agganci i bottoni laterali(presumo con input-grp ) il ho messo dei button e col- per spezzare