Jeu de kendo ui dropdownlist largeur

Je voudrais utiliser un kendo liste déroulante, qui a une taille fixe depuis est contraint par d'autres champs de la page, mais quand il montre la liste déroulante des éléments de la liste, la liste déroulante de la zone doit redimensionner à la longueur maximale des éléments. Sorte de largeur fixe pour l'élément affiché, mais automatique de la largeur de la liste déroulante.
Quelque chose comme

|my choice |     <-- fixed width displayed on the page

|next choice     |
|previous choice |  <-- dropdown area to select another item
|dummy           |

Est-ce possible via CSS ou d'une liste déroulante propriétés de l'ensemble grâce à jQuery?

OriginalL'auteur cortomaltese_marcof | 2013-05-31

  1. 13

    Vous pouvez définir la largeur d'une Liste Déroulante à la fois à l'aide d'un CSS ou à l'aide d'une méthode.

    Si l'id de vous DropDownList est my-dropdown ensuite, vous devez écrire:

    • À l'aide de CSS

      #my-dropdown-list {
    width: auto !important;
}

    REMARQUE: Nous avons ajouté -list à l'origine id. L' "!important" est important car vous souhaitez remplacer largeur d'origine de définition.

    • À l'aide d'une méthode

      $("#my-dropdown").data("kendoDropDownList").list.width("auto");

    En plus de l'utilisation "auto" pour obtenir la largeur automatiquement ajusté pour le texte, vous pouvez utiliser une largeur fixe:

    #my-dropdown-list {
    width: 300px !important;
}

    ou:

    $("#my-dropdown").data("kendoDropDownList").list.width(300);

    OriginalL'auteur OnaBai

  2. 5

    La réponse ci-dessus ne fonctionne pas pour moi. J'ai l'avantage de savoir que ma liste déroulante est à l'intérieur d'un div.

    <div class="myDivClass">
   <select id="myDropDown"><option>First</option><option>Second></option></select>
   <!--... other stuff in the div-->
<div>

    J'ai trouvé que la travée a la classe k-liste alors j'ai ajouté le CSS

    .myDivClass span.k-dropdown {
  width: 300px
}

    OriginalL'auteur badMonkey

  3. 0

    Ce qui a fonctionné pour moi, c'est de rendre une classe supplémentaire sur la base de l'élément:

    <input .. class="ExtraLarge ..

    Qui a produit:

    <span style="" class="k-widget k-dropdown k-header ExtraLarge" ..

    Avec cette Extralarges classe en place, cela fonctionnait très bien sous FireFox et Chrome:

    span.k-dropdown.ExtraLarge
{
    width:400px;
}

    OriginalL'auteur Brian Mains

  4. 0

    En utilisant le code suivant pour être le modèle de l'kendo dropdownlist:

    <div class="myDivClass">
   <select id="myDropDown"><option>First</option><option>Second></option></select>
   <!--... other stuff in the div-->
<div>

    vous lancerez la kendoDropDownList à l'aide de jQuery comme suit:

    $("#myDropDown").kendoDropDownList().data("kendoDropDownList");

    Maintenant, pour ce contrôleur pour prendre toute la largeur, ce que vous avez à faire, c'est de définir la largeur de l'élément select à 100%, ou quel que soit votre désir.
    par exemple:

    <select id="myDropDown" style="width: 100%"><option>First</option><option>Second></option></select>

    OU, est un fichier css:

    #myDropDown { width: 100% }

    OriginalL'auteur AlKhalil Tarek

  5. 0

    Si l'id de vous DropDownList est ma-liste ensuite, vous devez écrire:

    #my-dropdown-list {
    width: auto !important;
    -moz-min-width: 120px;
    -ms-min-width: 120px;
    -o-min-width: 120px;
    -webkit-min-width: 120px;
    min-width: 120px;
    /*max-width: 210px;*/
}

    Lire les explications ci-dessous.
    http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width

    OriginalL'auteur Shivendra