Widht en fonction du nombre de caractere
kevin
-
kevin -
kevin -
Bonjour,
j'ai fait un faux select
voilà
et un autre
es ce quon peut mettre dans la select un widht en fonction du nombbre de caractere
j'ai mis
je sais qu'on peut mettre une class
selectcourt, selectemoyen,selectlong
et idem
optioncourt, optionmoyen, optionlong
es ce qu'on peut detecte un widht en fonction du nombre de caracter qu'il oit cout pour ceux qui sont un caractère a 10
et un caractère 20 lettre sera pour un select et option moyen
etc...
j'ai fait un faux select
voilà
<section class="alignerlesselects"> <div class="select" data-name="cheveux"> <span>Sélectionnez</span> <div class="cursor"></div> <div class="options"> <div class="option" data-value="Chatains">Chatains</div> <div class="option" data-value="Bruns">Bruns</div> <div class="option" data-value="Noirs">Noirs</div> <div class="option" data-value="Blonds">Blonds</div> <div class="option" data-value="Poivre et sel">Poivre et sel</div> <div class="option" data-value="Blancs">Blancs</div> <div class="option" data-value="Roux">Roux</div> <div class="option" data-value="Autres">Aautres</div> </div> </div> </section>
et un autre
<section class="alignerlesselects"> <div class="select" data-name="age"> <span>Sélectionnez</span> <div class="cursor"></div> <div class="options"> <div class="option" data-value="18 ans">18 ans</div> <div class="option" data-value="19 ans">19 ans</div> <div class="option" data-value="20 ans">20 ans</div> <div class="option" data-value="21 ans">21 ans</div> <div class="option" data-value="22 ans">22 ans</div> <div class="option" data-value="23 ans">23 ans</div> <div class="option" data-value="24 ans">24 ans</div> <div class="option" data-value="25 ans">25 ans</div> <div class="option" data-value="26 ans">26 ans</div> <div class="option" data-value="27 ans">27 ans</div> <div class="option" data-value="28 ans">28 ans</div> </div> </div> </section>
es ce quon peut mettre dans la select un widht en fonction du nombbre de caractere
j'ai mis
.select {
padding-left: 5px;
display: inline-block;
border: 1px dotted #000;
max-height: 25px;
min-height: 25px;
min-width: 106px !important;
cursor: pointer;
margin-right:10px;
position: relative;
z-index: auto
}
.options {
margin-top:13px;
margin-left:-6px;
border: 1px dotted #000;
min-width: 106px;
max-height: 200px;
overflow: auto;
background-color: #FFF;
z-index:999999999999; /* Positionne le cadre options du select par dessus tout les éléments lorsque celui-ci est deplié */
position: absolute;
padding-left:5px;
padding-top:5px;
}
je sais qu'on peut mettre une class
selectcourt, selectemoyen,selectlong
et idem
optioncourt, optionmoyen, optionlong
es ce qu'on peut detecte un widht en fonction du nombre de caracter qu'il oit cout pour ceux qui sont un caractère a 10
et un caractère 20 lettre sera pour un select et option moyen
etc...
A voir également:
- Widht en fonction du nombre de caractere
- Caractère ascii - Guide
- Fonction si et - Guide
- Caractère spéciaux - Guide
- Caractere speciaux - Guide
- Nombre de jours entre deux dates excel - Guide
1 réponse
Salut,
quel intérêt d'avoir un faux select?
Enfin comme vous voulez, c'est plus simple avec de vrai input de formulaire et vous aurez plus de possibilités(comme les attributs max, min...).
Ensuite je vous conseillerais pas sur une liste déroulante d'avoir des dimensions différentes car ça va perturber l'oeil car pas homogène(et donnera une impression élément 'cassé').
Sinon une solution simple soit remplacer les div par des balises de textes (styles inline comme p et span, d'ailleurs un div n'est pas correct de la façon dont vous l'utilisez. Un div sert en tant que container d'éléments sans sémantique(sinon utiliser article ou section + article) donc assez rare d'utiliser le div actuellement(ou alors c'est une faute).
Les balises de texte de type inline s'adapteront à la taille de leur contenu(sauf si le css dit autre chose bien sûr) ou alors vous le changez dans le CSS avec display:inline.
Si vous voulez indiquez du contenu en tant que texte utilisé les balises appropriées, si vous voulez des select pareil!
Pour récupérer des valeurs de vos balises et les utiliser dans la page il faudra obligatoirement passer par Javascript et le DOM.
quel intérêt d'avoir un faux select?
Enfin comme vous voulez, c'est plus simple avec de vrai input de formulaire et vous aurez plus de possibilités(comme les attributs max, min...).
Ensuite je vous conseillerais pas sur une liste déroulante d'avoir des dimensions différentes car ça va perturber l'oeil car pas homogène(et donnera une impression élément 'cassé').
Sinon une solution simple soit remplacer les div par des balises de textes (styles inline comme p et span, d'ailleurs un div n'est pas correct de la façon dont vous l'utilisez. Un div sert en tant que container d'éléments sans sémantique(sinon utiliser article ou section + article) donc assez rare d'utiliser le div actuellement(ou alors c'est une faute).
Les balises de texte de type inline s'adapteront à la taille de leur contenu(sauf si le css dit autre chose bien sûr) ou alors vous le changez dans le CSS avec display:inline.
Si vous voulez indiquez du contenu en tant que texte utilisé les balises appropriées, si vous voulez des select pareil!
Pour récupérer des valeurs de vos balises et les utiliser dans la page il faudra obligatoirement passer par Javascript et le DOM.
come ca
http://jsfiddle.net/x78jmfn7/1/
mais il faudra savoir coment mettre u whith facon court et long etc...