Imposta la larghezza dell'ingresso Select2 (tramite Direttiva Angular-UI)
-
12-12-2019 - |
Domanda
Ho problemi a fare questo lavoro di Plunkr (Select2 + Angulat-UI).
http://plnkr.co/edit/nkdwuo?p=preview .
In Setup locale, ottengo il lavoro selezionato2, ma non riesco a impostare la larghezza come descritto in Documenti .È troppo stretto da usare.
Grazie.
Modifica: Non importa che Plnkr, ho trovato un violino funzionante qui http://jsfiddle.net/pefy6/
Sembra che sia il comportamento di Select2 per collassare alla larghezza del primo elemento.Potrei impostare la larghezza tramite bootstrap class="input-medium"
. Non so sicuro del perché Angular-UI non prende i parametri di configurazione.
Soluzione
È necessario specificare la larghezza dell'attributo da risolvere per preservare la larghezza dell'elemento
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
. Altri suggerimenti
Nel mio caso il selezionato2 si aprirebbe correttamente se c'era zero o più pillole.
Ma se c'era una o più pillole, e li ho cancellati tutti, si restringeva alla larghezza più piccola.La mia soluzione era semplicemente:
$("#myselect").select2({ width: '100%' });
. Questa è una vecchia domanda ma le nuove informazioni valgono ancora la pena di postare ...
A partire da Select2 Versione 3.4.0 C'è un attributo dropdownAutoWidth
che risolve il problema e gestisce tutti i casi dispari.Nota Non è acceso per impostazione predefinita.Ridimensiona dinamicamente in quanto l'utente effettua selezioni, aggiunge la larghezza per allowClear
se viene utilizzato tale attributo e gestisce anche il testo del segnaposto.
$("#some_select_id").select2({
dropdownAutoWidth : true
});
. Seleziona2 v4.0.3
<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
. Con> 4.0 di Select2 Sto usando
$("select").select2({
dropdownAutoWidth: true
});
.
Questi altri non hanno funzionato:
- .
- DropdownCSSClass: 'BIGDROP'
- larghezza: '100%'
- larghezza: 'risoluzione'
Aggiungi metodo container css nel tuo script come questo:
$("#your_select_id").select2({
containerCss : {"display":"block"}
});
.
Imposterà la larghezza della tua selezione come la larghezza del tuo div.
L'impostazione della larghezza per "risolvere" non ha funzionato per me. Invece, ho aggiunto "Larghezza: 100%" al mio Seleziona, e modificato il CSS come questo:
.select2-offscreen {position: fixed !important;}
Questa è stata l'unica soluzione che ha funzionato per me (la mia versione è 2.2.1) La tua selezione prenderà tutto il posto disponibile, è meglio che usare
class="input-medium"
Dal bootstrap, perché la selezione è sempre nel contenitore, anche dopo il ridimensionamento della finestra (reattivo)
Puoi provare così.Funziona per me
$("#MISSION_ID").select2();
Su richiesta di nascondi / spettacolo o Ajax, dobbiamo reinizializzare il plugin select2
Ad esempio:
$("#offialNumberArea").show();
$("#eventNameArea").hide();
$('.selectCriteria').change(function(){
var thisVal = $(this).val();
if(thisVal == 'sailor'){
$("#offialNumberArea").show();
$("#eventNameArea").hide();
}
else
{
$("#offialNumberArea").hide();
$("#eventNameArea").show();
$("#MISSION_ID").select2();
}
});
. Soluzione CSS più semplice indipendente da Select2
//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />
//CSS
.input-xxsm {
width: 40px!important; //for 2 digits
}
.input-xsm {
width: 60px!important; //for 4 digits
}
.input-sm {
width: 100px!important; //for short options
}
.input-md {
width: 160px!important; //for medium long options
}
.input-lg {
width: 220px!important; //for long options
}
.input-xlg {
width: 300px!important; //for very long options
}
.input-xxlg {
width: 100%!important; //100% of parent
}
. Aggiungi la larghezza di risoluzione dell'opzione sulla funzione Select2
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
.
Dopo aggiungere sotto CSS al foglio di stile
.select2-container {
width: 100% !important;
}
.
ordinerà il problema
In un recente progetto costruito utilizzando Bootstrap 4 , avevo provato tutti i metodi di cui sopra, ma niente ha funzionato.Il mio approccio è stato modificando la libreria Biblioteca CSS utilizzando JQuery per ottenere 100% sul tavolo.
.
// * Select2 4.0.7
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%', //Doesn't work
width: 'resolve'
});
//The Fix
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")
Lavorare Demo
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%',//Doens't work
width: 'resolve'
});
//Fix the above style width:100%
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")
.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col" class="w-50">#</th>
<th scope="col" class="w-50">Trade Zones</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
multiple="multiple">
<option value="1">One</option>
<option value="1">Two</option>
<option value="1">Three</option>
<option value="1">Okay</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
.