Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. Maxim Van de Wynckel
    M
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    Maxim Van de Wynckel

    @Maxim Van de Wynckel

    2
    Reputation
    11
    Posts
    1089
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    Maxim Van de Wynckel Follow

    Posts made by Maxim Van de Wynckel

    • RE: Placeholder of ons-input not replacing on iOS?

      bump();

      PS: Is this the correct subforum or should I’ve posted it somewhere else?

      posted in Developer Corner
      M
      Maxim Van de Wynckel
    • Placeholder of ons-input not replacing on iOS?

      Hi there!

      This is my page:

      <ons-page ng-controller="LoginController" >
          <link rel="stylesheet" href="css/login.css" />
          <ons-toolbar>
              <div class="center">{{locale.login_title}}</div>
          </ons-toolbar>
      
          <div class="login-form">
              <img src="images/pixel.png" id="image_logo"/>
              <p class="login-fail" ng-show="isFailed">
                  {{failMessage}}
              </p>
              
              <ons-input id="input_username" style="width: 100% !important" type="text" placeholder="{{locale.login_username}}" value=""></ons-input>
              <ons-input id="input_password" style="width: 100% !important" type="password" placeholder="{{locale.login_password}}" value=""></ons-input>
              <br><br>
              <ons-if platform="android">
                  <ons-button modifier="material" class="login-button" ng-click="signIn()"><ons-icon icon="ion-load-c" spin="true" ng-if="isLoading"></ons-icon> {{locale.login_signin}}</ons-button>
              </ons-if>
              <ons-if platform="ios other">
                  <ons-button modifier="large" class="login-button" ng-click="signIn()"><ons-icon icon="ion-load-c" spin="true" ng-if="isLoading"></ons-icon> {{locale.login_signin}}</ons-button>
              </ons-if>
          </div>
      </ons-page>
      

      on Android (material design) the placeholders in the “placeholder” attribute of ons-input get replaced, but on iOS they are not?
      0_1465589978187_10-06-2016_22-19-04[1].png

      As you can see I have other angular placeholders like on the button,etc… but they are replaced without problems. When I force usage of
      material design using ons.platform.select it works fine.

      Is this a quirk I didn’t read somewhere or a bug? (anyone else that wants to try this?)

      Regards,
      Maxim

      posted in Developer Corner
      M
      Maxim Van de Wynckel
    • Ons-splitter-side swipeable disable

      Hey there!

      I switched from ons-sidebar to ons-splitter-side to make it easier to support tablets.
      https://onsen.io/v2/docs/js/ons-splitter-side.html
      However I have a question:

      On my login screen I don’t want to show the splitter-side. For now I use this

      window.enableMenu = function(swipeable){
          var menu = document.getElementById('menu');
          var content = $('#content');
          if (swipeable){
              $(menu).attr('width','260px');
              content.css("left","260px");
          }else{
              $(menu).attr('width','0px');
              content.css("left","0px");
          }
          menu.close();
      };
      

      But I find this very ugly :S.

      Any idea’s on how to make this more cleaner? Maybe there is a build in alternative?

      PS: This is my splitter

          <ons-splitter>
              <ons-splitter-side id="menu" animation="overlay" side="left" width="260px" swipeable collapse="screen and (max-width:31.25em)" page="html/menu.html">
              </ons-splitter-side>
              <ons-splitter-content id="content" page="html/login.html">
              </ons-splitter-content>
          </ons-splitter>
      

      Regards,
      Maxim

      posted in Onsen UI
      M
      Maxim Van de Wynckel
    • RE: Modifier (UI) set default web modifier

      @Fran-Diox thanks for the great response! Works like charm

      posted in Developer Corner
      M
      Maxim Van de Wynckel
    • Modifier (UI) set default web modifier

      Hey!

      I was wondering: Is it possible to set the default modifier to “material” for components?
      Now, when viewing in browser the UI is flat design. Is it possible to set this default to "material"
      without specifically setting the modifier (so it doesn’t use material design on iOS).

      Regards,
      Maxim

      posted in Developer Corner
      M
      Maxim Van de Wynckel
    • RE: Angular 2 support?

      Possibly its currently a different branch
      https://github.com/OnsenUI/OnsenUI/tree/angular2-binding

      posted in Onsen UI
      M
      Maxim Van de Wynckel
    • RE: Ons-pull-hook breaks application in Onsen2 RC

      Bump();

      posted in Onsen UI
      M
      Maxim Van de Wynckel
    • Ons-pull-hook breaks application in Onsen2 RC

      Dear,

      I upgraded from
      Onsen 2.0.0-rc.2
      To
      Onsen 2.0.0-rc.4

      but I am facing some upgrade problems. The application fails with the error:

      (index):114 TypeError: Cannot read property 'addEventListener' of undefined
          at http://localhost:3000/lib/onsenui/js/angular-onsenui.js:11936:20
          at Array.forEach (native)
          at Object.deriveEvents (http://localhost:3000/lib/onsenui/js/angular-onsenui.js:11931:22)
          at Class.init (http://localhost:3000/lib/onsenui/js/angular-onsenui.js:2341:44)
          at new Class (http://localhost:3000/lib/onsenui/js/angular-onsenui.js:50:49)
          at pre (http://localhost:3000/lib/onsenui/js/angular-onsenui.js:8868:28)
          at ja (http://localhost:3000/lib/angular/angular.min.js:80:350)
          at n (http://localhost:3000/lib/angular/angular.min.js:65:341)
          at g (http://localhost:3000/lib/angular/angular.min.js:58:305)
          at g (http://localhost:3000/lib/angular/angular.min.js:58:322)window.console.error @ (index):114(anonymous function) @ angular.min.js:117(anonymous function) @ angular.min.js:89ja @ angular.min.js:80n @ angular.min.js:65g @ angular.min.js:58g @ angular.min.js:58n @ angular.min.js:65g @ angular.min.js:58n @ angular.min.js:65g @ angular.min.js:58g @ angular.min.js:58n @ angular.min.js:65g @ angular.min.js:58(anonymous function) @ angular.min.js:57_appendMainPage @ slidingMenu.js:450(anonymous function) @ slidingMenu.js:458(anonymous function) @ angular.min.js:130n.$eval @ angular.min.js:144n.$digest @ angular.min.js:142n.$apply @ angular.min.js:145l @ angular.min.js:97H @ angular.min.js:101u.onload @ angular.min.js:102
      (index):114 TypeError: Cannot read property 'childNodes' of undefined
          at n (angular.min.js:65)
          at g (angular.min.js:58)
          at g (angular.min.js:58)
          at n (angular.min.js:65)
          at g (angular.min.js:58)
          at n (angular.min.js:65)
          at g (angular.min.js:58)
          at g (angular.min.js:58)
          at n (angular.min.js:65)
          at g (angular.min.js:58)
      

      After checking why I was getting this on just a few pages I found out that by deleting my ons-pull-hook (that works on rc2)
      it works.

              <ons-pull-hook var="loader" ng-action="fetchBuildings($done)">
                  <span ng-switch="loader.getCurrentState()">
                      <span ng-switch-when="initial">{{locale.buildings_pulldown_initial}}</span>
                      <span ng-switch-when="preaction">{{locale.buildings_pulldown_preaction}}</span>
                      <span ng-switch-when="action">{{locale.buildings_pulldown_action}}</span>
                  </span>
              </ons-pull-hook>
      

      To see if it wasn’t something concerning the switch I used the minimal:

      <ons-pull-hook>
          Release to refresh
      </ons-pull-hook>
      

      but this triggers the same error.

      Image with ons-pull-hook
      05-05-2016_18-18-25.png

      Image without it
      05-05-2016_18-20-09.png

      Is anyone else facing this problem or did I mess something up with the upgrading?

      PS: I am using Angular 1.5.5

      Regards,
      Maxim

      posted in Onsen UI
      M
      Maxim Van de Wynckel
    • RE: Ons Notification - hide

      @Fran-Diox said:

      e easiest way is probably to use se

      Thanks! , that was what I was looking for.
      Tried the same thing, but my querySelector was a bit too overengineerd

      Regards,
      Maxim

      posted in Developer Corner
      M
      Maxim Van de Wynckel
    • Ons Notification - hide

      Dear,

      I am using:
      https://onsen.io/reference/ons.notification.html

      What is the best way to hide it without user interaction? (timer/timeout)

      The only ideas I can come up with are kinda hackish

      Regards,
      Maximvdw

      posted in Developer Corner
      M
      Maxim Van de Wynckel