Menu déroulant non visible en mode mobile

**zikyoubi** · 22/04/2018, 22h41

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 :

Nom : fzefef.PNG
Affichages : 351
Taille : 53,0 Ko

En mode mobile :

Figure 1 :

Nom : 15244294058846_dazdzad.PNG
Affichages : 325
Taille : 27,1 Ko

Figure 2 :

Nom : Capturedazdaz.PNG
Affichages : 308
Taille : 26,1 Ko

Mon code de page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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">×</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>

**danielhagnoul** · 22/04/2018, 23h02

Photos trop grandes et inutile.

Mise en page avec Flex ou Grid ? Responsive ? Media Queries ?

Pour voir le problème, il faut au minimum un lien vers le site et au maximum les codes CSS, HTML et JS.

Apprendre le développement Web

Media queries

Vue adaptative

**zikyoubi** · 23/04/2018, 11h29

Bonjour , c'est fait avec bootstrap , c'est pas moi qui a créer le code CSS du menu c'est via le JAR Bootstrap, par contre je met ci-dessous mon menu :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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>

**NoSmoking** · 24/04/2018, 12h17

Bonjour,
ton code PrimeFaces ne nous est d'aucune utilité, il nous faut voir le code HTML généré ainsi que le CSS associé, ou une page test en ligne.

Menu déroulant non visible en mode mobile

JavaScript

Discussions similaires

Partager

Partager