web-dev-qa-db-fra.com

Alternatives CSS à style = "display: none"

J'implémente une base de composants JSF où vous devez remplacer le CSS utilisé ou il utilisera son CSS par défaut. J'essaie de masquer le div et j'ai essayé de définir le rich-panelbar-header-act class style="display:none", mais il récupère ensuite son CSS par défaut. Existe-t-il un moyen d'ajouter un attribut de style à rich-panelbar-header-act (puisque je dois implémenter la classe) qui cache le div? J'ai inclus mon css et html ci-dessous

CSS:

element.style {
}
Matched CSS Rules
.rich-panelbar-header-act {
background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html);
background-position: top left;
background-repeat: repeat-x;
vertical-align: middle;
color: #FFF;
background-color: #555;
font-size: 11px;
font-weight: bold;
font-family: Arial,Verdana,sans-serif;
}
.rich-panelbar-header-act {
border: 0 solid red;
padding: 0 1px 1px 5px;
cursor: pointer;
}
user agent stylesheetdiv {
display: block;
}
Inherited from body.browserChrome.browserChrome2
body {
font: 12px/17px Helvetica, Arial, Verdana;
}

HTML:

<html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none">
<div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"><div class="rich-panelbar-header " style=";">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-header-act " style=";;;;display: none;">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"><table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"><tbody><tr><td class="rich-panelbar-content " style=";">

Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only

give you access to the managed bean facility, Ajax4jsf advantages the action and value

change listeners as well as invokes server-side validators and converters during the

AJAX request-response cycle.</td></tr></tbody></table></div></div>
</div>
</body>
</html>
htmlcssrichfaces
23
c12
width: 0; height: 0;

ou

visibility: hidden;

ou

opacity: 0;

ou

position: absolute; top: -9999px; left: -9999px;

ou juste

display: none !important;
45
Kaloyan

Je suppose visibility:hidden; va vous aider. :)

4
FeRtoll

Cela fonctionne pour moi ..

!important ne peut pas être utilisé dans la version ampli donc au lieu de display:none; utilisez ceci:

position: absolute; top: -9999px; left: -9999px;
1
Shubham Mishra

Utilisez! Important pour éviter qu'il ne soit remplacé -

.rich-panelbar-header-act {
    display:none !important;
}

Vous pouvez également utiliser JavaScript comme sauvegarde -

function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('DIVIDNAME').style.display = 'none';
}else {
if (document.layers) { // Netscape 4
document.DIVIDNAME.display = 'hidden';
}else { // IE 4
document.all.DIVIDNAME.style.display = 'none';
}}}
</script>
1
Kevin Lynch

Cette question a déjà été répondue, bien que la réponse originale ait quelques défauts que je vois ... alors qu'ils retirent visuellement l'élément de l'écran, les directives d'accessibilité Web suggèrent de ne pas en utiliser deux.

Pour fournir une réponse plus simple et meilleure, visibilty: hidden; serait une option, mais si vous avez besoin de l'espace que l'élément occupait, display: none !important; serait votre meilleure option. La balise !important devrait remplacer les autres éléments CSS qui agissent sur ce <div>.

Comme indiqué ci-dessus, il suffit de déplacer visuellement l'élément hors de la page (par exemple position: absolute; top: -9999px; left: -9999px;) n'est pas considéré comme la meilleure pratique par les directives d'accessibilité du Web car la plupart les lecteurs électroniques liront toujours le texte que vous avez dans l'élément, et les utilisateurs de clavier pourront potentiellement accéder à cet élément, même si il est situé "hors de l'écran".

J'utilise normalement display: none !important si j'ai d'autres classes CSS agissant sur un élément que j'ai besoin de masquer.

0
Kyle Ronsberg