Thanks!
Flosef2
@Flosef2
Posts made by Flosef2
-
Onsen UI 2 - ons-sliding-menu is now ons-splitter ?
Hey,
I like the style the ons-sliding-menu works in Onsen UI 1. But when I want to do it the UI 2 way, I have to use ons-splitter, right?
It just behaves in a new way, so the menu sliding from the left, on top of the main view. The ons-sliding-menu slides in, but bumps the
main view to the right.To make it short:
Is is the proper way to use ons-splitter for UI 2?Thank you!
-
RE: Change DOM before bringPageTop()
btw.
why can I not mark the topic as solved? -
RE: Change DOM before bringPageTop()
@Fran-Diox thanks a lot!
For others having this problem you can use something like this:
document.addEventListener("init", function(e) { if (e.target.matches("#ID-OF-YOUR-PAGE-IN-HTML-FILE")) { //DO SOMETHING BEFORE ANIMATION }
-
RE: Appended elements missing onsen style=""
@IliaSky Thank you for this nice response!
I add elements by jQuery. Like this:
oli = $('<ons-list-item/>', { 'modifier':'chevron' ,'tappable': "" }); or = $('<ons-row/>', { }).appendTo( oli ); etc....... oli.appendTo( '.list');
You think this could be a problem?
-
Change DOM before bringPageTop()
Hey,
I use the bringPageTop method to load the view-1.html and show it. When I change the DOM in the then part it will be executed after the animation and the html is already shown. So you see how it changes.
I want to change the dom and then do the animation etc. Is there a way to preload the html file?
Thank you
myNavigator.bringPageTop('html/view-1.html', {animation: 'slide', animationOptions: { duration: 0.2 ,delay: 0 } }) .then(function() { $('.div-in-view-1.html').text("2323"); });
-
Appended elements missing onsen style=""
Hi,
when I use this list from the theme roller:
<ons-list-item modifier="chevron" class="plan" ng-repeat="a in [1,2,3,4,5,6,7,8,9,10]"> <ons-row> <ons-col width="80px" class="plan-left"> <div class="plan-date">5:30 PM</div> <div class="plan-duration">1h</div> </ons-col> ``` <ons-col width="6px" class="plan-center" ng-style="{backgroundColor:a % 3 == 1 ? '#3399ff' : '#ccc'}"> </ons-col> <ons-col class="plan-right"> <div class="plan-name">Onsen UI Meetup</div> <div class="plan-info"> <div ng-hide="a % 4 == 0"> <ons-icon icon="fa-phone"></ons-icon>123-456-789 </div> <div ng-hide="a % 3 == 0"> <ons-icon icon="fa-map-marker"></ons-icon>Moscone, San Francisco </div> </div> </ons-col> </ons-row> </ons-list-item>
The onsen framework seems to add a style here.
Before:
<ons-col width="6px" class="plan-center" ng-style="{backgroundColor:a % 3 == 1 ? '#3399ff' : '#ccc'}">
After:
<ons-col width="6px" class="plan-center col ons-col-inner" ng-style="{backgroundColor:a % 3 == 1 ? '#3399ff' : '#ccc'}" style="-webkit-box-flex: 0; flex: 0 0 6px; max-width: 6px; background-color: rgb(51, 153, 255);"> </ons-col>
When I add a new list element to the dom this style will not be added and so the design is broken.
Although I’am using Onsen 2 and I don’t have to call ons.compile I tried it without success.Is there something else to do?
Thank you!