Menu déroulant non visible en mode mobile

Bootstrap , jquery , jsf ..

22 avril 2018 à 22:38:00

Bonjour, j'ai un problème qui me dérange c'est que quand je suis en mode PC avec grand écran mon menu créer avec Bootstrap, s'affiche correctement sans aucun problème par contre quand je réduit mon navigateur web en mode mobile et que je clique sur le menu en haut à droite les composant de mon menu n'apparaît pas ... d'où peut venir le problème si vous pouvez m'aider en vous remerciant..

Voila les captures :

Mode normal :

En mode mobile :

Figure 1 :

Figure 2 :

Mon code de page:

<!DOCTYPE html>

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">



<h:head>

	<title>Site FRC</title>

	<meta charset="utf-8"/>
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
	<h:outputStylesheet library="css" name="styles.css"></h:outputStylesheet>

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

	<style type="text/css">
	
		body {
			background-color: #aaa;
			padding-top: 10px;
		}
		
		[class*="col-"] {
			margin-bottom: 20px;
		}
		
		
		.well {
			background-color: #CCC;
			padding: 20px;
		}
		
		a:active, a:focus {
			outline: none;
		}
		
		.inline-form input {
			display: inline-block;
			width: 100px;
		}
	
	
	
	</style>


</h:head>

<h:body>


	<div class="container">

	<ui:include src="/template/common/commonHeader.xhtml" />
		

		<div class="alert alert-warning alert-dismissable col-lg-6">
			<button type="button" class="close" data-dismiss="alert">&#215;</button>
			<strong>Information : </strong> Le site web est toujours en cours de
			développement
		</div>
		
		
		<br /> <br /><br /> <br /><br />
		
	


		<p:chart type="bar" model="#{chartView.barModel}" style="height:300px" />
		
		<p:chart type="bar" model="#{chartView.horizontalBarModel}"
					style="height:300px" />
		      

  		
  		
  		<br/> <br/><br/>
  		
  		
  		
  	
  
	<ui:include src="/template/common/commonFooter.xhtml" /> 
	
		   
				
	</div>
	
 
    <h:outputScript name = "/js/bootstrap.js" /> 
    <h:outputScript name = "/js/bootstrap..min.js" /> 


    

</h:body>

</html>

-
Edité par billie joe 22 avril 2018 à 22:48:48

fasteel

23 avril 2018 à 9:56:04

Bonjour, premièrement il faut éviter les balises br pour formater sa page, bootstrap est là pour gérer ça. Ensuite inspecte les menu déroulants pour voir si les éléments sont cachés / présent

► Rejoignez la communauté

billie joe

23 avril 2018 à 11:32:35

Bonjour , premièrement quesque je pourrai mettre au lieu des <br> en Bootstrap ? pour mon menu je vous le met ci-dessous je n'ai pas d'éléments cachés ..

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	
	<meta charset="utf-8"/>
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    


</h:head>

<h:body>

<ui:composition>

<!--Menu déroulant-->

	
      <nav class="navbar navbar-inverse" role="navigation">   
        <div class="navbar-header">   
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.xhtml">FRC</a>
        </div>
        

        
        <div class="collapse navbar-collapse">
          
          <ul class="nav navbar-nav">

            <li> <a href="index.xhtml">Accueil</a> </li>

            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Tableaux de données <b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li class="dropdown-header">Consultation</li>          
              <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Tout consulter</a></li>
              <li><a href="tableauxFiltrage.xhtml"><span class="glyphicon glyphicon-screenshot"></span> Par filtrage</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Exporter</li>
              <li><a href="ExporterDonnee.xhtml"><span class="glyphicon glyphicon-list-alt"></span> Exporter les données</a></li>
              </ul>
            </li> 
            
            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Graphiques <b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li class="dropdown-header"> Génerale</li>
              <li><a href="graphiqueEvolution.xhtml"><span class="glyphicon glyphicon-screenshot"></span> Evolution</a></li>
              <li class="divider"></li>
              <li class="dropdown-header"> Autres</li>
              <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Autres</a></li>
              </ul>
            </li> 

            <li> <a href="#">Contact</a> </li>
            
          </ul>

          <h:form class="navbar-form navbar-right inline-form" role="form">
            <div class="form-group">
              <h:inputText id="search" value ="" class="input-sm form-control" placeholder="Recherche"></h:inputText>
              <h:commandButton  value="Rechercher" onclick = "alert('Hello World!');"  class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</h:commandButton>
            </div>
          </h:form>

        </div>
      </nav>


