7 Replies Latest reply: Mar 19, 2013 8:52 AM by BillC RSS

    APEX Theme 25 - Responsive Grid Layout Question

    BillC
      Hi

      What is the best way to control an item to be positioned right next to the other item on the same row.

      I have a select list that I would like to have an edit button right next to it.
      I created two items for example:
      P_MY_SELECT_LIST Grid set New Line to Yes, Auto
      P_MY_EDIT_LINK Grid set New Line to No, Auto

      But it is not doing what I expected.. what am I missing?

      When it was tables not divs I had no trouble but now I need to learn the kep to using the Grid.

      When I hard code the edit in the Post Element of the item it works great with 2 spaces... but I can't control the item by the AUTH Scheme. I don't want them to show up unless you have the proper role.

      Plus, I want to learn the new 4.2 way!

      Thanks, Bill
        • 1. Re: APEX Theme 25 - Responsive Grid Layout Question
          Patrick Wolf-Oracle
          Hi Bill,

          you haven't explained what the outcome was? Is it displayed below each other, ...? The easiest would be if you provide an example on apex.oracle.com so that we can play with it.

          Regards
          Patrick
          -----------
          Member of the APEX development team
          My Blog: http://www.inside-oracle-apex.com
          APEX Plug-Ins: http://apex.oracle.com/plugins
          Twitter: http://www.twitter.com/patrickwolf
          • 2. Re: APEX Theme 25 - Responsive Grid Layout Question
            scott.wesley
            I think I might be exploring similar issues - perhaps he's talking about overlapping fields/labels, or regions cutting off items.

            I opened a similar thread the previous day asking about grid properties.
            "Show grid" feature - green vs red

            At risk of highjacking Bill's thread here, I think we might be asking the same questions and I've drafted an example
            http://apex.oracle.com/pls/apex/f?p=73000:9:11167071041078::NO:::

            First, how might we make the checkboxes closer neighbours if on same row?

            An in regard to responsiveness - setting this page 900px wide makes:
            - Password label overlap with username field
            - Location item cut in half
            - Customer report obscured

            Scott
            • 3. Re: APEX Theme 25 - Responsive Grid Layout Question
              MalcA
              I've been stuggling with the same issue, there are more discussions here too:

              Re: Theme 25 - Overlapping form fields
              http://everythingapex.blogspot.com/2013/01/a-response-to-responsive-design-in-apex.html

              regards,
              Malcolm.
              • 4. Re: APEX Theme 25 - Responsive Grid Layout Question
                Patrick Wolf-Oracle
                Hi Scott,

                making the checkboxes closer neighbors is easy, just remove the "Auto" Column Span calculation from P9_PRODUCTS, because that will try to balance the used grid columns among all page items on that grid row. I have changed it to Column Span = 1 and they do now show up closer to each other.

                About the other questions/issues, I will forward the thread to our CSS wiz Shakeeb.

                Regards
                Patrick
                -----------
                Member of the APEX development team
                My Blog: http://www.inside-oracle-apex.com
                APEX Plug-Ins: http://apex.oracle.com/plugins
                Twitter: http://www.twitter.com/patrickwolf
                • 5. Re: APEX Theme 25 - Responsive Grid Layout Question
                  ShakeebR
                  Hi Scott, Bill,

                  Because Theme 25 relies on grid for most of it's positioning, it is difficult to do accomplish what was sometimes much simpler when using the tables approach for form layouts. This also happens to be one of the biggest issues with Theme 25: proper form and label positioning.

                  If we look back to using tables for form layout we would see that a structure would be created immediately when we started laying out items. Because of the way tables behave, whatever the size of your first label was controlled the width of that cell, and the cells below it. Meaning all of your labels would line up, but only take the space necessary to fit your label.

                  However, with a div-based grid, this is no longer possible. There is no structured set of cells that grow / contract together as there are in tables. Because of this, it is difficult to determine the width of a given container and apply that same width to others (for example, picking up your largest label, and applying the width of that label container to the other labels which are below).

                  One way to go around this problem, and what we've done in Theme 25, is to used fixed-width labels. So we explicitly set the width of labels, and that makes the layout much more predictable. We know that labels will always be a certain width, and that input fields that follow will begin from the same position. However, this is very different from how forms in tables work:

                  1. All labels are the same size, so even if a label is very small, or very large, it will take the same space.
                  2. We can no longer align two items be right next to each other without using grids.
                  3. When using grids, we have to be mindful of the label's fixed width as it can be larger than the column it is contained in.

                  We're working on a cleaner approach to this problem so creating responsive applications and laying form items is easier than it currently is. In the meantime, you can override several styles to help your particular use case.

                  Here are just a few styles you can apply to your page to get form alignment to behave (with a specified region static id):

                  1. Manually setting the widths of labels for a given region:
                  #my_region div.fieldContainer.horizontal>label {
                      width: 80px;
                  }
                  #my_region div.fieldContainer.horizontal div.fieldControls {
                      /* width above + 16px spacing */
                      margin-left: 96px;
                  }
                  2. Set Label widths to only take up the space they need:
                  #my_region div.fieldContainer.horizontal>label {
                      float: none;
                      width: auto;
                  }
                  #my_region div.fieldContainer.horizontal div.fieldControls {
                      margin-left: 0;
                      display: inline-block;
                  }
                  3. You can allow fields to float left:
                  a. Add to your inline CSS:
                  #my_region div.fieldContainer {float: left;}
                  b. Set grid layout attributes for your second item as follows:
                  Start New Row: No
                  Column: Automatic
                  New Column: No
                  You can combine these together as well. For example, applying styles #2 and #3 will let you position elements side by side and immediately after each other.

                  ---

                  Scott,

                  For some of your issues in particular, here are some possible ways to go around them:

                  1. Password field being cut off
                  In addition to setting the size of the field to 60, you can apply an inline style to control the width by setting the HTML Form Element Attributes field to:
                  style="max-width: 100%;"
                  This will restrict the size of input field to be a maximum of 100% of it's container, and should no longer be hidden when your window is resized.

                  2. Customer Report obscured
                  You can add an inline style to your page header to set this region's content to scroll. For example giving it a static id of my_region and adding the following to your page's inline css field:
                  #my_region section.uRegion>div.uRegionContent {overflow: auto;} 
                  Hope this helps!
                  Shakeeb
                  • 6. Re: APEX Theme 25 - Responsive Grid Layout Question
                    scott.wesley
                    Thanks, Shakeeb - that looks like valuable information that I will explore & experiment with - and bookmark!

                    Good move also sharing it on your blog - I think this will be a popular response.

                    Scott
                    • 7. Re: APEX Theme 25 - Responsive Grid Layout Question
                      BillC
                      Sorry guys, I wasn't getting emails on this so I didn't know I had answers...
                      I will get it up to the APEX Site

                      And Shakeeb! That is great stuff! Thanks.. I will try that in my app.

                      I need to learn how to manipulate this new Responsive stuff!
                      Thanks
                      Bill

                      Edited by: BillC on Mar 19, 2013 8:51 AM