-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
horizontalMargin option to match verticalMargin we have today #723
Comments
Update: Manually changing the LEFT and RIGHT values for the CSS classes:
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)). |
@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.
|
Setting the |
Is this parameter not yet added? |
|
@crapthings I think one solution is to set this css: .grid-stack > .grid-stack-item > .grid-stack-item-content { |
now that I'm familiar with the code base I see why there isn't a 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. |
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. |
Added this too |
Thanks for that. With those style changes, it's looking much better. |
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:
|
* complete re-write how we size/position items dealing with margin * we now have a single `margin` grid option which will set all 4 sides instead of one in code nad one in CSS * also have `marginTop/Bottom/Left/Right` if more precise setting is required * greatly reduced the layout code as margin are now inside the grid-item (affects content) * fixed code so `cellHeight: 'auto'` (now the default) will create real square cells (used to be off due to margin) * grid will now have consistant spacing (above/below first/last rows)
@adumesny how can I use the margin attribute in gridstack.all.js (V.1.1.2)? |
sorry, you will have to wait for 2.x as it was a bit of code change and not back porting to 1.x |
Thanks @adumesny for the quick reply. |
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.
The text was updated successfully, but these errors were encountered: