web-dev-qa-db-fra.com

Définir la largeur de l'élément déroulant dans les options déroulantes de sélection HTML

Je travaille sur un site Web qui implique de remplir automatiquement une zone de sélection à l'aide d'un script PHP. Tout cela fonctionne bien, sauf que le problème est que ce que j'utilise pour remplir la zone de texte a des titres très longs ( ce sont des articles de revues et des titres de présentation.) La liste déroulante s'étend à la largeur de l'élément le plus long, qui s'étire sur le bord de l'écran, ce qui rend la barre de défilement impossible à atteindre. J'ai essayé différentes méthodes pour essayer de définir manuellement la liste déroulante boîte utilisant CSS à une largeur particulière, mais jusqu'à présent en vain. Le mieux que je l'ai fait pour définir la boîte de sélection à une certaine largeur, mais le menu déroulant lui-même est beaucoup, beaucoup plus large.

Tout conseil à ce sujet serait grandement apprécié.

MODIFIER:

Il s'avère que la ligne CSS suivante fonctionne dans tous les navigateurs principaux, à l'exception de Google Chrome (qui est ce que je testais la page). Si une solution pour Chrome est connu, ce serait bien de le savoir.

select, option { width: __; }
htmlcsshtml-select
28
Greg Zwaagstra

Vous pouvez styliser (quoique avec quelques contraintes) les éléments réels eux-mêmes avec le sélecteur option:

select, option { width: __; }

De cette façon, vous limitez non seulement la liste déroulante, mais aussi tous ses éléments.

11
Josh Leitzel

Je trouve que la meilleure façon de gérer les longues listes déroulantes est de le placer dans un conteneur div de largeur fixe et d'utiliser width: auto sur la balise de sélection. La plupart des navigateurs contiennent le menu déroulant dans le div, mais lorsque vous cliquez dessus, il se développe pour afficher la valeur complète de l'option. Il ne fonctionne pas avec IE Explorer, mais il existe un correctif (comme c'est toujours nécessaire avec IE). Votre code ressemblerait à quelque chose comme ça.

HTML 

<div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div>

CSS 

div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto\9;
}
15
J.Money

HTML:

<select class="shortenedSelect">
    <option value="0" disabled>Please select an item</option>
    <option value="1">Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</option>
</select>

CSS:

.shortenedSelect {
    max-width: 350px;
}

Javascript:

// Shorten select option text if it stretches beyond max-width of select element
$.each($('.shortenedSelect option'), function(key, optionElement) {
    var curText = $(optionElement).text();
    $(this).attr('title', curText);

    // Tip: parseInt('350px', 10) removes the 'px' by forcing parseInt to use a base ten numbering system.
    var lengthToShortenTo = Math.round(parseInt($(this).parent('select').css('max-width'), 10) / 7.3);

    if (curText.length > lengthToShortenTo) {
        $(this).text('... ' + curText.substring((curText.length - lengthToShortenTo), curText.length));
    }
});

// Show full name in tooltip after choosing an option
$('.shortenedSelect').change(function() {
    $(this).attr('title', ($(this).find('option:eq('+$(this).get(0).selectedIndex +')').attr('title')));
});

Fonctionne parfaitement. J'ai eu le même problème moi-même. Découvrez ce JSFiddle http://jsfiddle.net/jNWS6/426/

2
Blak Dave

Côté serveur:

  1. Définissez une longueur maximale de la chaîne
  2. Clip la chaîne
  3. (facultatif) ajouter des points de suspension horizontaux

Solution alternative: l'élément select est dans votre cas (uniquement en devinant) un contrôle de formulaire à choix unique et vous pouvez utiliser un groupe de boutons radio à la place. Vous pouvez ensuite les styliser avec un meilleur contrôle. Si vous avez sélectionné [@multiple], vous pouvez faire de même avec un groupe de cases à cocher, car elles peuvent toutes deux être considérées comme un contrôle de formulaire à choix multiples.

1
anddoutoi

Petit et meilleur

#test{
width: 202px;
}
<select id="test" size="1" name="mrraja">
0
MRRaja