11485 sujets

JavaScript, DOM et API Web HTML5

Display: none ou Visibility:hidden

Bonsoir à tous,

en fait, je dois faire en sorte d'instaurer un système pour modifier les champs qui se trouvent dans un tableau.

Par ligne, j'ai des champs ainsi que des icônes permettant de faire différentes actions sur ces champs.

Par exemple, je peux modifier les champs ou effacer l'enregistrement.

Dans mon cas, je veux pouvoir modifier les champs de mon enregistrement. Pour cela, j'ai un icône avec un crayon. Quand l'utilisateur clique sur le crayon pour modifier l'enregistrement, les champs deviennent éditables et le crayon est remplacer par une disquette afin de pouvoir sauver les modifications. Les autres icônes (supprimer un enregistrement, visualiser un enregistrement, ...) sont cachés.

2 solutions sont possibles : soit display: none, soit visibility: hidden. Le problème, c'est que quand j'utilise display: none, les autres icônes se trouvent à d'autres places car l'espace n'est pas conservé. Par contre, quand j'utilise visibility: hidden, des effets comme le survol sont toujours d'actualité et ainsi de suite.

Le plus simple, je pense, ce serait d'utiliser display: none mais de faire en sorte que l'espace alloué à cet élément soit gardé plutôt que d'être gardé.

Malheureusement, je ne vois pas comment faire pour faire en sorte que l'espace alloué dans le cadre d'un display: none ne soit pas perdu.

Merci d'avance.

Sincères salutations,
Thierry
Salut, tu pourrais essayer de faire quelque chose du genre :
J'espère que ça marchera, bonne soirée à toi


#element {
    visibility: hidden;
    cursor: default;
}




const element = document.getElementById('element');
element.onmouseover = function() {
   return false;
}
Modérateur
Hello,
Est-ce que ton visibility: hidden est bien placé ? Si j'ai un élément qui a un visibility hidden, je ne verrai jamais son état hover… (sorry, pas certains de bien voir, mais ça me semble être la plus simple) Smiley smile
Meilleure solution
Modérateur
Bonjour,

Je mettrais les icones dans des boutons, et je mettrais les boutons non utilisables à un moment donné dans l'état "disabled". Par exemple :
document.getElementById("btn-suppr").disabled = true;

Et ensuite, éventuellement, je rajouterais du style css pour modifier l'aspect des boutons "disabled". Si par exemple, il fallait que ces boutons ne soient plus visibles du tout :
button[disabled]{opacity:0;}

Amicalement,
Sujet clos
Aller à