18034 sujets

Questions générales et questions de débutants

Html5 datalist chrome

Hello

j'ai un soucis d'affichage avec un datalist a plus de 1000 <option>.

Sous firefox no probleme, la datalist se cale en dessous de l'input text avec un scroll vertical Smiley smile

Par contre sous Chrome, hic ! la datalist se cale deja au dessus ! et pas de scroll... j'ai rien fait de particulier. 

<div id="div_id_marque">
    <label>Nouvelle marque</label>
    <input style="width: 380px;" list="id_select_marque" type="text" id="id_input_datalist_marque" >
    <datalist name="input_select_marque" id="id_select_marque">
      <?php 
               un echo pour afficher les 1000 <option> de la bdd
      ?>
    </datalist>
  </div>


la div à deja un height fixe de 300 px.

Merci
Salut,
Supposition, extrapolation.
Si tu as un élément de ta page qui est se décale au dessus de l'autre c'est que sur ce navigateur la propriété css n'a malheureusement pas le même effet.

Juste Css n'est qu'un système qui dispose les éléments d'une page en fonction du type de flux qu'on lui a attribué en bloc, en ligne, flottant.
Il faut savoir que les flux par défaut de ces éléments html diffères malheureusement d'un navigateur à un autre ...

Pour ce qui est de réglé ton problème essayé de jouer sur les trois points cité au dessus pour voir si ça n'arrange pas les choses.
css

datalist{
    display:block;     // ou  inline 
    float:left;    // ou rien
    position:relative;  // ou fixed ou rien (c'est mieux)
}


bonne chance.
Salut, deja merci de tes conseils

J'ai tester les différentes proposition malheureusement rien n'y fait...

je comprend pas pourquoi. de base je n'ai pas de CSS appliquer sur la datalist. C'est le navigateur qui l'interprete comme ça.

Quand j'ai une vingtaine d’éléments dans la dadalist (je parle pour chrome) la list est bien "en dessous" de l'input. quand j'ai plus, elle passe au dessus. j'ai l'impression que quand elle sors du bord de la page (en bas) elle passe au dessus... peut etre devrais-je forcer une taille max au datalist.. mais je sais pas comment faire.
Sujet clos
Aller à