2

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 :

enter image description here

and that's what I have in firefox : enter image description here

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

Thanks

Improve this question
3
  • 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
    Commented Jun 14, 2016 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
    Commented Jun 15, 2016 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
    Commented Jun 15, 2016 at 12:16

1 Answer 1

Reset to default
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: enter image description here

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>
Improve this answer
10
  • 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
    Commented Jun 14, 2016 at 14:21
  • p.s. I am trying to use eclipse web editor css editor to align;
    – cbhogf
    Commented Jun 14, 2016 at 14:24
  • Can you advise how to set all the mentioned align with eclipse tooling;
    – cbhogf
    Commented Jun 14, 2016 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
    Commented Jun 14, 2016 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 <h:panelGrid id="A" border="1" columns="1" style="width: 100%; height: 235px; text-align: center; vertical-align: middle; display: table; margin-right: auto; margin-left: auto"> give me a tip please
    – cbhogf
    Commented Jun 14, 2016 at 15:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.