Angular-gridster2: Outer margin for each dimension

[klemenoslaj]

Would it be possible to implement outer margin in a way, that margin of each dimension would be separately adjustable?

Like in css margin: 20px 20px 40px 20px;

[tiberiuzuld]

Hi @klemenoslaj ,
Yes it is possible.
Not easy to implement it.
The question is why do you need something like this?
Why you don't add it to the gridster element outside from css?
Like if you want 20px extra margin to bottom:

gridster{
 margin-bottom: 20px;
}

[klemenoslaj]

Yes this is what I currently have, but that looks ugly.
The UI requirements are, that padding should be inside scroll area, not outside, which makes sense, because you will then see padding only when you reach bottom of scroll area, and not all the time.

[tiberiuzuld]

Will think about it, and maybe implement it this weekend.

[tiberiuzuld]

Ok so I had a try to implement this.
I remembered why I implement the outer margin as margin on the elements.
Browsers don't seem to like to combinations of padding, scroll and position absolute children.
If you add padding on the gridster element the scroll will just ignore it. Since the scroll only cares about where the last child ends.

But managed to do it on gridster-item eventually.

Probably will move to gridster element padding after I switch to CSS Grid.

[tiberiuzuld]

Added in v4.6.0

[klemenoslaj]

Yes indeed, this behavior is not consistent between all the browsers.

thanks!

[klemenoslaj]

Hi @tiberiuzuld.

I am sorry to have come back to this issue, but since my latest update the behavior of outer margins was changed, because now gridster2 uses padding for outer margin.

That breaks scrolling in gridster as you mentioned in comment above:

If you add padding on the gridster element the scroll will just ignore it. Since the scroll only cares about where the last child ends.

Steps to reproduce:

1. Set gridType to GridType.Fixed
2. Set outerMargin to true
3. Set outerMarginBottom to 100
4. Scroll down, and 100px space is cut

Or even simpler:

1. Go to demo page and set gridType to Fixed
2. Add more gridster items to the bottom so that you get big height
3. Inspect <gridster> element
4. Scroll down, and 10px space is cut

Will you open this existing issue or should I create a new one?

[tiberiuzuld]

Opened a new issue.
https://github.com/tiberiuzuld/angular-gridster2/issues/286

[klemenoslaj]

Thanks @tiberiuzuld!