28112 sujets

CSS et mise en forme, CSS3

[Résolu] Impossible d'afficher une liste déroulante sur materialize cs

Bonjour,
J'ai décidé de remettre au gout du jour un petit projet que j'avais conçu auparavant et j'ai opté pour le framework materialize css. Tout fonctionne bien jusqu'à ce que je veuille afficher des listes déroulantes. En effet, mes balises select ne sont pas gérés par le navigateur. Lorsque je fais "inspecter" je vois la ligne du select dans le code mais elle n'existe pas sur la page web. J'ai essayé avec le formalisme de materialize css et en faisant un bon vieux select basique mais dans aucun des cas ça fonctionne. Si quelqu'un peut m'aider je lui serais très reconnaissant Smiley cligne .
Petite précision : lorsque je commente "materialize.css" et "materialize.min.css" de mon header, les select reviennent.
Je ne connais pas Materialize, mais n'aurais-tu pas oublié d'initialiser la fonction material_select() dans ton javascript ?

Tu trouveras les infos ici.
Ces lignes sont à entrer dans un <script> </script> ? J'ai essayé de faire cela mais ça n'a rien changé ... J'ai essayé d'y intégrer dans le header (aucun changement) puis dans ma page en cours et toujours aucun changement.
Il doit y avoir un fichier JS de Materialize à inclure également, ainsi que jQuery.
D'autre part tu n'es pas sensé inclure les 2 fichiers css qui sont les mêmes l'un minifié et l'autre non.
Hello,
L'inspecteur web de Chrome m'indique dans materialize.min.css, ligne 13 :

select {display:none;}

dans materialize.css, c'est à la ligne 6586
Merci farang !! Effectivement en supprimant ce select{display:none;}, les listes sont apparues. Je me demande pourquoi ils ont écrit ça dans leur code, je ne vois pas l'intérêt ...
Un grand merci pour vos réponses rapides et précises Smiley smile .
ne pas oublier de marquer le sujet comme résolu...
En fait, il faut ajouter la class browser-default :

<select class="browser-default">

qui est juste après la déclaration display:none, et est utilisée dans materialize.js
Modifié par farang (08 Feb 2017 - 19:10)
L'intérêt de select {display:none;} et de masquer l'élément <select /> pour le styliser sous forme de dropdown personnalisé tel qu'il est présenté dans la doc.

Ce qui n'est nativement pas possible, et tout se passe donc via JS.

Et en effet, la class browser-default permet l'affichage d'un <select /> natif, à la personnalisation réduite aux possibilités données par le browser.
D'accord, en revanche le formalisme de la liste n'est pas complètement respecté, je m'explique : la liste s'affiche avec les bonnes propriétés graphiques, mais lorsque je clique pour la dérouler, là c'est un formalisme basique et non pas celui attendu grâce a materialize. Aurais-tu une idée ? J'ai ajouté la classe à mon select, et en haut de la page j'ai ajouté les deux lignes du javascript dans une balise <script> </script>. Est-ce la bonne méthode ?
Pour que Materialize soit pleinement fonctionnel, voici le markup ainsi que les inclusions de script que tu dois à minima respecter :


<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>


C'est à dire dans l'ordre :
- la font utilisée pour la gestion des icônes ;
- la feuille de style de materialize.min.css OU materialize.css, respectivement pour un environnement de prod et une environnement de dev ;
- la meta viewport, qui t'évitera bien des déboires pour le fonctionne responsive (plus d'info ici) ;
- une version de jQuery supportés par Materialize, ici la 2.1.1 ;
- pour finir, le fichier javascript de Materialize : materialize.min.js ;

Les fichiers CSS et JS sont également disponible via des CDN et peuvent être inclus à leurs emplacements respectifs :


<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>


Tu dois ensuite inclure, après l'appel du fichier materialize.min.js, ton propre fichier JS ou à minima une balise <script /> contenant :


$(document).ready(function() {
    $('select').material_select();
});


La class browser-default sur les <select /> n'aura pas d'intérêt dans ce cas.

Je te conseille fortement de t'intéresser de prêt à la documentation en ligne. Et de plus prêt à la partie concernant les formulaires ici. Les explications y sont claires et précises, et tu y trouveras de très nombreux exemples.
Bon et bien j'ai suivi toutes ces indications à la lettre, mais rien n'y fait ... Je reviendrai écrire la solution si j'arrive à la trouver. Je ne désespère pas Smiley smile .
Sujet clos
Aller à