Align nested h:panelGrid in center

Question

I am trying to include one panelGrid to another like a:

 <h:panelGrid id="A" border="1" columns="1" style="width: 100%; text-align:center; display: table">
            <h:panelGrid id="B" border="1" columns="3">
                <h:outputText value="Name : "></h:outputText>
                <h:inputText></h:inputText>
                <h:commandButton value="Add"></h:commandButton>             
            </h:panelGrid>              
        </h:panelGrid>

I have generated html like :

    <table id="j_idt1:A" border="1" style="width: 100%; text-align:center; display: table">
<tbody>
<tr>
<td><table id="j_idt1:B" border="1">
<tbody>
<tr>
<td>Name : </td>
<td><input type="text" name="j_idt1:j_idt3" /></td>
<td><input type="submit" name="j_idt1:j_idt4" value="Add" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

...the thing is panelGrid "B" is always aligned to left despite the css text-align:center :P

That's what I have in eclipse web editor :

and that's what I have in firefox :

So my question is how to locate included panelGrid(s) with eclipse wtp css editor?

Thanks

Look at the client side generated html with a browser developer tool . Then try to get it working there and 'convert' that CSS to the right css to be used with the jsf tags. Inline styles are often not the right choice. Using classes and and more specific css rules for html child elements is — Kukeltje, Jun 14 '16 at 13:48
I want to use eclipse css editor to create centered cell for facelet; So keep the eclipse tag please I need it — cbhogf, Jun 15 '16 at 11:34
@BalusC Thanks I understand you want the best but I want to find out how to use eclipse wtp css editor toolkit to solve the issue; I don't event imagine how to edit each gridtable I create manually :) I know it is not cause by J2EE :) Usually guys who know J2EE know the related closest java web client side technologies so I want them to help too if they know how they typically handle that using eclipse; — cbhogf, Jun 15 '16 at 12:16

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

I don't think you are going about centering a panelGrid the right way. This has been discussed in several other questions on this site. panelGrid renders to a , a block level element. text-lign: center will just center the text in it. You should use margin: 0 auto to adjust the margins.

Look at these answers to help:

How to align PanelGrid to center? JSF-Primefaces

Center a div in CSS - Bad questions, good answer

Edit: I made a quick project with your page and was able to center all 3 panelGrids:

The code for it is below, (I added 10px top margins instead of 0 to more easily tell the panels apart):

    <h:panelGrid id="A" border="1" columns="1" style="margin: 10px auto; width: 100%; ">                            
        <h:panelGrid id="B" border="1" columns="2" style="margin: 10px auto;  width: 460px">
            <h:panelGrid border="1" columns="1" style="margin: 10px auto;">
                <h:inputText style="width: 310px; " ></h:inputText>                             
            </h:panelGrid>
            <h:commandButton value="Add"></h:commandButton>
        </h:panelGrid>
    </h:panelGrid>

edited May 23 '17 at 11:45

Community

1
1

answered Jun 14 '16 at 14:03

ezPaint

152
1
8

I am interested to align table in the center of upper table cell; I am not sure how to locate table in table's cell :( the thing is if to insert bare command button to cell it can be aligned to cell center but another grid panel don't :( – cbhogf Jun 14 '16 at 14:21
p.s. I am trying to use eclipse web editor css editor to align; – cbhogf Jun 14 '16 at 14:24
Can you advise how to set all the mentioned align with eclipse tooling; – cbhogf Jun 14 '16 at 14:49
@cbhogf in the style attribute replace the old center styles with 'margin: 0 auto'. I can't test if it works right bow but I think it should. – ezPaint Jun 14 '16 at 15:02
the thing is I don't want to edit each panelGrid manually that's why I am using eclipse web editor; I tried to control margin with eclipse css editor and I have give me a tip please – cbhogf Jun 14 '16 at 15:20
@cbhogf Try adding the margin edits to panelGrid id="B" – ezPaint Jun 14 '16 at 15:30
you mean that edits margin-right: auto; margin-left: auto ? – cbhogf Jun 14 '16 at 15:57
Yes, you need to center the panelGrid with id B inside of A. Margin is the space outside of the border of an element. Making B's left right margins auto should make them equal to eachother. Open your page in chrome and right click > inspect on panelGrid B. What's it saying about B's margin. – ezPaint Jun 14 '16 at 16:11
Its great but I am trying to edit the facelet with eclipse which means code generation each time etc so I do need some standard eclipse way to achieve this "margin:Nx auto" cause if I use css editor directly I can get as I was saying margin-right: auto; margin-left: auto but maybe I choose wrong options? – cbhogf Jun 14 '16 at 17:00
The CSS you give in your answer is the shorten one and it doesn't give preview in eclipse web editor (I tested); Anyways playing around eclipse css editor seems like I could figure out same effect with the editor; The jsf panelgrid in this case has style as : ; The mentioned style centers table B in table's A cell :) Thanks – cbhogf Jun 15 '16 at 14:02

Align nested h:panelGrid in center

1 Answers1