horizontalMargin option to match verticalMargin we have today

[kool-kat]

Hoping this is an easy one.

Reading the api docs I see a parameter verticalMargin.

Setting this to zero removes the vertical 'Y-axis' gaps between grid items but horizontal gaps remain.

I did a quick scan through all parameters etc but couldn't locate an option to drop margins on x-axis.

Pointers please.

[kool-kat]

Update:

Manually changing the LEFT and RIGHT values for the CSS classes:

.grid-stack .grid-stack-placeholder > .placeholder-content
.grid-stack > .grid-stack-item > .grid-stack-item-content

Allows for some changes in horizontal guttering between grid items but not as easy to change as with function options.

Also the visual result is different as the gutters are applied differently. Vertical margin doesn't apply any gutter at bottom or top of grid, but the classes create insert gaps at left and right of grid.

[kool-kat]

Would be great to have the gutter/margins between grid elements on X and Y-axis BOTH styled and applied to the grid elements the same way.

Add horizMargin parameter please and apply the margins on the inside of the grid (like you have with verticalMargin).

We can then choose to set grid left, top, bottom and right margins as we need in CSS.

Thanks for considering this request.

[adumesny]

I too find it weird we only have verticalMargin. I will soon need horizontalMargin (to set both to 0 or 1px for tight layout parent grids (inside more roomy grids)).

[radiolips]

@adumesny @kool-kat I'll add horizontalMargin to the list of features to add. I recall there being a reason why we didn't implement it, but for now consider it planned!

[adumesny]

@radiolips maybe it should be a single margin field to control them both (not sure why you would want one but not the other... for now I'm able to control horizontal margin using CSS (while vertical is in code!)

[steacktartar]

In my case, simply including a left:0px in the grid-stack-item-content div element did the trick.

<div class="grid-stack-item" id="grid6" width="300" height="300" data-gs-x="9" data-gs-y="4" data-gs-width="3" data-gs-height="4">
            <div class="grid-stack-item-content" id="events" width="300" height="300" style="border-width:1px; border-style:solid dotted;left:0px"></div>
</div>

[ataft]

Setting the grid-stack-item-content css to left:0 makes the resize handle appear 10px inside the left box. It seems like this logic needs to be fixed in the code base for all things to work properly together...

[geopamplona]

horizontalMargin

Is this parameter not yet added?
How could I achieve similar functionality?
Thank you

[otionstem]

.grid-stack .grid-stack-placeholder > .placeholder-content {
  left: 2px;
  right: 2px;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  left: 2px;
  right: 2px;
}

[crapthings]

i don't have horizontalMargin by default? what's wrong?

[david-offord]

@crapthings I think one solution is to set this css:

.grid-stack > .grid-stack-item > .grid-stack-item-content {
left: 4px !important;
right: 4px !important;
}
This can also be used to change the space between 2 items horizontally.

[adumesny]

now that I'm familiar with the code base I see why there isn't a horizontalMargin param like verticalMargin. The widths are all done in CSS as 100 / # column for each with inside padding done in CSS as well, whereas vertical position are pixels in code (cellHeight + verticalMargin).

that said there is no reason we can't have a param and set the CSS rule, and exclude the first and last end point from having that padding, or modify vertical to have padding on both ends to match.

not a trivial fix to fix all the logic as well... changing subject to make it clearer.

@crapthings what you're seeing is a different bug I believe to be fixed now. I ran into case boxes would overlap as we didn't set the attributes (used for CSS layout) sometimes. especially empty default items.