Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
ons-carousel always covers full screen
-
Based on the API documentation and example I made a carousel without the the fullscreen attribute. Using Playground tool it works as expected. If I copy the exact same code from the sandbox to my local example the carousel height is the viewport height.
The only workaround is to set the height absolutely for the ons-carousel element in css but obviously that’s not helpful because the height needed will be relative to the size of the image which will be determined by the viewport width.
I guess I have two questions:
-
First: is this a known issue or am I missing something? It works the way I’d like using the Playground so I don’t get why my local version is different other than there’s possibly some difference in the libraries (for the record I’ve both downloaded the newest version using npm and also tried using the CDN).
-
Second: if this is a known issue, does anyone have a relatively straight forward solution using css, I would think using calc()? I reckon I could do it with js if need be but I’d just as soon not go down that rabbit hole if I can help it.
-
-
@conan_g Just an update for the second point, I did find a workable solution so long as I know my image sizes which I can do for now. I’d still like to know why removing fullscreen is not working though.
So for say a 500x300 image the following works:
ons-carousel { height: calc(300 * (100vw / 500)); }
-
Can you provide the code of the example you made (you can export this from the playground to codepen) and also a screenshot showing the problem?
-
It works in codepen but here’s the link: https://codepen.io/conan_g/pen/WNQYKrb
In the cap you should see that it is the exact same code. I’ve scrolled just a bit in the emulator so you can see that it’s the viewport height before you see the text below. I’ve also tried in Chrome using the inspector and got the same results.
The onsen links are the from the library which I just grabbed last week and I’ve not altered anything there. I also tried with the CDN and got the same results.
