1

I'm trying to set the rendered attribute of af:panelList on a CSS file so I can't display it according to the device resolution but when I define on CSS:

#pl2 {
    rendered:false;
}

I get a unknown property "rendered" and chrome doesn't hide it when its a smaller resolution.

Heres the component definition on my .jspx file:

<af:panelList  id="pl2" rows="3" maxColumns="5" >

What can i do to fix this? Is there a way around?

JSW189
  • 6,267
  • 11
  • 44
  • 72
oskar132
  • 794
  • 2
  • 12
  • 32
  • JSF generates HTML. CSS works on HTML, not on JSF. Open page in browser, rightclick and *View Source*. You'll see the JSF-generated HTML which is exactly what CSS is also seeing. You should base off your CSS on exactly that HTML. Further, `rendered` is definitely not a valid CSS property. See also http://www.htmldog.com/guides/cssbeginner/ – BalusC Dec 13 '12 at 21:01
  • I did what u told me, it renders a div with id pt1:panelobile and then a table which has no id. i added this line to the css #pt1:panelmobile { display: none; } but i have no luck so far, heres the inspected element
    – oskar132 Dec 13 '12 at 21:24

2 Answers2

1

it renders a div with id pt1:panelobile and then a table which has no id. i added this line to the css #pt1:panelmobile { display: none; } but i have no luck so far

If you ignore deprecated browsers like IE6/7, then you should be using this selector instead:

#pt1\:panelmobile {
    display: none;
}

The : is namely a special character in CSS selectors indicating a pseudo selector and therefore needs to be escaped by \ when used as-is.

But, especially in your particular case, much better is to just assign the JSF component a more generic and better reusable style class.

<af:panelList ... styleClass="hidden">

with

.hidden {
    display: none;
}

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
0

if you are trying to hide the element, try:

#pl2
{
    display: none;
}
lante
  • 7,192
  • 4
  • 37
  • 57
  • i tried that already but it won't disapear, can't seem to find the problem with this one – oskar132 Dec 13 '12 at 20:55
  • There is most likely no such element with `id="pl2"` in the HTML. Apparently you've placed the responsible JSF component in a JSF form or some other naming container component, causing its client ID to be prepended. – BalusC Dec 13 '12 at 21:01
  • try to inspect element with firebug or with chrome inspect tool and then get the element id – lante Dec 13 '12 at 21:13
  • i inspected the element and it seems like it creates a div,
    i added to the css these lines: #pt1:panelmobile { display: none; } but it just wont work, dont know what to do :S
     – oskar132 Dec 13 '12 at 21:27
  • try using the class to get the element, insted of "#pt1:panelmobile" use ".x3q" – lante Dec 13 '12 at 21:33