Agrandir le contenu d'un select

Bonjour, j'aurai voulu savoir s'il y avait une solution pour agrandir la fenetre de contenu de la balise input type select lorsqu'elle est dépliée. Le probleme vient du fait que l'on a des noms trop longs pour les options qui la constitue et que ceux ci sont tronqués.

Si ce n'est pas possible, existe t'il d'autres solutions alternatives telles que des infos bulles ou un ascenseur horizontal...

merci

Si tu a la possibilité. Déja tu peut définir une largeur (avec le CSS), ensuite dans le code HTML tu peut mettre un attribut "size" qui va indiquer combient d'éléments tu veut afficher dans la liste (non déroulée). Par défaut c'est 1 : si tu n'a pas activé la liste (clique ou clavier) tu ne vois apparaître qu'un élement de la liste, qui quand tu l'active devient déroulante.

Pour faire un sorte de textarea mais qui est un liste (avec un scroll sur le coté ) il te suffit d'undiquer en nombre d'élements la hauteur de la liste (voir l'image associé au code) :

<select size="4">
  <option>
    option 1
  </option>
  <option>
    option 2
  </option>
  <option>
    option 3
  </option>
  <option>
    option 4
  </option>
  <option>
    option 5
  </option>
  <option>
    option 6
  </option>
</select>

(6 options, hauteur 4 élements) :

Désolé, je me suis mal exprimé dans mon premier post. Ce n'est pas une hauteur que je cherche à redéfinir, c'est plutôt la largeur de la fenêtre déroulante du select...
La largeur du input select reste toujours de taille fixe.

select non déroulé :
_________
|________|

select déroulé :
_________
|________|_____________________________________
|Titre 1 très très très long tronqué............................|
|Titre 2 très très très long tronqué............................|
|Titre 3 très très très long tronqué............................|
|Titre 4 très très très long tronqué............................|
|______________________________________________|

Sous firefox, bien que le contenu soit tronqué, la largeur reste convenable. Par contre sous IE, la largeur est assez petite, d'où la question de savoir s'il existe une solution pour redéfinir manuellement cela en CSS.
Modifié par clemi (29 Sep 2006 - 00:29)

Bonjour, j'ai une solution, mais elle est base sur javascript, mootools, et un position:absolute.
Je ne suis pas sur que ce soit standard, W3C, mais je la donne ici:

Le javascript ci-dessou, allez voir les mootools pour comprendre la fonction domready et autres.

window.onDomReady(function(){
  if(window.ie){
        $$([#red].NomDeLaClasseCssAssocieATesSelect[/#]).each(function(kwick, i){
          kwick.addEvent('mousedown',function(e){
                  e= new Event(e).stop();
                  kwick.setStyle('width','TailleAgrandiepx');
                  kwick.setProperty('size',5);
          });
          kwick.addEvent('change',function(e){kwick.setStyle('width','TailleNormalepx');kwick.setProperty('size',1);});
        });
  }
});

Maintenant le code html :

<div id="ComboElargie">
  <select class="[#red]NomDeLaClasseCssAssocieATesSelect"[/#]name="tonSelect">
      <option value="...">...</option>
  </select>
</div>

et finalement le css 
[code]
NomDeLaClasseCssAssocieATesSelect sert juste recuperer tous les combos
#ComboElargie{
        position:absolute;
        left:4px;
        top:215px;
        width:218px;
        height:88px;
        z-index:1;
}

Attention cependant, le code ci-dessus peut perturber votre mise en page, ce n'est pas une solution prête à l'emploi, mais simplement une solution pour élargir les combos.

++ Pierre-alain BOURDIL (http://pabourdil.com)


pierre-alain BOURDIL ( http://pabourdil.com)
Modifié par albreche (29 Mar 2007 - 18:59)

Salut,

Albreche :

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

salut,
euuuuuh, c'est moi, l'alcool ou j'ai raté un épisode, si on fait un select avec ses petites options toutes mimis sans rien lui attribuer comme largeur, il s'adapte tout seul en largeur à son contenu le plus large, non ??

have swing
Modifié par virtualgadjo (29 Mar 2007 - 18:58)

Le problème est que mes combos ont une largeur fixe dans la maquette. cette largeur est fixée en dur dans la maquette, et il faut respecter cette taille(100px). Dans ce case ,les combos ne se redimensionnaient pas toutes seules .

++
Pierre-alain bourdil

Salut, j'ai exactement le même soucis que toi, j'aimerai savoir si tu as trouvé un moyen de le résoudre ...

par avance merci

Bonjour à tous,

Voilà une réponse que je viens de tester

Tu crées un fichier fichier.css
qui contient le texte suivant :

SELECT.largeur {
width: 200px;
}

Puis dans ton code html tu inclues le code CSS

<link rel="stylesheet" type="text/css" href="fichier.css">

et tu renseignes la valeur css pour ta balise select

<select class="largeur" ................

Voilà

M D R

Un ovni s'est posé sur la planète Alsacréation???