CODEWITHSUNDEEP
jsf
JavaBeginner
JavaBeginner

Reputation: 81

How to right align h:panelGrid?

Im design a navigation bar for a webpage in jsf.

I want some links to be on the right of the bar and some on the left. It doesnt seem to work.

Any ideas?

<h:panelGrid columnus="2">
<h:panelGroup styleClass="alignmentLeft">
    <h:panelGrid columns = "2" columnsClasses = "alignmentLeft">
        <h:outputLink>... </h:outputLink>
            <h:outputText/>
        <h:outputLink>... </h:outputLink>
        <h:outputText/>
    </h:panelGrid>
</h:panelGroup>
<h:panelGroup styleClass="alignmentRight">
    <h:panelGrid columns = "2" columnsClasses = "alignmentRight">
        <h:outputLink>... </h:outputLink>
            <h:outputText/>
        <h:outputLink>... </h:outputLink>
            <h:outputText/>
    </h:panelGrid>
</h:panelGroup>
</h:panelGrid>


.alignmentRight {
 text-align : right;
}

Upvotes: 1

Views: 16939

Answers (1)

Swarne27
Swarne27

Reputation: 5747

Try this out, there was a typing mistake in your coding as well, its the first h:panelGrid 's column you have typed "columnus"

Inside <h:head> the style sheet must be declared.

<h:head>
<h:outputStylesheet name="styles.css"
        library="css" />
</h:head>

then in <h:body>

<h:body> 
<h:panelGrid columns="2" width="600">
        <h:panelGroup>
            <h:panelGrid columns="2" columnClasses="alignmentLeft" width="200">
                <h:outputLink>...1 </h:outputLink>
                <h:outputLink>...2 </h:outputLink>
            </h:panelGrid>
        </h:panelGroup>
        <h:panelGroup>
            <h:panelGrid columns="2" columnClasses="alignmentRight" width="200">
                <h:outputLink>...3 </h:outputLink>
                <h:outputLink>...4 </h:outputLink>
            </h:panelGrid>
        </h:panelGroup>
    </h:panelGrid>
</h:body>

In style sheet (styles.css) the styles are,

.alignmentLeft {
 text-align : left;
 border: 1px solid black;
 background-color: orange;
}
.alignmentRight {
 text-align : right;
 border: 1px solid black;
 background-color: lime;
}

Upvotes: 1

Related Questions