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

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

Most upvoted comments

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:

Hello @iconicsammy https://github.com/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 https://github.com/biig-io/ngx-smart-modal#parameters--options section.

Happy coding! 🖖

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/biig-io/ngx-smart-modal/issues/113#issuecomment-405231380, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ3GGg57p6G8Lxv73JCR3JYFzxU270qGks5uHIcHgaJpZM4UQc5r .

– 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.

ghost on Jul 16, 2018

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:

@iconicsammy https://github.com/iconicsammy as I previously said, the Angular 6 error was related to the rxjs peer dependency. It has been removed and from now you can use the 7.0.1 version of this library. 😎

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/biig-io/ngx-smart-modal/issues/113#issuecomment-405602087, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ3GGl2y9aMTCDWW8n-XIusWsTrjdqIUks5uHfSdgaJpZM4UQc5r .

– 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.

ghost on Jul 17, 2018

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! 🖖

maximelafarie on Jul 16, 2018

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.

jtouceda on Jun 15, 2018

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:

@iconicsammy https://github.com/iconicsammy, there’s another problem: if we changed the modal’s position to fixed, the modal’s content isn’t scrollable anymore (I guess that’s why I done it like that 😅). I’m investigating to find a more suitable fix that will not break the modal logic.

If you want to reproduce, you can go to the demo of the library and open the “big content modal”, then modify .nsm-dialog-open’s position to fixed.

Any suggestions / help highly appreciated! 🤓

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/biig-io/ngx-smart-modal/issues/113#issuecomment-396149710, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ3GGsmFYC60sNiAPd7oBEjgHJRKgrNsks5t7h2pgaJpZM4UQc5r .

– 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.

ghost on Jun 11, 2018

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:

Reopened #113 https://github.com/biig-io/ngx-smart-modal/issues/113.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/biig-io/ngx-smart-modal/issues/113#event-1667858648, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ3GGjltbSAGaZ-UdyMhYrlnczxdOY3fks5t6NoSgaJpZM4UQc5r .

– 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.

ghost on Jun 7, 2018

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:

Hi @iconicsammy https://github.com/iconicsammy, We propose SCSS variables https://github.com/biig-io/ngx-smart-modal#style--customization to let you set your own style properties.

If you don’t want to override these variables in your SCSS, you can play with ngStyle https://docs.angularjs.org/api/ng/directive/ngStyle or with attributes bindings https://angular.io/guide/template-syntax#attribute-binding.

If it doesn’t work in your case, you always can reproduce the issue on StackBlitz https://stackblitz.com/fork/angular in order to help us understand you issue better.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/biig-io/ngx-smart-modal/issues/113#issuecomment-392676774, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ3GGsuZI5HHPrV-b6BkVZSX_f8Yf8Kaks5t3PYcgaJpZM4UQc5r .

– 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.

ghost on May 29, 2018