select class="selectpicker" fenêtre modale

alariel29
Javascript

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.

1 réponse

alariel29
Auteur

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.