imposta la larghezza dell'ingresso select2 (attraverso la direttiva Angular-ui)


151

Ho problemi a far funzionare questo plunkr (select2 + angulat-ui).

http://plnkr.co/edit/NkdWUO?p=preview

Nell'installazione locale, ottengo il lavoro select2, ma non riesco a impostare la larghezza come descritto nei documenti . È troppo stretto per essere utilizzato.

inserisci qui la descrizione dell'immagine

Grazie.

EDIT: Non importa che plnkr, ho trovato un violino funzionante qui http://jsfiddle.net/pEFy6/

Sembra che sia il comportamento di select2 a collassare alla larghezza del primo elemento. Potrei impostare la larghezza tramite bootstrap class="input-medium". Non so ancora perché Angular-ui non accetta i parametri di configurazione.


Puoi essere più specifico per quanto hai già provato? La libreria scelta (su cui si basa select2) genererà una larghezza basata sulla larghezza fornita in HTML / CSS.
Adam Grant,

Risposte:


216

È necessario specificare la larghezza dell'attributo da risolvere per preservare la larghezza dell'elemento

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

7
$ ("# myselect"). select2 ({segnaposto: 'Seleziona Paese', larghezza: '192px'}); risolto il mio problema con IE e non ho alcun effetto su FF e Chrome! Grazie!
Adrian P.

sì. Ho anche chiesto all'autore github.com/godbasin/vue-select2/issues/11
shinriyo il

232

Nel mio caso, select2 si aprirà correttamente se ci fossero zero o più pillole.

Ma se ci fossero una o più pillole e le cancellassi tutte, si ridurrebbe alla larghezza più piccola. La mia soluzione era semplicemente:

$("#myselect").select2({ width: '100%' });      

7
migliore risposta se si utilizza select2 versione 4.0.0
Steve

1
perché questo è meglio di $ ("# myselect"). select2 ({width: 'resolve}}); ? (sembra essere lo stesso)
Ricardo Vigatti,

1
@RicardoVigatti: width: 'resolve' funziona solo una volta al caricamento della pagina ma non al ridimensionamento. Se stai usando un design reattivo, non fa il trucco
Fabian Schöner

1
resolvenon ha funzionato per me - 100% `ha funzionato. è mezz'ora irrimediabilmente alla ricerca di una risposta "risolta". grazie :)
Darragh Enright,

1
Questa è la risposta migliore finora. Ma ora, per me, il campo di ricerca non riempie tutta la larghezza. Un modo semplice per correggere questo?
TNT,

48

Questa è una vecchia domanda ma vale la pena pubblicare nuove informazioni ...

A partire da Select2 versione 3.4.0 esiste un attributo dropdownAutoWidthche risolve il problema e gestisce tutti i casi dispari. Nota che non è attivo per impostazione predefinita. Si ridimensiona in modo dinamico mentre l'utente effettua le selezioni, aggiunge la larghezza allowClearse viene utilizzato quell'attributo e gestisce correttamente anche il testo segnaposto.

$("#some_select_id").select2({
    dropdownAutoWidth : true
});

Funziona abbastanza bene ... tranne se stai usando segnaposto, se lo sei, se le tue opzioni sono più piccole del segnaposto, il testo del segnaposto verrà troncato :(
MrPowerGamerBR

24

selezionare2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

11

Con> 4.0 di select2 che sto usando

$("select").select2({
  dropdownAutoWidth: true
});

Questi altri non hanno funzionato:

  • dropdownCssClass: 'bigdrop'
  • larghezza: '100%'
  • larghezza: 'risoluzione'

9

aggiungi il metodo css container nel tuo script in questo modo:

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

imposterà la larghezza della tua selezione uguale alla larghezza del tuo div.


1
Questo ha funzionato per me (non sono riuscito a selezionare2 per ridimensionare automaticamente con Bootstrap 3). Anche se devo dire che è un po 'confuso.
mkataja,

Questo mi ha messo sulla strada giusta, ho sostituito il display con minWidth:$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
Nabil Kadimi

2

L'impostazione della larghezza su "risoluzione" non ha funzionato per me. Invece, ho aggiunto "larghezza: 100%" alla mia selezione e modificato i CSS in questo modo:

.select2-offscreen {position: fixed !important;}

Questa è stata l'unica soluzione che ha funzionato per me (la mia versione è la 2.2.1) La tua selezione occuperà tutto il posto disponibile, è meglio che usare

class="input-medium"

dal bootstrap, perché la selezione rimane sempre nel contenitore, anche dopo il ridimensionamento della finestra (reattivo)


Grazie per la soluzione, ma ha funzionato solo per me al primo caricamento. Dopo aver selezionato un tag e fatto clic su un altro elemento della pagina, l'ingresso select2 è tornato alla dimensione errata
Marklar

1

Aggiungi l'opzione di risoluzione larghezza alla tua funzione select2

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

Dopo aggiungi CSS sotto al tuo foglio di stile

.select2-container {
width: 100% !important;
}

Ordinerà il problema


0

Puoi provare così. Per me funziona

$("#MISSION_ID").select2();

Su richiesta hide / show o ajax, dobbiamo reinizializzare il plugin select2

Per 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();
    }
});

0

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   
}

0

In un recente progetto realizzato utilizzando Bootstrap 4 , avevo provato tutti i metodi sopra indicati ma nulla ha funzionato. Il mio approccio è stato modificando la libreria CSS usando jQuery per ottenere il 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")

Demo di lavoro

$('.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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.