25

I'm implementing a JSF component base where you must override the css being used or it will use its default css. I'm trying trying to hide the div and I've tried to set the rich-panelbar-header-act class style="display:none", but then it pulls in its default css. Is there any way to add a style attribute to rich-panelbar-header-act (since I have to implement the class) that hides the div? I've included my css and html below

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>
Archmede
  • 1,070
  • 1
  • 12
  • 28
c12
  • 8,765
  • 43
  • 140
  • 243

6 Answers6

53
width: 0; height: 0;

or

visibility: hidden;

or

opacity: 0;

or

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

or just

display: none !important;
Kaloyan
  • 6,814
  • 4
  • 31
  • 43
  • 6
    Note about accessibility: screen readers will ignore the elements hidden with `display: none` and `visibility: hidden` (that's the intent so fine) but still read out those positioned off the viewport (via negative text-indent or left/right translation). I think one screen reader (is it VoiceOver?) will ignore elements with `height:0` but others won't. So beware that some users will still perceive your (not so) hidden content while you may think it is. *Positioned out of the viewport* is often called `.visually-hidden` in CSS frameworks and CMS templates to express this. – FelipeAls Apr 06 '13 at 21:31
  • 2
    Related: do NOT use `top: -9999px` as it may cause visual jumps to top of page and back to previous position for people using keyboard to navigate in your content. `left: -9999px` (or right in RTL languages) is fine as it won't move the scroll position vertically and it's sufficient. This concerns focusable elements (links, form elements essentially) but as the left poperty is sufficient, better avoid top completely – FelipeAls Apr 06 '13 at 21:36
  • 1
    Few years later this seems to be an interesting alternative too: `line-height:0; overflow:hidden; padding:0; margin:0` – Bob S Dec 13 '16 at 14:00
  • h,w - 0 was just what I wanted, none was preventing some components to fully load on ready event .. I think – Vitaliy Terziev Aug 10 '19 at 00:12
4

I suppose visibility:hidden; will help you. :)

FeRtoll
  • 1,246
  • 11
  • 26
2

This works for me..

!important can't be used in amp version so instead of display:none; use this:

position: absolute; top: -9999px; left: -9999px;
garyh
  • 2,632
  • 1
  • 23
  • 28
Shubham Mishra
  • 104
  • 9
1

Use !important to stop it getting overridden -

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

Also you can use JavaScript as a back up -

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>
Kevin Lynch
  • 22,799
  • 2
  • 32
  • 37
0

This question has already been answered, though the original answer has a couple flaws that I see... while they get the element visually off the screen, web accessibility guidelines suggest not using a couple of them.

To provide a simpler, better answer, visibilty: hidden; would be an option, though if you need the space that element was inhabiting, display: none !important; would be your best option. The tag !important should override other CSS elements that are acting on that <div>.

As stated above, simple moving the element visually off the page (e.g. position: absolute; top: -9999px; left: -9999px;) is not considered best practice per web accessibility guidelines as most e-readers will still read whatever text you have in the element, and keyboard users will potentially be able to navigate to that element, even though it is located 'off the screen'.

I normally use display: none !important if I have other CSS classes acting on an element that I need hidden.

Kyle Ronsberg
  • 1
  • 1
  • 2
0

Simple!

You can simply just use this:

visibility: hidden!important;position: absolute; top: -9999px; left: -9999px;opacity: 0;width: 0; height: 0;

I think that it well work. It uses all the attributes that can be used in CSS.

Tiago Rangel de Sousa
  • 81
  • 8