it-swarm.com.de

Select2 berechnet die aufgelöste Breite nicht korrekt, wenn select ausgeblendet ist

Ich benutze Twitter Bootstrap und das fantastische Select2 Plugin .

Diese funktionieren großartig. Ich habe festgestellt, dass Sie {width: 'resolve'} beim Initiieren von Select2 einstellen müssen, sonst sieht es durcheinander!.

Ich habe jedoch ein Problem mit einem meiner Selects. Wie Sie in der Abbildung unten sehen können, hat der Referee Type select eine falsche Breite.

Dies liegt daran, dass dieses Feld anfänglich ausgeblendet ist und nur sichtbar wird, wenn Schiedsrichter im Feld Group ausgewählt ist.

Wie kann ich das beheben?

Inputs

32
Hailwood

Sie können die Breite im <select>-Element folgendermaßen festlegen:

<select style="width:260px">

Bis Sie die gewünschte Breite finden, nach der Sie suchen. Tatsächlich werden die Beispiele auf der offiziellen select2-Plugin-Site auf diese Weise erstellt.

Wenn Sie sich jedoch von Inline-Styles fernhalten möchten, können Sie einfach das CSS von select2 überschreiben und den resultierenden Container als Ziel festlegen.

.select2-container {
  width: 260px;
}
17
brianrhea

Select 2 ist intelligent genug, um seine Größe neu zu berechnen, wenn Sie es nur im select-Tag festlegen. wie so

<select style="width: 100%"></select> 

CSS-Formatierungen für Klassen würden nicht funktionieren!

Lesen Sie mehr in " Responsive Design - Prozent Breite "

15

Anstatt select2() beim Referee Type beim Laden der Seite aufzurufen, rufen Sie select2 auf, nachdem Sie Referee Type zum ersten Mal angezeigt haben. Auf diese Weise wird die Auswahl sichtbar (mit der richtigen Breite) und die Option 'width': 'resolve' sollte funktionieren. Wenn Sie ein kleines jsfiddle-Beispiel angeben, ist es einfacher, darauf hinzuweisen.

8
dyve

Ich habe mein ähnliches Problem mit einfachem CSS gelöst:

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

Legen Sie die Stileigenschaft des Elements select mit der Breite 100% fest.

<select class="js-example-responsive" style="width: 100%"></select>

Siehe Responsive Design - Prozent Breite

5
JwJosefy

Führen Sie dies aus, wenn Sie Steuerelemente mit angehängtem Select2 anzeigen:

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();
3
BertrandJ

Meine bevorzugte Lösung ist, select2 die Zuweisung dieser width zu stoppen und sie automatisch zu lassen. Kommentiere folgendes in select2.full.js:

Für Container:

  Select2.prototype._placeContainer = function ($container) {
    $container.insertAfter(this.$element);

      //##!!
      /*
    var width = this._resolveWidth(this.$element, this.options.get('width'));

    if (width != null) {
      $container.css('width', width);
    }*/
  };

Für die Suche im Container:

  Search.prototype.resizeSearch = function () {

    //##!!
    /*
    this.$search.css('width', '25px');

    var width = '';

    if (this.$search.attr('placeholder') !== '') {
      width = this.$selection.find('.select2-selection__rendered').innerWidth();
    } else {
      var minimumWidth = this.$search.val().length + 1;

      width = (minimumWidth * 0.75) + 'em';
    }

    this.$search.css('width', width);
    */
  };

  return Search;
});
1
tika

Sie können ein Klickereignis an das Element binden, das Ihr verborgenes Element öffnet, und die select2-Breite dort festlegen. Für mich gearbeitet und es ist ziemlich einfach. Ich habe das Klickereignis verwendet, weil es nur mit "document ready" funktioniert hat.

$('#click-me').on('click', function(event) { 
   $('.select2').select2({width: '100%'});
 }
0
Vitor Paz

Select2 hat einen seltsamen Fehler, der versteckte Select2-Elemente nicht richtig "auflöst". Es ist kein Arbeitsplatz width: "resolve", da dies bereits der Standardwert ist. Die Problemumgehung besteht darin, select2 anzuzeigen und eine Sekunde später die Deklaration plötzlich auszublenden.

$("#div_container_of_select2").show(); //make it visible for a millisecond
$("select[name=referee_type]").select2(); //declare Select2
$("#div_container_of_select2").hide(); //back to darkness

Dadurch wird das select2 korrekt gerendert.

0
Max Cuttins
    .select2-container{
        width: 100% !important;
    }
0
Omid Ahmadyani

Das hat bei mir funktioniert 

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

auch eine feste Breite

.select2-container { width: 300px !important; }

0
Jam