#9291 closed bug (fixed)
Position - $.position.scrollbarWidth detection causes layout issues
Reported by: | gaumup | Owned by: | gaumup |
---|---|---|---|
Priority: | minor | Milestone: | 1.10.4 |
Component: | ui.position | Version: | 1.10.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
I think we should add 'css absolute position' to the temporarily <div> which use to calculate scrollbar width to avoid scrollbar appear on document layout. It will cause some unexpected layout bugs such as: some element fall down to next line...
[jquery-ui-potition v.1.10.2] [Line 73] div = $( "<div ]style='position:absolute;left:0;top:0;'''display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" )
Change History (10)
comment:1 Changed 10 years ago by
Owner: | set to gaumup |
---|---|
Status: | new → pending |
comment:2 Changed 10 years ago by
Status: | pending → new |
---|
Hi tj.vantoll
Please take a look at example which I have done in jsFiddle: http://jsfiddle.net/KTzQV/6/
- [Error happened case] Do the following step: 1- Go to link: http://jsfiddle.net/KTzQV/6/ 2- Resize window 3- Click on "Show UI Position Block" button on jsFiddle example, you will see the red block fall down to next line
- [No error case]: 1- Go to link: http://jsfiddle.net/KTzQV/6/ 2- Click on "Show UI Position Block" button on jsFiddle example => In this case resizing window after that will not cause any errors
My work-around for this issue:
- Solution 1: set body = overflow: hidden
- Solution 2: set temporarily <div> in jQuery UI Position 'absolute' position as I have been post
Thanks and regards,
comment:3 Changed 10 years ago by
Status: | new → open |
---|---|
Summary: | [jQuery UI Position 1.10.2] - $.position.scrollbarWidth() issue → Position - $.position.scrollbarWidth detection causes layout issues |
Reduced: http://jsfiddle.net/tj_vantoll/L9LA3/. I can create the problem without needing the resize and I verified the scroll bar detection was causing the issue.
For a fun workaround you can use:
body > div[style*='display'] { position: absolute; }
In terms of placing position: absolute
in the position code itself, my only concern is that it would affect the actual scrollbar width detection. I wouldn't think that it would, but it's hard to say without testing it out.
comment:4 Changed 10 years ago by
Hi tj.vantoll
Thanks for your jsFiddle example(Reduced: http://jsfiddle.net/tj_vantoll/L9LA3/). I have noticed this problem before and proposed 2 workarounds as in my comment above. So far, I have tested in Chrome, FF, Safari, IE and it has no affect on scrollbar detection in jquery position code, so I have apply it in my projects now
Regards,
comment:5 Changed 10 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues.
Changeset: 1d3b8ff78eaa3d64a839ba34af34d1e8b24f82af
comment:6 Changed 10 years ago by
Milestone: | none → 1.11.0 |
---|
comment:7 Changed 10 years ago by
Revert "Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues."
This reverts commit 1d3b8ff78eaa3d64a839ba34af34d1e8b24f82af.
Changeset: 0da5f9946d0a87f3bdd47cf8848fd63956e261d3
comment:8 Changed 10 years ago by
Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues.
Changeset: d500e945a46c9e2ce5bbb685661c32b5d3f57d21
comment:9 Changed 9 years ago by
Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues. (cherry picked from commit d500e945a46c9e2ce5bbb685661c32b5d3f57d21)
Changeset: edf36f35ce84a67376d7e9fedd21fc07b38100c0
comment:10 Changed 9 years ago by
Milestone: | 1.11.0 → 1.10.4 |
---|
Hi gaumup,
Thanks for taking the time to contribute to the jQuery UI project. Could you please provide a reduced test case that shows the layout bug that you are describing? You can use this as a starting point: http://jsfiddle.net/tj_vantoll/KTzQV/.
Thanks.