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

jQueryUI Dialog - content shrinks on resizing when box-sizing: content-box #2277

Closed
Daniel-Garmig opened this issue Aug 5, 2024 · 3 comments · Fixed by #2281
Closed

jQueryUI Dialog - content shrinks on resizing when box-sizing: content-box #2277

Daniel-Garmig opened this issue Aug 5, 2024 · 3 comments · Fixed by #2281

Comments

@Daniel-Garmig
Copy link
Contributor

Dialog content shrinks when dialog have scrollbars and is resized.
jQueryUI_DialogResizeError

This is a similar problem as in #1979 and #2083.
It was marked as solved in jQueryUI 1.13.3 but it still happen on some cases (when box-sizing: content-box).

I have done the following tests:

jQueryUI Version box-sizing Work status
jQueryUI 1.13.2 border-box ❌ Error
jQueryUI 1.13.2 content-box ❌ Error
jQueryUI 1.13.3 border-box ✔️ Working
jQueryUI 1.13.3 content-box ❌ Error

Bug only seems to happen on Chromium-based browsers (tested on Chrome 127.0.6533.89 and Edge 127.0.2651.86). It works fine on Firefox (tested on Firefox 128.0.3)

Sample fiddle: https://jsfiddle.net/67j9nm43/1/
Fiddle uses jQueryUI 1.13.3. You may change box-sizing between border-box/content-box to test both cases.

I know this is kind of a edge case, as most people today uses box-sizing: border-box, but some old projects may still use box-sizing: content-box as it is the default option.

@Daniel-Garmig Daniel-Garmig changed the title jQueryUI Dialog - content shrinks resizing when box-sizing: content-box jQueryUI Dialog - content shrinks on resizing when box-sizing: content-box Aug 5, 2024
@mgol
Copy link
Member

mgol commented Aug 5, 2024

Thanks for the report with a clear test case! Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex and contain tests.

@Daniel-Garmig
Copy link
Contributor Author

I'm working on a fix for this. I will make a PR soon.


Here I give some more details about what I found.
It's a weird case when scrollbars are visible on Chromium browsers. It's like size is reserved for the scrollbar so content size is reduced.
The problem is that this behavior is different between Chromium based browsers and Firefox.

I have make the following test case:

Chrome 127.0.6533.119:
ScrollbarSizeChrome

Firefox 129.0:
ScrollbarSizeFirefox

This is the test case if you want to try by yourself.
https://jsfiddle.net/ps57bvn6/3/

As you can see in the code, I'm using jQuery ".width()" to get element width on JS. But I believe jQuery is working just fine and it's a browser thing (as can be seen on the images).

I'll like to hear some opinions about it!

Daniel-Garmig added a commit to Daniel-Garmig/jquery-ui that referenced this issue Aug 20, 2024
Resizable element shrinks on resize when it has scrollbars and "box-sizing: content-box".

Fixes: jquerygh-2277
@melloware
Copy link

We had this reported at PrimeFaces as well: primefaces/primefaces#11476

mgol pushed a commit that referenced this issue Sep 9, 2024
Make resizable elements not shrink on resize when they have scrollbars
and "box-sizing: content-box".

Fixes: gh-2277
Closes gh-2281
@mgol mgol closed this as completed in #2281 Sep 9, 2024
@mgol mgol added this to the 1.14.1 milestone Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging a pull request may close this issue.

3 participants