APEX Theme 25 - Responsive Grid Layout Question

Question

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

Answer 1

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: NoYou 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