I am encountering an issue with my CSS file that contains an ID selector outlined as:
#globalFilter {
margin-left: 995px;
margin-top:-30px;
width:320px;
height:20px;
font-size: 11px;
}
The component associated with the above-mentioned ID is:
<p:inputText id="globalFilter" value="Search" />
This component is nested within a notifybar, but unfortunately, the properties defined in the selector are not being applied to the component upon page rendering.
It's important to note that the CSS file is successfully loaded and the component with the ID "globalFilter" does exist in the view source mode.
In addition, a class selector is also not being applied to another component on the page:
Selector:
.underlineOnHover{
text-decoration: underline;
}
Component:
<h:outputLink id="notify"styleClass="underlineOnHover">
<h:outputText value="notifications" />
</h:outputLink>
Additionally, here 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>