How to stretch a jsf panel horizontally

Question

I have a single line bar as the title of the welcome page. It has 5 elements. The first two are information, the third is a command link, and the last two are command buttons for changing the language.

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

I tried the 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 as follows:

 .top_column1 { font-weight: normal; } .top_column2 { } .top_column3 { width: 78%; } .top_column4 { width: 24px; } .top_column5 { width: 24px; } 

And it turned out like this: But nevertheless, this was achieved by determining the width of the third column, therefore, if the messages have different lengths, then instead of two or two they will go into a mess. How do I format a panel grid to achieve what I want?

Answer 1

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

By the way, it could be better than a table with two columns, where the 1st column is 100% wide and the second column contains these language buttons. Or just use the div and float the language buttons to the right.