it-swarm.com.de

Gewählte erntehq die Größe dynamisch ändern

Wie können Sie eine Dropdown-Auswahl mit einem dynamischen Breitenstil erhalten?

Standardmäßig hat es eine feste Breite. Wenn Sie versuchen, es mit CSS zu ändern, haben Sie mehrere Probleme, um ein gutes Ergebnis zu erzielen.

15
MSánchez

Ich möchte nur meine Lösung darüber teilen, wie die gewählte Dropdown-Breite auf dem Bildschirm geändert wird:

Zuerst müssen Sie diesen Stil auf Ihrer CSS hinzufügen:

#form_paciente{
    width: 100% !important;
}

Dabei ist * # form_paciente * Ihre Auswahl-ID.

Danach fügen Sie dieses Skript in Ihre Ansicht ein:

window.addEventListener("resize", function() {
    $('.chzn-container').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth());
    $('.chzn-search input').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-12);
    $('.chzn-drop').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-2);  
}, false);

In diesem Fall ist * # selecciona_paciente_estadisticas_form * die übergeordnete Formular-ID von * # form_paciente *.

Das ist alles!

6
MSánchez

Dieses Blog empfiehlt Folgendes:

$("select").chosen({ width: '100%' }); // width in px, %, em, etc
35
Vinay Raghu

dieser funktionierte für mich, sogar mit mehreren Auswahlfeldern auf dem Bildschirm:

$(document).ready(function(){      
   resizeChosen();
   jQuery(window).on('resize', resizeChosen);
});

function resizeChosen() {
   $(".chosen-container").each(function() {
       $(this).attr('style', 'width: 100%');
   });          
}

Jahr 2019. edit: Denken Sie daran, dass diese Antwort vor 4 Jahren gemacht wurde, als jQuery eine beliebte Bibliothek war und weit verbreitet war. Mein Rat ist, für alles, was nach diesem Jahr gemacht wird, reines JS zu verwenden. Vernachlässigen Sie nicht historische Antworten, die zu dem Zeitpunkt funktionierten, als sie geschrieben wurden. 

17

Obwohl oben teilweise erwähnt, möchte ich auf folgende Lösung hinweisen:

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

Auf diese Weise wird das von Ihnen gewählte Widget immer 100% sein und die Größe entsprechend ändern. Wenn Sie eine andere Breite benötigen, ändern Sie den Prozentsatz oder kapseln Sie die Auswahl selbst mit einem anderen Element und legen Sie stattdessen die Breite für dieses Element fest.

2
Tormod Haugene

Aufbauend auf der Antwort von @ MSánchez schrieb ich Folgendes, um generischer zu sein, ohne auf IDs Bezug zu nehmen:

function processChosenContainer(myme) {
    myme.innerWidth(myme.parent().innerWidth() - 30);
}

function processChosenSearch(myme) {
    myme.innerWidth(myme.parent().parent().parent().innerWidth() - 13);
}

function processChosenDrop(myme) {
    myme.innerWidth(myme.parent().parent().innerWidth() - 32);
}

window.addEventListener("resize", function () {
    //******Adjust Container Width********/
    var myObj = $('.chosen-container');
    myObj.each(function () {
        processChosenContainer($(this));
    });
    //******Adjust input search Width********/
    var myObj2 = $('.chosen-search input');
    myObj2.each(function () {
        processChosenSearch($(this));
    });
    //******Adjust drop Width********/
    var myObj3 = $('.chosen-drop');
    myObj3.each(function () {
        processChosenDrop($(this));
    });
}, false);

Fügen Sie dem select-Element "selected-select-responsive" hinzu, das wie folgt lautet:

.chosen-select-responsive {
width: 100% !important;
}

Wieder ist dies nur eine Zusammenfassung der Antwort von MSánchez! thnx

1
Reem

Ich hatte ein responsives Formular, das viele CSS-Regeln mit Medienabfragen, !important usw. hatte und mit der Klassenvererbungsoption ausgewählt wurde. Bei der Größenänderung gab es oft Konflikte zwischen ausgewählten und übergeordneten CSS, und die Dinge würden brechen. Ich habe eine einfache Lösung gefunden, die für mich funktioniert hat: Erstelle den gewählten Dom bei jeder Fenstergröße neu:

jQuery(document).ready(function() {
        doResize();
        jQuery(window).on('resize', doResize);
});


function doResize() {
     // Parent website's code, that would also reorganize select elements on the page
    jQuery("select.my-select").removeAttr("style"); // Remove display:none style added by chosen
    jQuery("select.my-select").removeClass("chzn-done"); // Remove chzn-done class added by chosen

    jQuery(".chzn-container").remove();
    jQuery("select.my-select").chosen({
                 width: '100%',
                 disable_search_threshold: 10,
                 inherit_select_classes : true
               });
}
1
workwise

Verwenden Sie einfach Breite in Prozent in einfachen Anführungszeichen:

<select chosen width="'100%'" ... ></select>

Ein mit dieser Technik ausgewähltes Ansprechverhalten kann hier eingesehen werden: http://plnkr.co/edit/RMAe8c?p=preview

0
Bernardo Ramos

Die Art und Weise, die ich verwende, ist die Verwendung von erit_select_class.

HTML

<select class="input-xxlarge" />

JS

jQuery("[data-chosen]").chosen({
  inherit_select_classes : true
});

CSS

.input-xxlarge {
  width:530px;
  max-width: 100%;
}

Hier ist der einfache Grund, warum ich es getan habe.

JS:

// Create Chosen Select Menus
setUpSelectMenus();

// Reset Chosen Select Menus when window changes size
window.addEventListener( "resize", function() { setUpSelectMenus(); } );

/**
 * Settings for Default Chosen Select Menus
 */
function setUpSelectMenus(){

    $( '.chosen-select' )
        .chosen( "destroy" ) // Need this to make responsive
        .chosen(
            {
                allow_single_deselect   : true,
                disable_search_threshold: 10
            }
        );
}
0
Braeden