Thanks!

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!

btw.
why can I not mark the topic as solved?

@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

  }

@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?

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");

    });

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!