Autosize of modal instead of setting explicit height and width#8
Autosize of modal instead of setting explicit height and width#8henrymoews wants to merge 11 commits intoshibe97:masterfrom henrymoews:autosize
Conversation
…ize. Can still be overwritten by property.
I wait for the main repo to accept my pull request and then use normal npm structure again
…bpage is broken Current case: in iOS in combination with cordova width and height are interchanged and break design where css position is 'fixed'
| .DS_Store | ||
| npm-debug.log | ||
| node_modules | ||
| lib |
There was a problem hiding this comment.
I think lib files should not be managed in GitHub.
They should be used for the npm package.
|
Please check |
|
Of course, the lib folder should not be included. Actually, at the time of doing this pull request, I intended to propose a certain commit and did not know that the pull request follows my branch. As I did not want to publish my own npm package, but needed the lib folder, I pushed it only for myself. I'm going to revert the unwanted changes now and then everything should be fine. |
| 'boxSizing': 'border-box', | ||
| 'boxShadow': '0 2px 4px rgba(0, 0, 0, 0.3)', | ||
| 'transform': 'translate3d(0, 0, 0)', | ||
| 'transform': 'translate3d(-50%, -50%, 0)', |
There was a problem hiding this comment.
When the dialog animates, it based on transform property.
For example in the case of 'fadeInDown', it moves from (0, -100px, 0) to (-50%, -50%, 0).
So, I don't want you to use transform property for centering the dialog.
There was a problem hiding this comment.
Okay, I'll have a closer look on how to solve this problem then.
There was a problem hiding this comment.
Sorry, to not have found time earlier to respond.
I have found a possible solution to the transform problem that I would check in if you approve it here.
The transform you figured out to be problematic is 'transform': translate(0, -100px, 0).
I would change that line to 'transform': translateY(-100px) translate(-50%, -50%, 0).
In modern browsers this could also be shortened to 'transform': translate(0, calc(-100px - 50%), 0) which unfortunately does not work in iOS webviews so I would go with the first proposal.
Of course, for the other transitions this would have to be adapted accordingly.
There was a problem hiding this comment.
is this merged to master? I started to had a styles obj has config for the modal =) before I saw this one. I can do a pull request if it helps share the basic idea.
|
Closing pull request. |
|
Replaced by new pull request: #19 |
4 participants
Changed default size of dialog with any effect to match the content size. Can still be overwritten by property.
I have changed the width and height to 'auto' and changed the tranform: translate(0,0,0) to translate(-50%, -50%, 0).