Comments (7)
This fix works as long as the content of the modal does not exceed the screen height. If that's the case, the top of the modal is stuck at 50%
See (in IE11): https://jsbin.com/tenobipedu/1/edit?html,css,js,output
You need to shrink the browser Window to see the effect:
from fomantic-ui.
@lubber-de Thanks for the feedback. I will check it out
from fomantic-ui.
@lubber-de I added another commit to fix the IE11 scrolling modal issue: c4eed66
from fomantic-ui.
Top position is fixed with your commit, but the left value is still ignored when content is larger than screen (see first screenshot above where the height was still wrong -> its also attached to the left border.
When the content fits the screen height then the left-property is respected as expected
It seems to be fixed by adding margin-left:0 and again left: 2.5% (additional fix for #135 also then)
.ui.legacy.legacy.page.dimmer > .ui.scrolling.modal,
.ui.page.dimmer > .ui.scrolling.legacy.legacy.modal,
.ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal,
.ui.top.aligned.dimmer > .ui.legacy.legacy.modal {
top: auto !important;
margin-left:0 !important;
left: 2.5% !important;
}
from fomantic-ui.
This would interfere with the whole legacy modal thing introduced in SUI 2.4.0.
The real problem is that the vertical scrollbar width is not taken into account when calculating the modal width.
from fomantic-ui.
I did some further digging and this bug affects all .scrolling
legacy modals, for which the width is defined in percent:
- fullscreen modals
- mobile (screen width < 768px)
- tablet (screen width < 992px)
While retrieving the modals width the scrollbar is not rendered, therefore it returns a larger width than it should - in this cases the modal is half the scrollbars width further to the left.
I'm inclined to close this issue and move the discussed issue in another one. The original issue (and your addition with the top issue) should be fixed.
from fomantic-ui.
Agreed, thanks for investigation!
from fomantic-ui.
Related Issues (20)
- [modal] `show` breaks modal state if more configuration is done before transition finish HOT 2
- [Dropdown] Search-In-Menu search term and filter results do not match when re-focused HOT 1
- [Label] Space between labels after line-breaks missing HOT 3
- Chrome 122 does not display modals with scrolling content correct HOT 2
- nag('dismiss') throws error HOT 1
- [Dropddow] Items are not updated when remove manually HOT 2
- [Dropdown] render is very slow with large dataset HOT 2
- [Scrollbar] CSS style for Firefox scrollbar break the scrollbar on chromium browser (Chrome/ Edge) HOT 2
- [Dropdown] Using serialized JSON as value prevent the select value from being updated.
- [scope] npm install deprecated and security warnings HOT 5
- [form validation] keyHeldDown conflicting behavior HOT 3
- [message] Link color doesn't match message color HOT 6
- [dropdown] ui simple dropdown does not work on mobiles HOT 2
- [bug] `closable` modal set to false is still closing HOT 7
- [menu] Menu is rendered outside viewport HOT 3
- [dropdown] JS error when typing if dropdown open HOT 2
- [bug] modal `closable` set to `true` not closing HOT 6
- [calendar] incorrect day shown when startMode changed from "month" to "hour" HOT 7
- [dropdown] Height variation is not working HOT 1
- [Cards] Even column count cards bug HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fomantic-ui.