Empêcher un élément de passer en dessous d'un autre élément Html

**MrBiscotto** · 05/08/2019, 22h33

Bonjour,
Je développe une application web, dans celle-ci existe une page (DetailEtudiant.xHtml) permettant de synthétiser l'ensemble des données d'un étudiant.
Sur cette page, il est également possible d'écrire une ou des notes, qui seront affichées à l'aide d'un datatable.
Cependant, plus l'utilisateur ajoute des notes et plus la fiche de l'élève disparaît sous la barre de navigation :/

Voici donc ma barre de navigation :

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
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:b="http://bootsfaces.net/ui"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">
	<h:form>
	<b:navBar brand="Helha" brandHref="index.xhtml" inverse="true" position="top">
		<b:navbarLinks>
 
			<b:dropMenu value="Informatique de gestion">
 
				<b:navCommandLink href="ListeEtudiant.xhtml" action="#{etudiantController.setSection('IG')}" value="Liste étudiant" />
				<b:navCommandLink href="ListeSeminaire.xhtml" action="#{seminaireController.setSection('IG')}" value="Liste séminaire" />
				<b:navCommandLink href="ListeCours.xhtml" action="#{coursController.setSection('IG')}" value="Liste cours" />
				<b:navCommandLink href="ListeTutorat.xhtml" action="#{tutoratController.setSection('IG')}" value="Liste tutorat" />
				<b:navCommandLink href="ListeRemediation.xhtml" action="#{remediationController.setSection('IG')}" value="Liste remédiation" />
			</b:dropMenu>
			<b:dropMenu value="Assistant de direction">
				<b:navCommandLink href="ListeEtudiant.xhtml" action="#{etudiantController.setSection('AD')}" value="Liste étudiant" />
				<b:navCommandLink href="ListeSeminaire.xhtml" action="#{seminaireController.setSection('AD')}" value="Liste séminaire" />
				<b:navCommandLink href="ListeCours.xhtml" action="#{coursController.setSection('AD')}" value="Liste cours" />
				<b:navCommandLink href="ListeTutorat.xhtml" action="#{tutoratController.setSection('AD')}" value="Liste tutorat" />
				<b:navCommandLink href="ListeRemediation.xhtml" action="#{remediationController.setSection('AD')}" value="Liste remédiation" />
			</b:dropMenu>
 
			<b:dropMenu value="Comptabilité">
				<b:navCommandLink href="ListeEtudiant.xhtml" action="#{etudiantController.setSection('CT')}" value="Liste étudiant" />
				<b:navCommandLink href="ListeSeminaire.xhtml" action="#{seminaireController.setSection('CT')}" value="Liste séminaire" />
				<b:navCommandLink href="ListeCours.xhtml" action="#{coursController.setSection('CT')}" value="Liste cours" />
				<b:navCommandLink href="ListeTutorat.xhtml" action="#{tutoratController.setSection('CT')}" value="Liste tutorat" />
				<b:navCommandLink href="ListeRemediation.xhtml" action="#{remediationController.setSection('CT')}" value="Liste remédiation" />
			</b:dropMenu>
 
			<b:navLink value="Rechercher un étudiant" onclick="$('.formValidationModalClass').modal()"/>
			<b:navCommandLink value="Ajouter utilisateur" action="#{utilisateurController.checkAdminAdd()}"/>
			<b:navLink value="A propos" href="APropos.xhtml"/>
			<b:navCommandLink href="Connexion.xhtml" action="#{utilisateurController.deconnexion()}" value="Déconnexion" />
		</b:navbarLinks>
	</b:navBar>
</h:form>
 
<h:form id="formRecherche">
  <b:modal id="dia" title="Rechercher un étudiant" styleClass="formValidationModalClass"
           closable="false"  close-on-escape="false" backdrop="false">
 
		<b:inputText id="input"  placeholder="Rechercher étudiant" typeahead="true" 
						typeahead-limit="8" typeahead-values="#{etudiantController.getEtudiants()}"
						value="#{etudiantController.nomPrenomRecherche}"
						required="true"
						requiredMessage="Entrez le nom et prénom d'un étudiant"/>
 
					<br />
 
    <f:facet name="footer">
      <b:button value="Fermer" dismiss="modal" />
      <b:commandButton value="Rechercher" look="primary" action="#{etudiantController.rechercheEtudiant()}" 
      			styleClass="btn btn-success"
      			/>
    </f:facet>
  </b:modal>
</h:form>
 
</ui:composition>