<!--Menu déroulant-->

</ui:composition>



</h:body>
</html>

fasteel

23 avril 2018 à 14:13:10

Doit y avoir des raccourcis avec bootstrap faut chercher mais rien que en css tu peux mettre du padding ou du border. Après pour l'histoire des champs cachés tu as du copié coller un code js pour la barre horizontal, soit y a un fuck ici ou soit tu utilise plusieurs librairies js qui se marchent dessus.

► Rejoignez la communauté

billie joe

23 avril 2018 à 14:27:25

Oui j'ai trouver ça , je l'ai remplacer a lieu des <br/>

<div class="clearfix"></div>

Après pour le menu franchement je ne voit pas ce qui cloche , j ai mis ton mon code en haut , et j utilise que la librairie bootstrap.js ..

fasteel

23 avril 2018 à 14:30:20

Y a ça aussi de bizarre

<h:outputScript name = "/js/bootstrap.js" />
<h:outputScript name = "/js/bootstrap..min.js" />

Un seul suffit le minifié ou le non minifié, et le deuxième ..min.js doit pas être bon et dans ce fichier

billie joe a écrit:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	
	<meta charset="utf-8"/>
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    


</h:head>

<h:body>

<ui:composition>

<!--Menu déroulant-->

	
      <nav class="navbar navbar-inverse" role="navigation">   
        <div class="navbar-header">   
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.xhtml">FRC</a>
        </div>
        

        
        <div class="collapse navbar-collapse">
          
          <ul class="nav navbar-nav">

            <li> <a href="index.xhtml">Accueil</a> </li>

            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Tableaux de données <b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li class="dropdown-header">Consultation</li>          
              <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Tout consulter</a></li>
              <li><a href="tableauxFiltrage.xhtml"><span class="glyphicon glyphicon-screenshot"></span> Par filtrage</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Exporter</li>
              <li><a href="ExporterDonnee.xhtml"><span class="glyphicon glyphicon-list-alt"></span> Exporter les données</a></li>
              </ul>
            </li> 
            
            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Graphiques <b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li class="dropdown-header"> Génerale</li>
              <li><a href="graphiqueEvolution.xhtml"><span class="glyphicon glyphicon-screenshot"></span> Evolution</a></li>
              <li class="divider"></li>
              <li class="dropdown-header"> Autres</li>
              <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Autres</a></li>
              </ul>
            </li> 

            <li> <a href="#">Contact</a> </li>
            
          </ul>

          <h:form class="navbar-form navbar-right inline-form" role="form">
            <div class="form-group">
              <h:inputText id="search" value ="" class="input-sm form-control" placeholder="Recherche"></h:inputText>
              <h:commandButton  value="Rechercher" onclick = "alert('Hello World!');"  class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</h:commandButton>
            </div>
          </h:form>

        </div>
      </nav>


<!--Menu déroulant-->

</ui:composition>



</h:body>
</html>

Dans le header il n'y a pas les fichiers bootstrap c'est normal ?

-
Edité par fasteel 23 avril 2018 à 14:34:39

► Rejoignez la communauté

billie joe

23 avril 2018 à 15:02:43

J'ai enlevé le bootstrap.min.js , mais j'ai toujours le même problème .. ça provient pas des import Jquery apparemment

fasteel

24 avril 2018 à 15:12:23

Mais quand tu inspect l'élément dans ton navigateur tu vois quoi ?

► Rejoignez la communauté

billie joe

30 avril 2018 à 8:53:22

C'est a dire

fasteel

2 mai 2018 à 12:06:30

Clique droit inspecter l'élément sous chrome

► Rejoignez la communauté