bump();

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

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?

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

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

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

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

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

Bump();

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

Image without it

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

@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

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