This discussion is archived
3 Replies Latest reply: Dec 28, 2012 12:31 PM by fac586 RSS

Apex 4.2.1: Region table layout and pagination

VANJ Journeyer
Currently Being Moderated
See https://apex.oracle.com/pls/apex/f?p=57688:2

Theme 24, table-based layout. Page template = One Level Tabs, Left Sidebar.

All 4 regions are report regions using the report region and 2-column portlet as the region and report templates respectively.

Regions 1.1 and 1.2 are supposed to be in the same row in different columns so 1.1 has New Grid=Yes and 1.2 has New Column=Yes. Ditto for 2.1 and 2.2

1. Trial and error shows that simply changing the Pagination of report region 1.1 from None to Bottom-Right causes the layout to shift such that 1.2 moves to a grid row by itself! What is going on here? Surely a "trivial" change like whether pagination is displayed or not shouldn't cause such a major layout change. Am I missing something?

2. Regions 2.1 and 2.2 stick together. How can we add some breathing room between them?

3. If the page template is changed to One Level Tabs, No Sidebar, the behaviour changes. All the regions are rendered in 1 column, ignoring the New Column grid layout setting. Why is this?

4. In general, with all the layout changes in 4.x, I was under the impression that, when using a HTML Table based page template, simply using the New Grid/New Row/New Column, etc attributes on the Region attributes would be sufficient to build pages with intuitive, declarative layouts with arbitrary "boxes" laid out on the page, regardless of the content/region type. But that doesn't appear to be the case.

Can some CSS expert (here's looking at you, Paul) please share some insights on how all this works?

Thanks
  • 1. Re: Apex 4.2.1: Region table layout and pagination
    fac586 Guru
    Currently Being Moderated
    VANJ wrote:

    Can some CSS expert (here's looking at you, Paul) please share some insights on how all this works?
    Hi Vikas
    Regions 1.1 and 1.2 are supposed to be in the same row in different columns so 1.1 has New Grid=Yes and 1.2 has New Column=Yes. Ditto for 2.1 and 2.2
    With table-based region layout I'm getting a Column number selector rather than a New Column switch.
    1. Trial and error shows that simply changing the Pagination of report region 1.1 from None to Bottom-Right causes the layout to shift such that 1.2 moves to a grid row by itself! What is going on here? Surely a "trivial" change like whether pagination is displayed or not shouldn't cause such a major layout change. Am I missing something?
    No abstruse CSS here, just Pagination Sub-template and table-less layouts coming home to roost.

    Unlike the majority of report templates, the 2-column portlet report template doesn't have an outer HTML <tt>table</tt> to act as a container for the engine-generated pagination <tt>tr</tt>. The pagination row is thus treated by the browser as starting a new row in the current open table&mdash;the region layout. Having the pagination <tt>tr</tt> injected into the 2-column portlet source turns it into tag soup. The whole thing spectacularly fails HTML validation.

    I expect the official Oracle line is that 2-column portlet reports are not supposed to use pagination.
    2. Regions 2.1 and 2.2 stick together. How can we add some breathing room between them?
    Add this rule to the page Inline CSS. This will add some space on the left of all region cells except the first in the row.
    .regionlayout td+td {
      padding-left: 10px;
    }
    3. If the page template is changed to One Level Tabs, No Sidebar, the behaviour changes. All the regions are rendered in 1 column, ignoring the New Column grid layout setting. Why is this?
    If this is the layout shown in your link above then I'm not reproducing it. Can you upload an export of your app and provide a link to it?
  • 2. Re: Apex 4.2.1: Region table layout and pagination
    VANJ Journeyer
    Currently Being Moderated
    The region definition page (4000:4651) has the following attributes under Grid Layout http://screencast.com/t/tPxlw54I so you are right, I meant Column=2 (instead of New Column=Yes)
    I expect the official Oracle line is that 2-column portlet reports are not supposed to use pagination.
    Fair enough as far as 2-column portlets go but I could have a regular report region using pagination with partial page refresh, it is a shame that the pagination adversely affects layout. Can someone from the Oracle APEX team please look into fixing this?
    If this is the layout shown in your link above then I'm not reproducing it. Can you upload an export of your app and provide a link to it?
    See https://apex.oracle.com/pls/apex/f?p=57688:3 I copied the page and just changed the page template to One Level Tabs - No Sidebar. Sorry, the grid layout is fine but notice how the 2 columns in the portlet are squished together? What's that about?

    As always, thanks for your guidance.
  • 3. Re: Apex 4.2.1: Region table layout and pagination
    fac586 Guru
    Currently Being Moderated
    VANJ wrote:
    If this is the layout shown in your link above then I'm not reproducing it. Can you upload an export of your app and provide a link to it?
    See https://apex.oracle.com/pls/apex/f?p=57688:3 I copied the page and just changed the page template to One Level Tabs - No Sidebar.
    Yes, that's what I was seeing.
    Sorry, the grid layout is fine but notice how the 2 columns in the portlet are squished together? What's that about?
    The One Level Tabs, Left Sidebar page template has Region Table Attributes defined for HTML Table layout:
    summary="" cellpadding="0" border="0" cellspacing="0" width="100%"
    The One Level Tabs - No Sidebar template does not.

    In the One Level Tabs, Left Sidebar page, the <tt>width="100%"</tt> attribute stretches the layout table to fill the width of the container. This means that the width of the columns in a 2 column layout is roughly 50% of the available space. The 2-Column Portlet regions fill this width, and the value heading column of the portlet utilises 80% of it:
    ul.uValuePairs li span.uValueHeading {
      width: 80%;
    }
    The value column is absolutely positioned against the right edge of the portlet:
    ul.uValuePairs li span.uValue {
      font-weight: bold;
      position: absolute;
      right: 0;
      top: 0;
    }
    In the One Level Tabs, Left Sidebar page, no width is set for the layout table. Its width is therefore determined by its contents, which with the data in this example is not very wide at all. For the heading width, 80% of not a lot is even less: insufficient for there to be any space between the heading and the value positioned at the right edge of a very narrow portlet. You'll see some difference if headings longer than "c1" are used.

    The fix is obviously to define the same Region Table Attributes Grid Layout property in the One Level Tabs, Left Sidebar template as is used in the One Level Tabs, Left Sidebar.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points