select class="selectpicker" fenêtre modale

alariel29
Les bases HTML/CSS

Bonjour,

J'ai un problème avec un select, je souhaite que celui-ci soit de ce style là : https://jsfiddle.net/KyleMit/9abm0hhy/
j'ai deux page, une page qui est ma page de connexion et ma deuxième qui est une page modale appelée par celle-ci.
Le problème est que sur la page de connexion, le select marche bien comme dans l'exemple, alors que sur ma page modale, celui-ci prend d'autres propriétée comme le fait de ne pas apparaitre avec notamment un :display: none !important; au niveau css.
ne comprenant pas, je me tourne vers vous.
voici ma page de connexion

<!-- Formulaire de connexion à l'application -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
        <head>
            <title>Castor</title>
            <link href="css/bootstrap/bootstrap.min.css" type="text/css" rel="stylesheet">
            <link href="css/bootstrap/bootstrap-select.min.css" type="text/css" rel="stylesheet">
            <link href="css/style.css" type="text/css" rel="stylesheet">
            <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        </head>
        <header id="header">
            <link rel="shortcut icon" type="image/x-icon" href="ressources/favicon.ico" />
        </header> 
        </br></br>
    <body>
        <div class="container">
            <div class="row">
                <div align="center" class="col-md-offset-3 col-md-6">
                    <img src="ressources/Logo_Castor.png"/>
                    <form id="test" method="post" action="Controler/controler_reinitialisation_mot_de_passe">
                        <legend> C@STOR </legend>
                </div>
            </div>

            <div class="row">
                <div class="col-md-offset-4">
                    <div class="clearfix">
                        <div class="form-group">
                            <label for="Login" class="col-md-2"> NNI : </label>
                            <div class="input">
                                <input type="text" class="col-md-3" name="login" id="Login" placeholder="NNI"> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </br>
            <div class="row">
                <div class="col-md-offset-4">
                    <div class="clearfix">
                        <div class="form-group">
                            <label for="password" class="col-md-2"> Mot de passe: </label>
                            <div class="input">
                                <input type="password" class="col-md-3" name="password" id="password" placeholder="mot de passe"> </br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-offset-5 col-md-3">
                        <button type="submit" value="valider" id="envoyer" class=" btn btn-primary btn-block">Valider</button></br></br>
                        </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-offset-5 col-md-3">
                        <button data-toggle="modal" id='reinitialisermdp' href="Vue/vue_reinitialisation_mot_de_passe.php" data-target="#infos" data-backdrop="false" class="btn btn-warning btn-block">
                            Réinitialiser le mot de passe
                        </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-offset-5 col-md-3">
                        <button data-toggle="modal" href="Vue/vue_inscription.php" data-target="#inscription" data-backdrop="false" class="btn btn-success btn-block">
                            S'inscrire sur C@STOR
                        </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-offset-4">
                    <div>
                        <div class="modal fade" id="infos">
                            <div class="modal-dialog">  
                                <div class="modal-content">

                                </div> 
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-offset-4">
                    <div>
                        <div class="modal fade" id="inscription">
                            <div class="modal-dialog ">  
                                <div class="modal-content">

                                </div> 
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-offset-4">
                        <img src="ressources/EDF_logo.jpg"/>
                </div>
            </div>
        </div>

        <script src="JQuery/jquery.js"></script>
        <script src="css/bootstrap/bootstrap.min.js"></script>
        <script src="css/bootstrap/bootstrap-select.min.js"></script>
        <script src="javascript/index.js"></script>

  </body>
</html>

ma fenêtre modale

