2 Replies Latest reply on Jan 14, 2019 11:30 AM by fac586

    Global items layout question

    Sgodavar-Oracle

      I'm using APEX 18.2. I have an existing application with a top navigation menu. The user requirement is to have  5 conditional select lists in the page #0, so that some of the select lists are conditionally displayed on various pages in the app at the top, just below the top navigation menu. On some pages, only one select list, other pages may have different number of select lists displayed. But, the problem is, on some page, when select list 1 and 5 are displayed , then there is huge gap between select lists, similarly big gaps between global page items in other combinations. Is there way nice consistent way to display them with nice little top bar just below the navigation menu, so that select lists are displayed properly. any ideas are appreciated. thanks for your help.

        • 1. Re: Global items layout question
          fac586

          Sgodavar-Oracle wrote:

           

          I'm using APEX 18.2. I have an existing application with a top navigation menu. The user requirement is to have 5 conditional select lists in the page #0, so that some of the select lists are conditionally displayed on various pages in the app at the top, just below the top navigation menu. On some pages, only one select list, other pages may have different number of select lists displayed. But, the problem is, on some page, when select list 1 and 5 are displayed , then there is huge gap between select lists, similarly big gaps between global page items in other combinations. Is there way nice consistent way to display them with nice little top bar just below the navigation menu, so that select lists are displayed properly. any ideas are appreciated. 

          It depends.

           

          • Theme?
          • Theme style?
          • Page template?
          • Region position?
          • Region template?
          • Region template options?
          • Item template(s)?
          • Item template options?
          • Item grid layout settings?

           

          What would really be appreciated for all of these layout problems are shared examples on apex.oracle.com that we can experiment with.

          • 2. Re: Global items layout question
            fac586

            Sgodavar-Oracle wrote:

             

            I'm using APEX 18.2. I have an existing application with a top navigation menu. The user requirement is to have 5 conditional select lists in the page #0, so that some of the select lists are conditionally displayed on various pages in the app at the top, just below the top navigation menu. On some pages, only one select list, other pages may have different number of select lists displayed. But, the problem is, on some page, when select list 1 and 5 are displayed , then there is huge gap between select lists, similarly big gaps between global page items in other combinations. Is there way nice consistent way to display them with nice little top bar just below the navigation menu, so that select lists are displayed properly. any ideas are appreciated. thanks for your help.

            I have tried this out and don't see why there would be any problem. I have created a couple of examples, and when appropriate template and grid layout settings are used there is no evidence of "huge/big gaps".

             

            Use the checkbox options to create pseudo "conditions" to control which select lists are displayed.

             

            Page 1 uses a completely standard Standard page/Content Body/Standard region combination.

             

            The select lists defined on the global page are displayed in the Content Body position at the top of the page immediately below the top navigation menu. The rendering is responsive, balanced, and flexible: the displayed controls expand to fit the columns available.

             

            The region and item settings are:

             

            • Region
              • Sequence: 0
              • Position: Content Body
              • Template: Standard
              • Template Options:
                • General:
                  • Use Template Defaults: Yes
                  • Remove Body Padding: Yes
                • Header: Hidden but accessible
                • Style: Remove UI Decoration
                • Item Padding: Default
                • Item Size: Default
                • Item Width: Stretch Form Fields
            • Items
              • Start New Row: No
              • Column: Automatic
              • New Column: Yes
              • Column Span: Automatic
              • Template: Optional - Floating
              • Template Options:
                • General:
                  • Use Template Defaults: Yes

             

            Page 2 uses a Custom page/Breadcrumb Bar/Standard region combination. The custom page template enables the select lists to be displayed in multiple columns in the Breadcrumb Bar position, which has the benefit of keeping them permanently visible in a fixed position as page content scrolls below.

             

            The global select lists are displayed in the Breadcrumb Bar position at the top of the page immediately below the top navigation menu. The rendering is responsive, but the controls are assigned a fixed column width to reflect different display value lengths.

             

            The page, region, and item settings are:

             

            • Page Template
              • Create a custom page template named Standard + Breadcrumb Bar grid as a copy of the Standard page template.
              • Edit the Display Point settings for the Breadcrumb Bar/REGION_POSITION_01 point in the new template:
                • Grid Support: Yes
                • Maximum Fixed Grid Columns: 12
              • Edit the Theme and change the Component Defaults (this is unfortunately necessary due to limitations in how APEX renders global page items):
                • Page: Standard + Breadcrumb Bar grid
            • Page
              • Page Template: Theme Default or Standard + Breadcrumb Bar grid
            • Region
              • Sequence: 0
              • Position: Breadcrumb Bar
              • Template: Standard
              • Template Options:
                • General:
                  • Use Template Defaults: Yes
                • Header: Hidden but accessible
                • Style: Remove Borders
                • Item Padding: Slim Padding
                • Item Size: Default
                • Item Width: Stretch Form Fields
                • Bottom Margin: None
            • Items
              • Start New Row: No
              • Column: Automatic
              • New Column: Yes
              • Column Span:
                • Items 1, 3 & 4: 2
                • Item 2: 1
                • Item 5: 3
              • Template: Optional - Above
              • Template Options:
                • General:
                  • Use Template Defaults: Yes

             

            The application can be downloaded for detailed review from the App Export link on the navigation bar.