Gridstack.js: 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.

[ataft]

Has anyone found a workaround for this yet?

@otionstem's solution will show the horizontal resize handles in the wrong place.

[killjoy99nz]

I'm looking for an elegant solution to this, too. Just starting implementing gridStack and this is the first issue I've run into.

[susilon]

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

Added this too
.grid-stack > .grid-stack-item > .ui-resizable-e {
  right: 2px !important;
}
.grid-stack > .grid-stack-item > .ui-resizable-w {
  left: 2px !important;
}

[killjoy99nz]

Thanks for that. With those style changes, it's looking much better.

[ataft]

Thanks @susilon. I thought I had tried this and ran into problems, but the solution looks good to me.

Depending on your resizable handles, you may need to include more than just east and west. I had to do the following within .grid-stack-item:

.ui-resizable-e, .ui-resizable-se, .ui-resizable-ne {
    right: 3px !important;
}
.ui-resizable-w, .ui-resizable-sw, .ui-resizable-nw {
    left: 3px !important;
}

[adumesny]

this will be fixed in upcoming 2.0 release - as you can see parent grid has 10px margin (default), nested 1px using just the new margin grid option (no external CSS needed) and takes care of resize handles as well.

and another example of 60 columns with 1px spacing

[husseinterek]

@adumesny how can I use the margin attribute in gridstack.all.js (V.1.1.2)?
Can you share any file or I have to wait for V.2.0 ?

[adumesny]

sorry, you will have to wait for 2.x as it was a bit of code change and not back porting to 1.x

[husseinterek]

Thanks @adumesny for the quick reply.
When can we expect the version 2.x?
And do you have any workarround for the horizontal margin on version 1.x?