Skip to content

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

Closed
Samg217/glpi
#8

Description

@tl696

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.

Activity

  1. added a commit that references this issue on Dec 17, 2023
    ba345f3
  2. added a commit that references this issue on Dec 17, 2023
    fcbfd80
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions