Skip to content
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

Margin not applied to ui-resizable-s or ui-resizable-n #2577

Closed
tl696 opened this issue Dec 14, 2023 · 0 comments · Fixed by #2580 · May be fixed by Samg217/glpi#8
Closed

Margin not applied to ui-resizable-s or ui-resizable-n #2577

tl696 opened this issue Dec 14, 2023 · 0 comments · Fixed by #2580 · May be fixed by Samg217/glpi#8

Comments

@tl696
Copy link

tl696 commented Dec 14, 2023

Subject of the issue

https://jsfiddle.net/hy6cbLf9/1/

The css of the ui-resizable-s and ui-resizable-n is not taking into account the margin specified like the rest do.

I think the below is missing in gridstack.ts from _updateStyles:

Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-n`, `top: ${top};`);
Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-s`, `bottom: ${bottom}`);

In this example I wanted a dark border highlighting which side of the widget the user will be resizing however there is a noticeable gap due to the following css rule which enforces a 15px buffer around the resizers.

.grid-stack-item>.ui-resizable-e {
cursor: e-resize;
width: 10px;
top: 15px;
bottom: 15px;
}

I think it is visually more pleasing if the border extends to the limits of the widget contents as shown in the below fiddle:

https://jsfiddle.net/hy6cbLf9/3/

I assume this would be possible with the below. The z-index of the diagonal resizers is higher than the horizontal and vertical resizers so I don't think there would be any negatives to extending the positions of the horizontal and vertical resizers to the limits of the widget contents.

Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-n`, `top: ${top}; left: ${left}; right: ${right}`);
Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-s`,  `bottom: ${bottom}`; left: ${left}; right: ${right}`);
Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-e`,  `right: ${right}; top: ${top}; bottom: ${bottom}`);
Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-w`,  `left: ${left}; top: ${top}; bottom: ${bottom}`);

Your environment

10.0.1
Chrome

Steps to reproduce

https://jsfiddle.net/hy6cbLf9/1/

Hovering over the ui-resizable-w is correct and the border is using the margin of 0.5rem however ui-resizable-s is wrong and the south border appears lower than the widget container.

Expected behavior

The resizable border should appear to be the border of the content and therefore use any margins specified.

adumesny added a commit to adumesny/gridstack.js that referenced this issue Dec 17, 2023
adumesny added a commit that referenced this issue Dec 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant