1 pièce(s) jointe(s)
Afficher un <input text> au clic, à l'avant avec position relative dans un tableau (scroll X,Y)
Bonjour,
Je possède un tableau, avec scroll sur X et Y, construit via une fonction javascript. Dans chaque cellule de ce tableau, il y a un glyphicon permettant d'afficher une balise <input type='text'> ou de la cacher. Hors, cette dernière ne s'affiche que dans la cellule et est caché sous les cellules voisines, ce qui empêche l'utilisateur de voir une partie de ce qu'il écrit.
Pièce jointe 451404
Ici, j'ai tapé 5 fois la lettre 'o', une seule est lisible.
Pour régler ce problème, j'ai envisagé deux solutions: jouer avec z-index et position ou utiliser un popover. Aucune des deux ne fonctionne :aie:
1ère solution:
Le code html / php:
Code:
1
2
3
4
5
6
7
8
9
| if (!is_null($p->getCommentaire())) {
echo "<div class='commentaire'>";
echo "<span class='glyphicon glyphicon-info-sign' onclick='show(this)'>";
echo "<p class='commSaisie' style='display:none'>";
echo "<input type='text' name='commentaires[]' class='inputCommentaire' onblur='hide(this)' value='".$p->getCommentaire()."'>";
echo "</p>";
echo "</span>";
echo "</div>";
} |
Le code css:
Code:
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
| /* Span de commentaire */
.commentaire {
position: relative;
z-index: 120;
width: 15px;
float: right;
}
/* input des commentaires lors de la modification d'un planning*/
.inputCommentaire{
position: relative;
overflow: visible;
z-index: 120;
}
/* Saisie / modif d'un commentaire */
p.commSaisie{
margin-left: -145px;
margin-top: -40px;
z-index: 120;
}
/* icone des commentaires */
.glyphicon{
z-index: 1;
} |
Le code js:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function show(span){
//Affichage de la zone de saisie du commentaire
span.lastChild.style.display = "flex";
span.lastChild.style.position = "absolute";
//span.lastChild.lastChild.style.position = "fixed";
span.lastChild.lastChild.focus();
}
function hide(input){
//On cache le commentaire et selon sa classe, on effectue une vérification
input.parentNode.style.display = "none";
input.parentNode.style.display = "relative";
//input.style.position = "relative";
if (input.value.length > 0){ //Si un commentaire à été saisis
input.parentNode.parentNode.className = "glyphicon glyphicon-info-sign";
}else{
input.parentNode.parentNode.className = "glyphicon glyphicon-plus";
}
} |
Le problème de cette solution est que l'input se retrouve à une position fixe sur l'écran et ne reste pas attaché au glyphicon, qu'il soit affiché ou caché. De plus, les inputs des cellules cachés de bases, ne sont donc même pas visible.
J'aimerais favoriser cette solution puisque l'application que je développe est un projet d'étude.
La seconde solution:
Code html / php:
Code:
1
2
3
4
5
6
7
| echo "<div class='commentaire'>";
echo "<span class='glyphicon glyphicon-plus' data-toggle='popover' data-placement='top' data-trigger='focus' data-html='true'>";
// echo "<p class='commSaisie' style='display:none'>";
// echo "<input type='text' name='commentaires[]' onblur='hide(this)'>";
// echo "</p>";
echo "</span>";
echo "</div>"; |
Code js:
Code:
1
2
3
4
| $(document).ready(function(){
$('[data-toggle="popover"]').popover();
$('[data_toggle="popover"]').html("<input type='text' name='commentaires[]'>");
}); |
Le problème de cette solution est que le popover ne s'affiche pas, rien ne se passe quand je clique sur le glyphicon. A noter également qu'il peut y avoir du contenu déjà présent dans le commentaire et qu'il faut le renseigner comme valeur de base de l'input, commentaire qui est différent d'une cellule à l'autre. C'est pour cette raison que je favorise la première solution.
Voilà voilà, j'espère que c'est assez clair, n'hésitez pas à poser des questions.
Merci d'avance de votre aide.
Cordialement,
Skunka.
