horizontalMargin option to match verticalMargin we have today

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.

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.

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.

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)).

@adumesny

@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!

@radiolips

@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!)

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>

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...

horizontalMargin

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

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

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

@crapthings

@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.

@crapthings

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.

@otionstem

Has anyone found a workaround for this yet?

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

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

.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;
}

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

@susilon

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;
}

TS: gridstack#723 gridstack#726 `margin` to replace `verticalMargin`

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

Merge pull request #1308 from adumesny/typescript

@adumesny

@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 ?

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

@adumesny

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?

Navigation Menu

Repository navigation

horizontalMargin option to match verticalMargin we have today #723

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

horizontalMargin option to match verticalMargin we have today #723

Description

Activity

kool-kat commented on Jul 22, 2017

kool-kat commented on Jul 27, 2017

adumesny commented on Aug 1, 2017

radiolips commented on Sep 5, 2017

adumesny commented on Sep 5, 2017

steacktartar commented on Dec 19, 2017

ataft commented on Nov 13, 2018

geopamplona commented on May 8, 2019

otionstem commented on Jul 3, 2019

crapthings commented on Oct 16, 2019

david-offord commented on Nov 1, 2019

adumesny commented on Dec 21, 2019

ataft commented on Mar 19, 2020

killjoy99nz commented on Apr 28, 2020

susilon commented on Apr 29, 2020

killjoy99nz commented on Apr 30, 2020

ataft commented on May 6, 2020

adumesny commented on Jul 7, 2020

husseinterek commented on Jul 27, 2020

adumesny commented on Jul 28, 2020

husseinterek commented on Jul 28, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions