5 Replies Latest reply on Oct 16, 2013 5:03 PM by jeremy_hull

    How to force af:gridCell to stretch?

    ILya Cyclone

      Hello. I have a little complicated layout requirement and I decided to use af:panelGridLayout.

      Let's say I have this kind of table:


      Header 1Header 2Header 3


      There is a cell in which TEXT is located and I need to set a background color of this cell.

      But when I set this af:gridCell background or border I can see that in fact the cell is not stretched but only surrounds its content - so the background is only behind TEXT but not whole cell space.


      How do I force the cell to stretch so I could set background for the whole table cell?





        • 1. Re: How to force af:gridCell to stretch?
          Frank Nimphius-Oracle



          from the tag documentation:


          Geometry Management

          • This component must be a child of a gridRow; it is not valid to use a gridCell inside of another kind of layout container.
          • This component can stretch a child component if (1) it is the only component inside of the gridCell, (2) the cell's "halign" is "stretch", (3) the cell's "valign" is "stretch", (4) the effective width of the cell is non-auto, and (5) if the effective height of the cell is non-auto.
          • Use only non-geometry style properties like background-color; some of the invalid style (e.g. inlineStyle) properties for a gridCell include width, height, position, display, margin, etc. because the geometry must be managed by the grid structure instead.
          • Beware that if you attempt to use width="auto", halign="center", halign="end" in conjunction with cell content that uses unstable, percentage-based widths, you may experience different results in different browsers. If you wish to use these settings, be sure to constraint the width of that cell content.


          So the problem is less that the cell doesn't stretch but that the text field doesn't want to be stretched. Can you surround the text field with a panelLabelAndMessage component and apply the background color to this component ?



          • 2. Re: How to force af:gridCell to stretch?
            ILya Cyclone

            Surrounded text with plam. Same result: background is only around actual content.


            <af:gridCell marginStart="0px" width="100px" id="gc12" columnSpan="4" halign="stretch"
                                            <af:panelLabelAndMessage label="Label 1" id="plam1"
                                                                     inlineStyle="background-color: #7baab8;">
                                                <af:outputText value="TEXT" id="ot7"/>


            columnSpan doesn't change anything.

            • 3. Re: How to force af:gridCell to stretch?
              ILya Cyclone

              Tried with vertical panelGroupLayout instead of plam and it gives better result. Now the obstacle is higher cells which do not stretch again! Oh boy. I'll try to manage it.


              What would be correct width value for the cell that should take all the space that is left after all other cells with fixed width?

              It has "width=100%", "stretch" for halign and valign, vertical panelGroupLayout inside and doesn't want to stretch again.


              I don't know how is it calculating its width currently because now its content text exceeds its border!

              I have exactly the same look now: http://goo.gl/nkm4sU

              • 4. Re: How to force af:gridCell to stretch?
                ILya Cyclone

                af:panelGridLayout is THE MOST AWFUL component in ADF Faces.

                It is absolutely unusable and useless.


                If you read this.

                Don't waste your time.

                Grab a bunch of panelStreches and go on.

                • 5. Re: How to force af:gridCell to stretch?

                  PanelGrid is the layout to go forward with, it's worth learning only due to the power compared to psl, but it also will gain future performance gains with no changes on your part. It's easier than gridBag with Swing, so we are lucky in that respect. When all the browsers implement CSS grid, and the View team gets that done, you will get big performance gains on the client, since that component is currently laid out in client js. I can understand your frustration with panelGrid, and I submitted a few bugs against it when I started using it because my expectations were incorrect. PanelStretch will probably never be removed, but it will also never be improved.


                  What you want to do is on the component demo, so it might be worth it to push through. If you plan on doing mobile ADF, you don't have psl, another benefit of knowing the grid.


                  gridCell Demo