ngx-smart-modal: inconsistent vertical location
I’m submitting a … (check one with “x”)
[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
https://github.com/biig-io/ngx-smart-modal/issues/new
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter
Current behavior My current table is quite long and when I want to display modal, I have to set $dialog-position-top: 70%; which is weird since 70% is fine.
But then, when my table list is small, I can’t see it anymore unless I reset the top position to much less value.
Expected behavior I was hoping the top position simply calculates from the actual screen, regardless of page content. So 50% would place it at center, 0% at the top etc, 20px. Regardless, I thought it calculates from the screen, instead of the content which I have no control over at all.
In fact, adding position:fixed to the core scss file does the trick.
Reproduction of the problem
What is the motivation / use case for changing the behavior?
It would be nice and easier to either have percentage or pixel or even pre-defined settings like ‘center’ would mean center of the screen regardless of the content on display
Please tell us about your environment:
Windows 7. Webpack. NPM. Apache
- Smart Modal version: 0.8.x
- Angular version: 2.0.x
5
- Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Chrome and Firefox
- Language: [all | TypeScript X.X | ES6/7 | ES5] ES6
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 16 (9 by maintainers)
Commits related to this issue
- fix(Fix transitions and change detection): Optimize translate3d and fix markForCheck calls for onPus fix #113 — committed to maximelafarie/ngx-smart-modal by deleted user 6 years ago
- fix: Rollback previous changes and fix peerDependencies Version 7.0.0 changes was throwing rxjs errors on Angular 6.x.x on serve. This rollback fixes any serve error and removes unecessary perrDepend... — committed to maximelafarie/ngx-smart-modal by deleted user 6 years ago
Thanks Max! Indeed working well for my angular 5. Will keep an eye for when you make it Angular 6 ready as well…a few edits seem to make it work. Thanks a bunch!
On Mon, Jul 16, 2018 at 2:28 PM Maxime Lafarie notifications@github.com wrote:
– Sium, K Skype: issaammyy
“Nothing is impossible when you use your mind” Professor Proton
This email is sent from mobile phone. Sorry for spelling typos in advance.
terrific. Already was working with it on Angular 6 until you make the necessary changes. Thanks a bunch. It is super awesome and smooth now.
On Tue, Jul 17, 2018 at 4:28 PM Maxime Lafarie notifications@github.com wrote:
– Sium, K Skype: issaammyy
“Nothing is impossible when you use your mind” Professor Proton
This email is sent from mobile phone. Sorry for spelling typos in advance.
Hello @iconicsammy, yes it has been fixed in the brand new version
7.0.0
!You can now create a modal relative to a given element with the
target
option. More details in the readme in the Parameters / Options section.Happy coding! 🖖
Hello there! I’m currently having the same issue. Setting position:fixed is great for non-scrollable modals, but if there is too much data and you need to scroll, you are unable to. If you use “overflow-y:scroll” and “height:-webkit-fill-available” to the content of the modal, it will work great, but just in Chrome. I would love to help to solve this issue as well, i will be trying to do so.
Oh interesting. I didn’t encounter scrolling data in the modal so far. Lemme check and reproduce.
Cheers.
On Mon, Jun 11, 2018 at 9:35 AM Maxime Lafarie notifications@github.com wrote:
– Sium, K Skype: issaammyy
“Nothing is impossible when you use your mind” Professor Proton
This email is sent from mobile phone. Sorry for spelling typos in advance.
Ya maxine…it is an extremely simple issue to fix actually…just added:
&.nsm-dialog-open { position:fixed; <=====
and it is now working perfectly. Tho in my case to avoid the buggy download on npm install again, i overwrote the whole block after importing the css. Anyway, will check it out once you are done.
On Thu, Jun 7, 2018 at 9:45 AM, Maxime Lafarie notifications@github.com wrote:
– Sium, K Skype: issaammyy
“Nothing is impossible when you use your mind” Professor Proton
This email is sent from mobile phone. Sorry for spelling typos in advance.
Adding position-top makes no difference at all at least in my case. But adding position:fixed does. Thanks still Maxime.
On Tue, May 29, 2018 at 6:17 AM, Maxime Lafarie notifications@github.com wrote:
– Sium, K Skype: issaammyy
“Nothing is impossible when you use your mind” Professor Proton
This email is sent from mobile phone. Sorry for spelling typos in advance.