ustawić szerokość wejścia select2 (poprzez dyrektywę Angular-ui)

151

Mam problem z uruchomieniem tego plunkr (select2 + angulat-ui).

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

W konfiguracji lokalnej otrzymuję pracę select2, ale nie mogę ustawić szerokości zgodnie z opisem w dokumentacji . Jest zbyt wąski, aby go używać.

wprowadź opis obrazu tutaj

Dziękuję Ci.

EDYCJA: Nieważne, że plnkr, znalazłem tutaj działające skrzypce http://jsfiddle.net/pEFy6/

Wygląda na to, że zwinięcie do szerokości pierwszego elementu jest zachowaniem select2. Mogłem ustawić szerokość przez bootstrap. class="input-medium"Nadal nie jestem pewien, dlaczego angular-ui nie przyjmuje parametrów konfiguracyjnych.

bsr
źródło
Czy możesz być bardziej szczegółowy, jeśli chodzi o to, czego już próbowałeś? Wybrana biblioteka (na której bazuje select2) wygeneruje szerokość na podstawie szerokości podanej w HTML / CSS.
Adam Grant

Odpowiedzi:

216

Musisz określić szerokość atrybutu do rozwiązania, aby zachować szerokość elementu

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});
Diego Alvarez
źródło
7
$ ("# myselect"). select2 ({symbol zastępczy: 'Wybierz kraj', szerokość: '192px'}); rozwiązałem mój problem z IE i nie mam wpływu na FF i Chrome! Dzięki!
Adrian P.
tak. Zapytałem również autora github.com/godbasin/vue-select2/issues/11
shinriyo
232

W moim przypadku select2 otworzyłoby się poprawnie, gdyby było zero lub więcej tabletek.

Ale jeśli byłaby jedna lub więcej pigułek i usunąłem je wszystkie, skurczyłyby się do najmniejszej szerokości. Moje rozwiązanie było proste:

$("#myselect").select2({ width: '100%' });      
portforwardpodcast
źródło
7
najlepsza odpowiedź, jeśli używasz select2 w wersji 4.0.0
Steve
1
dlaczego to jest lepsze niż $ ("# myselect"). select2 ({szerokość: 'rozwiąż'}); ? (wydaje się być tym samym)
Ricardo Vigatti
1
@RicardoVigatti: szerokość: „rozwiązanie” działa tylko raz przy załadowaniu strony, ale nie przy zmianie rozmiaru. Jeśli korzystasz z responsywnych projektów, to nie działa
Fabian Schöner
1
resolvenie działało dla mnie - 100%. to pół godziny beznadziejnie szukając odpowiedzi „rozwiązanej”. dzięki :)
Darragh Enright
1
Jak dotąd to najlepsza odpowiedź. Ale teraz dla mnie pole wyszukiwania nie wypełnia całej szerokości. Czy jest jakiś łatwy sposób, aby to naprawić?
TNT
48

To jest stare pytanie, ale nadal warto opublikować nowe informacje ...

Począwszy od wersji Select2 3.4.0 istnieje atrybut, dropdownAutoWidthktóry rozwiązuje problem i obsługuje wszystkie nieparzyste przypadki. Zauważ, że nie jest on domyślnie włączony. Zmienia rozmiar dynamicznie, gdy użytkownik dokonuje selekcji, dodaje szerokość, allowClearjeśli ten atrybut jest używany, a także poprawnie obsługuje tekst zastępczy.

$("#some_select_id").select2({
    dropdownAutoWidth : true
});
Shep
źródło
Działa całkiem nieźle ... z wyjątkiem sytuacji, gdy używasz symboli zastępczych, jeśli tak, jeśli opcje są mniejsze niż symbol zastępczy, tekst zastępczy zostanie obcięty :(
MrPowerGamerBR
24

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
Sadee
źródło
11

Używam> 4.0 z select2

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

Te inne nie działały:

  • dropdownCssClass: 'bigdrop'
  • szerokość: „100%”
  • szerokość: 'rozwiąż'
sobelito
źródło
9

dodaj css kontenera metody do swojego skryptu w następujący sposób:

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

ustawia szerokość zaznaczenia taką samą, jak szerokość elementu div.

atuk
źródło
1
To załatwiło sprawę (nie mogłem zmusić select2 do automatycznej zmiany rozmiaru za pomocą Bootstrap 3). Chociaż muszę powiedzieć, że jest trochę hacky.
mkataja
To ustawiło mnie na dobrej drodze, zamieniłem wyświetlacz na minWidth:$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
Nabil Kadimi
2

Ustawienie szerokości na „rozwiązanie” nie działa dla mnie. Zamiast tego dodałem „width: 100%” do mojego wyboru i zmodyfikowałem css w ten sposób:

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

To było jedyne rozwiązanie, które działało dla mnie (moja wersja to 2.2.1) Twój wybór zajmie całe dostępne miejsce, jest lepsze niż użycie

class="input-medium"

z bootstrapa, ponieważ select zawsze pozostaje w kontenerze, nawet po zmianie rozmiaru okna (responsywny)

Helene
źródło
Dzięki za rozwiązanie, ale zadziałało tylko przy pierwszym załadowaniu. Gdy wybrałem tag, a następnie kliknąłem inny element strony, wejście select2 wróciło do nieprawidłowego rozmiaru
Marklar
1

Dodaj opcję rozpoznawania szerokości do funkcji select2

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

Po dodaniu poniższego CSS do swojego arkusza stylów

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

To rozwiąże problem

Ravindu Lokumanna
źródło
0

Możesz spróbować w ten sposób. Mi to pasuje

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

Na żądanie hide / show lub ajax musimy ponownie zainicjować wtyczkę select2

Na przykład:

$("#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();
    }
});
Bablu Ahmed
źródło
0

Łatwiejsze rozwiązanie CSS niezależne od 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   
}
Adrian P.
źródło
0

W ostatnim projekcie zbudowanym przy użyciu Bootstrap 4 wypróbowałem wszystkie powyższe metody, ale nic nie działało. Moje podejście polegało na edycji biblioteki CSS przy użyciu jQuery, aby uzyskać 100% na stole.

 // * 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")

Działające 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>

Abdelsalam Shahlol
źródło