Grid not working within a container that has padding or a border

I'm struggling a bit with how the GRID is behaving. I have 2 containers and I want to give them a width of 8 columns and 4 columns.

However when they are in an element that had padding or has a border, the 2 containers end up below each other instead of next to each other.

Example is where I use the Style Class CardWhite on the parent container. This adds a border of 1px and 15px padding, resulting in the GRID no longer working.

So when I take off the padding and border of the parent element, it does align next to each other.

Any insight into this?
Grid 4 and 8 next to each other should be able to work within a container (like CardWhite) that had padding and a border right?

Hi Paul.

"Grid 4 and 8 next to each other should be able to work within a container (like CardWhite) that had padding and a border right?"

I don't think so.

The "columns" are translated into classes applied to the elements that have a fixed width in %.
So, anything "extra" like paddings, will break this, forcing you to use some tricks, like reducing the number of columns and working with alignment...

Or switch to use % to take those into consideration... 

Cheers.

EDIT, but this will depend if you are using content-box or border-box (box-size CSS property), and if the element with the padding is an inline or block element.

Eduardo Jauch wrote:

Hi Paul.

"Grid 4 and 8 next to each other should be able to work within a container (like CardWhite) that had padding and a border right?"

I don't think so.

The "columns" are translated into classes applied to the elements that have a fixed width in %.
So, anything "extra" like paddings, will break this, forcing you to use some tricks, like reducing the number of columns and working with alignment...

Or switch to use % to take those into consideration... 

Cheers.

EDIT, but this will depend if you are using content-box or border-box (box-size CSS property), and if the element with the padding is an inline or block element.

That's very unfortunate.
So what would be a solution if you want to have one container aligned left and the other aligned right?
Reducing the number of columns won't work to achieve this.


Hi,

If your padding is in %, use % instead of columns.

If your padding is in px, I would try to position the out div using relative (no changes in top, bottom, left and right) and position using absolute the div's inside them to left and to right, so that even if there is "more space" between them, they are placed in the correct place.

Probably there are other solutions.

Cheers.

Eduardo Jauch wrote:

If your padding is in px, I would try to position the out div using relative (no changes in top, bottom, left and right) and position using absolute the div's inside them to left and to right, so that even if there is "more space" between them, they are placed in the correct place.

Cheers.

Was following your suggestion and this indeed makes the grid columns fall inline again.
in this case I added 

SyntaxEditor Code Snippet

style
"margin-right: -40px; padding-right: 40px;"

It's a dirty solution though, so hope to avoid this as much as possible.


Paul. wrote:

Was following your suggestion and this indeed makes the grid columns fall inline again.
in this case I added 

SyntaxEditor Code Snippet

style
"margin-right: -40px; padding-right: 40px;"

It's a dirty solution though, so hope to avoid this as much as possible.


It will fail because you are still using the 8 / 4 columns, and they don't fit. The solution still requires to use a lesser width. Using a margin/padding setting will do the trick, indeed, but in this case, I would not set the size of the inner div's at all and use positioning to put them at the left and right of the out div. 

Cheers


Eduardo Jauch wrote:

I would not set the size of the inner div's at all and use positioning to put them at the left and right of the out div. 

Cheers

Ok I understood differently that that is what you suggested.
Can you give a code example of what you propose?

Which version are you working on? (did you try to remove margins in the inner divs?)

I just tried in OS11 (with OutSystems UI), putting two divs inside another one (that has padding), and everything worked like a charm. Are you working in OS10 or OS9?

Solution

I'm working on OS10.
I've repeated the coding examples that you also did. And I'm indeed able to get this to work without a problem on both OS11 and OS10 on a clean e-space. So something else was influencing it as well.
When I investigated it, I found out that the theme and grid type were also influencing this behaviour.
I'm using 'LondenFixed' theme with grid type 'Fixed'.

It turns out that this doesn't seem to flow that well when inside a container that has padding or a border.  When I put this to 'Fluid' there is no problem. Putting it to Fluid will however complete change all the screens I have in the application, so I'm just going to keep it like this.
Thanks for thinking with me on this.

Solution

It is nice that you found the reason and sad that you can't really apply the good solution (I understand).
I really never used the Fixed Grid, I think...

Cheers!