web-dev-qa-db-fra.com

Menu déroulant aligné à droite dans select2

Existe-t-il un moyen d’aligner à droite le menu déroulant avec dropdownAutoWidth: true dans un select2, au lieu du standard left-align? Je veux que la sélection reste la même, mais que la liste déroulante se déplace vers la gauche pour l'aligner sur la sélection du côté droit. Voir l'extrait ci-dessous avec le mauvais alignement ...

Remarque: Je souhaite différentes tailles de sélection et de liste déroulante, comme indiqué.

Edit // Mise à jour avec suggestion d'ajouter direction: rtl; text-align: right;. Cela n’aligne que le texte à droite. Je veux que toute la liste déroulante soit alignée à droite avec l'option sélectionnée au-dessus de celle-ci. Par exemple. le menu déroulant doit se trouver à gauche de l'option sélectionnée, pas à droite.

Edit 2 // Mis à jour avec .select2-dropdown { left: -69px !important; } Cela donne l’impression que je veux, mais existe-t-il un moyen de ne pas avoir à définir une valeur fixe de -69px?

$(".form-control").select2({
    width: '100px',
    dropdownAutoWidth : true,
});
.select2-container--default .select2-results > .select2-results__options { direction: rtl; text-align: right; }
.select2-dropdown {
left:-69px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

Je veux que cela ressemble à ceci, mais pas avec une valeur fixe pour y parvenir.

 enter image description here

javascriptjqueryhtmlcssjquery-select2
4
SeaBass

Comme vous voulez avoir différentes tailles de sélection et de liste déroulante, voici ma solution en utilisant les options intégrées de select2 et quelques CSS , mais peut-être pas parfait.

Il est très facile de créer rtl, utilisez simplement dir, mais nous devons passer certaines autres options, comme indiqué ci-dessous:

$('select').select2({
    dir: "rtl",
    dropdownAutoWidth: true,
    dropdownParent: $('#parent')
});

La clé ici est dropdownParent, vous devez également éditer votre HTML comme suit:

<div id='parent'>
    <select>
      <option selected="selected">orange</option>
      <option>white</option>
      <option selected="selected">purple</option>
    </select>
</div>

Et enfin, vous avez besoin de CSS:

#parent {
  /* can be any value */
  width: 300px;
  text-align: right;
  direction: rtl;
  position: relative;
}
#parent .select2-container--open + .select2-container--open {
  left: auto;
  right: 0;
  width: 100%;
}

Vous pouvez le voir en action ici sur codepen

Si vous avez plus d'une sélection, vous avez besoin d'un code JS pour gérer l'option dropdownParent. Btw votre vie sera plus facile si vous supprimez l'option dropdownAutoWidth;)

1
Mehdi Dehghani

Si toujours à la recherche d'une méthode alternative. J'ai récemment eu besoin de réaliser cela aussi et la réponse de RTL n'était pas une solution viable pour mon projet. Si vous utilisez select2.js (4.0.6) et que vous ne modifiez pas le script, vous pouvez remplacer le code suivant et obtenir le bon positionnement en ajoutant une classe à l'élément cible.

Recherchez les lignes 4381 à 4384 

var css = {
  left: offset.left,
  top: container.bottom
};

Remplacer par ce qui suit

var containerWidth = this.$container.outerWidth()
var right = ($("body").outerWidth() - (offset.left + containerWidth));

if (this.$element.hasClass("right-align")) {
    var css = {
        right: right,
        top: container.bottom
    };
} else {
    var css = {
        left: offset.left,
        top: container.bottom
    };
}

Ajoutez la classe alignée à droite sur votre entrée de sélection cible.

<select id="client_select" class="form-control right-align">
     <option value="01">Example One</option>
     <option value="02">Example Two</option>
     <option value="03">Example Three</option>
</select>

Cela devrait être tout ce dont vous avez besoin. Si l'élément cible a la classe, le code positionnera la liste déroulante en utilisant le positionnement à droite au lieu du positionnement à gauche. Devrait fonctionner de la même manière si le conteneur est défini sur un parent. Cependant, ceci n'est pas complètement testé. Ce n'est peut-être pas une solution élégante, mais cela ne nécessite aucune modification de CSS. Devrait faire l'affaire jusqu'à ce qu'une mise à jour soit faite pour ajouter une option permettant de gérer les menus déroulants alignés à droite. J'espère que ça aide.

0
RyDog

init select avec dir: "rtl" tels que:

$('select').select2({
   dir: "rtl,
   ...
   ...
   ...
   ...
   })
0
Omid Ahmadyani