Howto stretch jsf panelgrid in horizontal direction

I have a one row panelgrid as a header of the welcome page. It has 5 elements. First two are informations, third is a command link, and last two are command buttons to change language.

I want to - have it in one line - have it on full width of the screen; - have two right buttons aligned to the right side of the screen - have first three elements (cells/columns) aligned to the right side with little determined space between them.

I tried as following:

          <h:panelGrid columns="5" columnClasses="top_column1, top_column2, top_column3, top_column4, top_column5"  style="width: 100%">
             <h:outputText value="#{msg.LoggedAs}:" />
             <h:outputText value="#{userManager.loggedUser.username}  /  "/>
             <h:commandLink value="#{msg.butLogout}" action="#{userManager.logout()}" style="color: white"  />
             <h:commandButton  action="#{languageOfSystem.changeLanguage('en')}" image="/resources/icons/usa_24.png"    title="english" />
             <h:commandButton  action="#{languageOfSystem.changeLanguage('pl')}" image="/resources/icons/poland_24.png" title="polish"/>
          </h:panelGrid>

with css like this:

.top_column1 {
    font-weight: normal;
}

.top_column2 {
}

.top_column3 {
    width: 78%;
}
.top_column4 {
    width: 24px;
}
.top_column5 {
    width: 24px;
}

And I've got effect like this: But still it was achieved by determining width of the third column so if messages will have different lengths there will be two rows instead of one or everything go into the mess. How should I format my panel grid to achieve what I want?

Answers


Add a CSS white-space property with value of nowrap to .top_column1.

By the way, this can better be a 2-column table where the 1st column has a width of 100% and the 2nd column contains those language buttons. Or just use a div and float the language buttons right.


Need Your Help

UITableViewCell dequeued memory is retained

iphone ios memory uitableview reusability

I have a project in which a single UITableView can have hundreds of entries (For testing purposes I promise). I'm testing out how to work with UITableViews since I've very new to them and I've

Custom directive not rendering

angularjs angularjs-directive

In this directive I'm attempting to display the result of multiple get requests :