Voici le code de ma page DetailEtudiant.xHtml :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:b="http://bootsfaces.net/ui">
<h:head>
	<meta charset="UTF-8" />
	<title>Détails Etudiant</title>
 
	<link rel="shortcut icon" href="images/detail.png"/>
</h:head>
 
<h:body style="background-image: url(images/back3.jpg);">
	<ui:include src="include/menu.xhtml" />
 
	<div class="container" 
		style="margin-top:33%; margin-left:50%; top: 50%; left: 50%; transform: translate(-50%, -50%);">
		<b:jumbotron>
			<h1>#{etudiantController.etudiant.nom}
				#{etudiantController.etudiant.prenom}</h1>
 
			<h:form>
				<div class="form-group">
					<h:outputLabel>Nom : #{etudiantController.etudiant.nom}</h:outputLabel>
				</div>
				<div class="form-group">
					<h:outputLabel>Prénom : #{etudiantController.etudiant.prenom}</h:outputLabel>
				</div>
				<div class="form-group">
					<h:outputLabel>Section : #{etudiantController.etudiant.section}</h:outputLabel>
				</div>
				<div class="form-group">
					<h:outputLabel>Classe : #{etudiantController.etudiant.classe}</h:outputLabel>
				</div>
 
				<div class="form-group">
					<h:outputLabel
						value="#{etudiantController.etudiant.coordonnees ? ' Coordonnées personnelles : accepte de diffuser' : ' Coordonnées personnelles : Not Ok'}"></h:outputLabel>
				</div>
				<div class="form-group">
					<h:outputLabel
						value="#{etudiantController.etudiant.photo ? 'Photo : accepte de diffuser' : 'Photo : Not Ok'}"></h:outputLabel>
				</div>
 
				<div class="form-group">
					<u><b>Liste des séminaires</b></u>
					(#{seminaireController.getCountId(etudiantController.etudiant.id)}
					/
					#{seminaireController.getCountSeminaire(etudiantController.etudiant.section)})
					:
					<ui:repeat
						value="#{seminaireController.getSeminairesId(etudiantController.etudiant.id)}"
						var="seminaire">
						<div>#{seminaire.nomSeminaire} (#{seminaire.date})</div>
					</ui:repeat>
				</div>
 
				<div class="form-group">
					<u><b>Liste des demandes de tutorat</b></u>
 
					<ui:repeat
						value="#{tutoratController.getListTutoEtu(etudiantController.etudiant.id)}"
						var="tuto">
						<div>- #{tuto.nom}</div>
					</ui:repeat>
				</div>
 
		<div class="form-group">
			<u><b>Liste des rémédiations</b></u>		
			<pre><p style="font-size:14px"> #{remediationController.listRemeEtu(etudiantController.etudiant.id)}</p></pre>
		</div>		
 
		<b:dataTable value="#{etudiantController.getListNoteEtudiants()}"
		               var="note" searching="false">
		    <b:dataTableColumn value="#{note.id}" />
		    <b:dataTableColumn value="#{note.texte}"/>
		    <b:dataTableColumn label="Date d'ajout" value="#{note.date}"/>
		    <b:dataTableColumn label="Modifier note">
				<b:commandButton value="Modifier"  iconAwesome="edit" onclick="$('.modalDialog').modal()" action="#{etudiantController.setNoteEtudiant(note)}">
					<f:ajax execute="@form" render="@none" />
				</b:commandButton>
			</b:dataTableColumn>
		  	<b:dataTableColumn label="Supprimer note">
				<b:commandButton value="Supprimer" iconAwesome="trash" action="#{etudiantController.supprimerNote(note)}"/>
			</b:dataTableColumn>
		  </b:dataTable>
 
 
		  <b:panelGrid columns="6" size="sm" >
		    <h:commandButton id="add" value="Ajouter une note" ajax="true" action="#{etudiantController.ajouterNote()}" styleClass="btn btn-success btn-lg btn-block" style="width:170px" />
			<b:inputTextarea rows="2" value="#{etudiantController.noteEtudiant.texte}" fieldSize="lg" placeholder="Entrez une note ..." style="width:450px"/>
		  </b:panelGrid>
	</h:form>
 
</b:jumbotron>
 
 
</div>
 
</h:body>
</html>

Je m'excuse d'avance d'avoir posté trop de code dans les balises mais je pense qu'il est nécessaire que je mette l'ensemble de la page xHtml afin que vous trouviez une solution possible.
Voici une illustration du problème auquel je suis confronté : Nom : erreur.png
Affichages : 221
Taille : 55,6 Ko