<center>
        <link href="css/bootstrap/bootstrap.min.css" type="text/css" rel="stylesheet">
        <link href="css/bootstrap/bootstrap-select.min.css" type="text/css" rel="stylesheet">
      <link href="css/style.css" type="text/css" rel="stylesheet">
  <div class="modal-header ">
      <button type="button" class="close" data-dismiss="modal">x</button>
      <h4 class="modal-title">Inscription C@STOR</h4>
  </div>
  <div class="modal-body">
      <form id="inscription" method="post" action="Controler/controler_inscription.php">
        <div class="alert">
            <div id="reponse"></div>
        </div>
        <div class="clearfix row">
          <div class="form-group form-inline">
            <label for="Login" class="control-label col-md-offset-2 col-md-4"> NNI : </label>
            <input type="text" class="form-control col-md-4" name="login" id="login" placeholder="NNI" required> 
          </div>
        </div>
        <div class="clearfix row">
          <div class="form-group  form-inline">
            <label for="Login" class="control-label col-md-offset-2 col-md-4">Confirmation du NNI : </label>
            <input type="text" class="form-control col-md-4"name="login" id="confirmLogin" placeholder="NNI" required> 
          </div>
        </div>
        <div class="clearfix row">
          <div class="form-group form-inline"> 
            <label for="Nom" class="control-label col-md-offset-2 col-md-4"> Nom : </label>
            <input type="text" class="form-control col-md-4"name="Nom" id="Nom" placeholder="Nom" required> 
          </div>
        </div>
        <div class="clearfix row">
          <div class="form-group form-inline">
            <label for="prenom" class="control-label col-md-offset-2 col-md-4"> Prénom : </label>
            <input type="text" class="form-control col-md-4"name="prenom" id="prenom" placeholder="Prénom" required> 
          </div>
        </div>
        <div class="clearfix row">
            <div class="form-group form-inline">
              <label for="password"class="control-label col-md-offset-2 col-md-4"> Mot de passe: </label>
                <input type="password"  class="form-control col-md-4"name="password" id="password" placeholder="mot de passe" required> </br>
            </div>
        </div>
        <div class="clearfix row">
            <div class="form-group form-inline">
              <label for="password"class="control-label col-md-offset-2 col-md-4">Confirmation Mot de passe: </label>
                <input type="password"  class="form-control col-md-4"name="password" id="confirmPassword" placeholder="mot de passe" required> </br>
            </div>
        </div>
        <div class="clearfix row">
          <div class="form-group form-inline">
            <label for="mail" class="control-label col-md-offset-2 col-md-4"> Mail : </label>
            <input text name="mail" class="form-control col-md-4"id="mail" placeholder="Mail" required />
          </div>
        </div>
          <div class="form-group form-inline">
            <label for="fixe" class="control-label col-md-offset-2 col-md-4"> Téléphone fixe : </label>
            <input text name="fixe"class="form-control col-md-4" id="fixe" placeholder="Téléphone" maxlength="10" required />
          </div>
        </div>
        <div class="clearfix row">
          <div class="form-group form-inline">
            <label for="mobile" class="control-label col-md-offset-2 col-md-4"> Téléphone Mobile : </label>
            <input text name="mobile"class="form-control col-md-4" id="mobile" placeholder="Portable" maxlength="10" />
          </div>
        </div>
         <div class="clearfix row">
          <div class="form-group form-inline">
            <label for="region" class="control-label col-md-offset-2 col-md-4"> Région : </label>
            <select id="select" class="form-control selectpicker col-md-4"> </select>
          </div>
        </div>
         <div class="clearfix row">
          <div class="form-group form-inline">
            <label for="guichet" class="control-label col-md-offset-2 col-md-4"> Guichet : </label>
            <select id="select" class="form-control selectpicker col-md-4" data-live-search="true" ><option data-tockens="test">test1</option> </select>
          </div>
        </div>
         <select class="selectpicker" data-live-search="true" >
    <option>Alabama</option>
    <option>Alaska </option>
    <option>Arizona </option>
    <option>Arkansas </option>
    <option>California </option>
    <option>Colorado </option>
    <option>Connecticut </option>
    <option>Delaware </option>
    <option>Florida </option>
    <option>Georgia </option>
    <option>Hawaii </option>
    <option>Idaho </option>
    <option>Illinois Indiana </option>
    <option>Iowa </option>
    <option>Kansas </option>
    <option>Kentucky </option>
    <option>Louisiana </option>
    <option>Maine </option>
    <option>Maryland </option>
    <option>Massachusetts </option>
    <option>Michigan </option>
    <option>Minnesota </option>
    <option>Mississippi </option>
    <option>Missouri </option>
    <option>Montana Nebraska </option>
    <option>Nevada </option>
    <option>New Hampshire </option>
    <option>New Jersey </option>
    <option>New Mexico </option>
    <option>New York </option>
    <option>North Carolina </option>
    <option>North Dakota </option>
    <option>Ohio </option>
    <option>Oklahoma </option>
    <option>Oregon </option>
    <option>Pennsylvania Rhode Island </option>
    <option>South Carolina </option>
    <option>South Dakota </option>
    <option>Tennessee </option>
    <option>Texas </option>
    <option>Utah </option>
    <option>Vermont </option>
    <option>Virginia </option>
    <option>Washington </option>
    <option>West Virginia </option>
    <option>Wisconsin </option>
    <option>Wyoming</option>
    </select>
        </br>
        <button type="submit" class="btn btn-primary">S'inscrire</button>
      </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-info" data-dismiss="modal">Fermer</button>
  </div>
</center>

<script src="JQuery/jquery.js"></script>
<script src="css/bootstrap/bootstrap.min.js"></script>
<script src="css/bootstrap/bootstrap-select.min.js"></script>
<script src="javascript/index.js"></script>
comme il n'y a pas d'intéraction pour le moment, seule ces deux pages sont concernées.

j'ai reussi a faire apparaitre les select en ajoutant

.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }
dans le css
cependant, ils ne possèdent pas les mêmes caractéristique, j'entend par cela que ce sont des select basique et non un select permettant de faire une recherche dedans.

2 réponses

Lartak

Bonsoir.
Pour commencer, tu as deux principaux problèmes, le premier, c'est qu'il ne faut jamais attribuer la même valeur à deux attributs id (et plus) sur la même page, le second, c'est que tu charges deux fois les mêmes fichiers CSS/Javascript.
Une autre remarque :

cependant, ils ne possèdent pas les mêmes caractéristique, j'entend par cela que ce sont des select basique et non un select permettant de faire une recherche dedans.

Dans ce cas là, tu devrais peut-être enlever les attributs data-live-search pour ceux qui ne doivent pas comporter le champ de recherche ou alors mettre leurs valeurs à false.

alariel29
Auteur

les deux id qui étaient identiquent ont été changé, les fichiers css/javascript ne sont chargé qu'une fois maintenant.
je ne vais pas enlever l'attribut data-live-search parce que c'est justement ce que je cherche a faire fonctionner sur ma fenêtre modale.
Mon but est d'avoir un select opérationnel avec cet attribut, or avec ou sans, cela reste pour l'instant un simple select.