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.
Resize carousel sub-items
-
I am using ons-carousel inside ons-splitter-side with width 100%. When the screen is rotated (or resized) the width of carousel sub-items is not being updated. Here is an example:
<ons-splitter> <ons-splitter-side id="menu" side="left" width="100%" collapse swipeable> <ons-carousel id="carousel" fullscreen width="100%"> <ons-carousel-item> <ons-list> <ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item> <ons-list-item onclick="fn.next()" tappable> Settings </ons-list-item> <ons-list-item onclick="fn.load('about.html')" tappable> About </ons-list-item> </ons-list> </ons-carousel-item> <ons-carousel-item> <ons-list> <ons-list-item onclick="fn.back()" tappable>Back</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> </ons-list> </ons-carousel-item> </ons-carousel> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> <template id="home.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Main </div> </ons-toolbar> <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p> </ons-page> </template> <template id="settings.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Settings </div> </ons-toolbar> </ons-page> </template> <template id="about.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> About </div> </ons-toolbar> </ons-page> </template>
Javascript
window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content.load(page) .then(menu.close.bind(menu)); }; window.fn.next = function(){ var carousel = document.getElementById('carousel'); carousel.next(); } window.fn.back = function(){ var carousel = document.getElementById('carousel'); carousel.prev(); }
Try to run this example, then resize the area then click on “Settings”
-
I noticed that the width is correct, but the position is wrong. transform: translate3d
-
Have you tried width in px? just for testing…
In my case, Onsen Carousel was working weird when I use % in width not px. But after using px, it is solved.
-
@김요섭 Yes I did. The width is correct but the positioin is not.
-
ons-carousel-item
isn’t really designed to be used outside of anons-page
, and so in this case won’t initiliase properly. This means that the resize handler doesn’t get added, which causes the issue you are seeing.I would recommend against using the
ons-carousel
in this way. If you want to work around the initialisation not working, you could do the following inside anons.ready
callback:document.getElementById('carousel')._show();