nested grids in forms

[ogai]

An example of how to use nested grids in a form would be very useful. E.g. (if correct at all):

<div class="ym-fbox">
    <div class="ym-fbox-wrap ym-grid">
        <div class="ym-g50 ym-gl">
            <div class="ym-fbox-wrap ym-grid">
                <div class="ym-g50 ym-gl">
                    <div class="ym-gbox-left ym-fbox-text">
                        <input id="inline1">
                    </div>
                </div>
                <div class="ym-g50 ym-gr">
                    <div class="ym-gbox-right ym-fbox-text">
                        <input id="inline2">
                    </div>
                </div>
            </div>
        <div class="ym-g50 ym-gr">
            <div class="ym-fbox-wrap ym-grid">
                <div class="ym-g50 ym-gl">
                    <div class="ym-gbox-left ym-fbox-text">
                        <input id="inline3">
                    </div>
                </div>
                <div class="ym-g50 ym-gr">
                    <div class="ym-gbox-right ym-fbox-text">
                        <input id="inline4">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[jensgro]

Hi,

your structure is wrong. I made up a little Codepen to show you a nested grid with YAML-forms.

[ogai]

I think this should be reopened for two reasons:

• The example at Codepen has errors:
  • on the second form there is no separation between the second and the third field
  • on the third form the third field is not left-aligned with the field above it
• A good example should be included in the yaml documentation

[michsch]

Hi,

i just forked Jens Codepen because i think there are a few ym-gbox classes missing:

2nd form Correct nesting

We need the ym-gbox classes for the outer grid (50%). At the moment i see two ways:

1. Use another DIV element with the class ym-gbox-left (between line 35 & 36) and ym-gbox-right (between lines 58 & 59) or
2. just add the ym-gbox classes into the existing elements, which also contain the classes ym-fbox-wrap and ym-grid, as i do in the forked Codepen (line 36 and 58). This seems to work, but is not tested in all browsers.

3rd form Idea from Github

It's the same issue as mentioned for the 2nd form with the two options i described. If i add the class ym-gbox-right in line 105 it looks as expected.

[michsch]

Update

I suggest using my option 1. There could be some problems, if an element has the classes ym-grid and ym-gbox-left (or -right) together. The result is an element having padding, display:table and 100% width. This seems to be a creepy combination (with the old standard box model content-box).
So you have to use the additional div for ym-gbox-left and ym-gbox-right.

Alternative: border-box

Use the border-box model and you can remove all the ym-gbox classes and their elements. Don't forget to set the grid padding by yourself if you choose this modern solution.
For old browsers there is the box-sizing-polyfill.

Example:

.ym-gl,
.ym-gr {
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); /* box sizing polyfill */
  padding: 0 4px;
}

.ym-gl:first-child {
  padding-left: 0;
}

.ym-gr {
  padding-right: 0;
}

Example as Codepen

[jensgro]

I overhauled my Pen. It now lacks the example from this ticket, as we all agreed about the not correct code.

I added a new third example which is based on the new box-model (border-box). I also added the used code for demo-purposes as well as the needed Emmet-code.

[michsch]

Hi Jens, why you reopened this issue? It's not a YAML issue.

[jensgro]

It was a request for the documentation. I marked it in this way and we will decide in the future, if there will be examples in the documentation or otherwise.

[michsch]

Ok, that's a reason to have a separate repository only for documentation. Maybe later. ;-)