10 Replies Latest reply: Mar 8, 2013 5:47 AM by Gus C RSS

    Tabbed Navigation List Width

    Gus C
      Apex 3.2

      For our navigation in our application, we moved away from tabs and started to use a Tabbed Navigation List.
      This list is now starting to get a bit long and is extending bigger than the screen, so the user has to scroll across.
      I have seen with tabs, that if the tabs are too big for the screen, then they are displayed on a new line.
      Is this possible with a Tabbed Navigation List ?

      We place the list on our page zero
      User Interface Template - No Template
      Display Point Page Template Region Position 1

      I have tried using width="700px" in the Region Attributes, but made no difference.

      Cheers

      Gus
        • 1. Re: Tabbed Navigation List Width
          fac586
          Gus C wrote:
          Apex 3.2

          For our navigation in our application, we moved away from tabs and started to use a Tabbed Navigation List.
          This list is now starting to get a bit long and is extending bigger than the screen, so the user has to scroll across.
          I have seen with tabs, that if the tabs are too big for the screen, then they are displayed on a new line.
          Is this possible with a Tabbed Navigation List ?
          As usual, the answer is "It depends".
          We place the list on our page zero
          User Interface Template - No Template
          That's likely to be part of the problem. "No Template" means there's no HTML container for the region width to be applied to. First thing would be to try using a "Region without Buttons and Title" (or equivalent) with a region width.
          Display Point Page Template Region Position 1
          Theme?

          List template?
          I have tried using width="700px" in the Region Attributes, but made no difference.
          That's a mixture of an HTML attribute and a CSS value. With a suitable template it might work in some browsers, but it's invalid in a number of ways. You should use CSS for this. I won't have access to 3.2 for about 12 hours, and don't recall exactly what region attributes are available. I don't think 3.2 has a real Region Attributes property as opposed to Region HTML table cell attributes ?
          • 2. Re: Tabbed Navigation List Width
            Gus C
            Theme 15: Light Blue
            Template: Tabbed Navigation List

            Tried applying a Region without Buttons and Title and then added the width.
            style="width:500px"
            It made no diference


            Gus
            • 3. Re: Tabbed Navigation List Width
              fac586
              Gus C wrote:
              Theme 15: Light Blue
              Template: Tabbed Navigation List
              I won't be able to reproduce until after 2000GMT tonight. It's not exactly the same but if you reproduce on apex.oracle.com using an export of the 3.2 theme 15, not the built-in 4.2 one, then possibly someone might be able to help.
              Tried applying a Region without Buttons and Title and then added the width.
              style="width:500px"
              It made no diference
              Where did you add it?
              • 4. Re: Tabbed Navigation List Width
                Gus C
                I added the width to
                Region Attributes

                Gus
                • 5. Re: Tabbed Navigation List Width
                  fac586
                  Gus C wrote:
                  I added the width to
                  Region Attributes
                  Does it appear in the rendered HTML? Is there a <tt>#REGION_ATTRIBUTES#</tt> substitution string in the region template?
                  • 6. Re: Tabbed Navigation List Width
                    Gus C
                    No the attribute is not in the template.
                    Not sure where to put it in the template

                    Gus
                    • 7. Re: Tabbed Navigation List Width
                      fac586
                      Gus C wrote:
                      No the attribute is not in the template.
                      Not sure where to put it in the template
                      In the opening tag of the outer element of the template. This is the 4.2 theme 15 Region without Buttons and Titles template:
                      <table summary="" cellpadding="0" cellspacing="0" border="0" class="t15RegionwithoutButtonsandTitles" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
                      <tr>
                      <td class="t15Body">#BODY#</td>
                      </tr>
                      </table>
                      • 8. Re: Tabbed Navigation List Width
                        Gus C
                        Sorry, I was a bit confused.
                        Theme 15 Region without Buttons and Titles template does have the #REGION_ATTRIBUTES# tag,
                        but as I said before adding the style to the region attributes made no difference.

                        There is no #REGION_ATTRIBUTES# in the tabbed navigation list.

                        Gus
                        • 9. Re: Tabbed Navigation List Width
                          fac586
                          Gus C wrote:
                          Sorry, I was a bit confused.
                          Theme 15 Region without Buttons and Titles template does have the #REGION_ATTRIBUTES# tag,
                          but as I said before adding the style to the region attributes made no difference.

                          There is no #REGION_ATTRIBUTES# in the tabbed navigation list.
                          There wouldn't be. It is not a region template.

                          The problem is that despite the name (big hint there Oracle), the theme 15 Tabbed Navigation List template is based on a single row HTML table, not a real list element. All of the list's containers are also tables. HTML tables expand to fit their content, so they will ignore all attempts to constrain their width using CSS (except where doing so would also hide content, which is not a workable solution in this case), nor will they automatically flow to a new line. (I also notice that when I attempt to reproduce this on apex.oracle.com the resulting list looks nothing like "tabs": what are you seeing?)

                          You've basically hit the limit of what it is possible to have visible on the screen without scrolling using this APEX version/theme/template. You could copy a real list-based template from another theme (or create one from scratch) so it would flow to multiple lines automatically.

                          However this might indicate that it's time for a rethink of your navigation mechanisms. Consider using vertical rather than horizontal lists, or multiple levels of tabs/lists?
                          • 10. Re: Tabbed Navigation List Width
                            Gus C
                            Yes, maybe a re-think

                            Thanks for all your help

                            Gus