CODEWITHSUNDEEP
cssjsfjsf-2
Eslam Hamdy
Eslam Hamdy

Reputation: 7396

CSS id selector doesn't applied to a component inside jsf page

I have these css file with an id selector as follows:

#globalFilter {
margin-left: 995px;
margin-top:-30px;
width:320px;
height:20px;
font-size: 11px;
}

and the component with the mentioned id is as follows:

        <p:inputText id="globalFilter" value="Search" />

and it's inside a called notifybar, the problem is that the properties in the selector doesn't applied on the component when the page is rendered

Note: the css file is loaded successfully and the component with id="globalFilter" exists in the view source mode

also these class selector doesn't applied to another component inside the page:

selector:

.underlineOnHover{
text-decoration: underline;
}

component:

    <h:outputLink id="notify"styleClass="underlineOnHover">
        <h:outputText value="notifications" />
    </h:outputLink>

also these is the generated html for the <p:inputText id="globalFilter">

<input id="globalFilter" name="globalFilter" type="text" value="Search" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="globalFilter_s" type="text/javascript">PrimeFaces.cw('InputText','widget_globalFilter',{id:'globalFilter'});</script>

Upvotes: 0

Views: 1021

Answers (1)

skuntsel
skuntsel

Reputation: 11742

Most probably its client id is not globalFilter, but rather form:globalFilter: it could have some naming containers in its ancestry. Just check out the generated HTML in a browser tool, like Firebug, to assure that it is so.

There are three remedies I can think of:

  1. Use styleClass attribute instead: it accepts a CSS class rather than I'd selector, like in <h:inputText styleClass="your-css-class" />.
  2. Use absolute client id by checking out the generated HTML in your CSS file, like #form:globalFilter { ... }.
  3. Use prependId="false" attribute of your enclosing <h:form> so that the client id would be exactly globalFilter.

Upvotes: 1

Related Questions