Question

I need to write in jsf 2 texts on a line with different colors. Here is my code:

<h:panelGrid id="accessinfo_grid" columns="3">
<h:outputText id="loginid" value="#{msgs.loginId}" styleClass="label"/>
<h:outputText id="loginid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
<h:inputText  id="inputusername" disabled="true" value="#{userAccount.userName}"/>
<h:outputText id="password" value="#{msgs.passwordID}" styleClass="label"/>
<h:outputText id="passwordid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
<h:secretText  id="inputpassword" disabled="true" value="#{userAccount.password}"/>
</h:panelGrid> 

I want the output to be to be something like this with * with red color:

Login:* edit_box
Password:* edit_box

But now is something like this:

Login:   * edit_box
Password:* edit_box

I want that * red to be just after the first text. Probably i should try to use something else then a panelGrid but I don’t know what/how.

I am newbie at this.

Thanks,

Answer 1

In a <h:panelGrid>, which generates a HTML <table>, every direct child JSF component will end up in its own <td>. You need to group the JSF components which should end up in the same <td> in a <h:panelGroup>.

<h:panelGrid id="accessinfo_grid" columns="2">
    <h:panelGroup>
        <h:outputText id="loginid" value="#{msgs.loginId}" styleClass="label"/>
        <h:outputText id="loginid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
    </h:panelGroup>
    <h:inputText id="inputusername" disabled="true" value="#{userAccount.userName}"/>

    <h:panelGroup>
        <h:outputText id="password" value="#{msgs.passwordID}" styleClass="label"/>
        <h:outputText id="passwordid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
    </h:panelGroup>
    <h:inputSecret id="inputpassword" disabled="true" value="#{userAccount.password}"/>
</h:panelGrid> 

(note that I replaced the non-existent h:secretText by h:inputSecret, not sure why you used it)

Note that this has nothing to do with CSS. You’d still have exactly the same problem when disabling CSS. I’d suggest to take a JSF pause and concentrate on reading some decent HTML tutorial to understand better how it all works what JSF is generating (you can see it by opening the JSF page in browser and doing rightclick and View Source).