Hi @argelius,

when sliding menu is open, no scroll, no touch etc should be propagated to the page when menu < 100%. This should be like the native behavior. If you don't want to block this automatically maybe you could provide a lockPage() method, so that no events (even scroll) be triggered. To demonstrate my problem, I want to share this video with you. As you can see, I have some touch move ng-slide-left actions on the page which will block and stop the sliding menu from closing properly when I drag in the page frame.

http://youtu.be/bDoW4q-2Zs0

Hope you get my point.

Regards Hirbod

I keep coming across this issue and I haven't been able to find a cause of it.

See these images....

The first one is my status bar on initial page load (notice the 1px grey-ish line). The second one is after I have swiped to active the swipe menu.

It seems to happen on some pages but not others, but i can't find any consistency of when it happens or what is causing it.

The only way i have managed to "fix" this at the moment is by adding the follow CSS

.page {
    top: -1px;
}

Any ideas?

iPhone 6, iOS 8.1.1, OnsenUI 1.2.0

Navigator should popPage by default when back button is clicked.

To prevent that behavior, user can use the event.stopPropagation()

Things to confirm:

-The order of the event registration could affect the propagation. -The event propagation is for element, in this case, we are dealing with physical back button which doesn't have parent/child relationship

Environment

[Core]
  onsenui latest
  
[Framework]
  angular2 2.0.0

[Framework binding]
 angular2-onsenui latest

[Platform]
  Desktop - OS X 10.12.0 64-bit

[Browser]
  Desktop - Chrome 56.0.2924.87 on OS X 10.12.0 64-bit

Encountered problem When using collapse and swipeable attributes the splitter-side throws a console error.

How to reproduce See the tutorial link.

Demo link

• HTML

<app></app>

• JS

import {
  Component,
  OnsenModule,
  NgModule,
  CUSTOM_ELEMENTS_SCHEMA
} from 'angular2-onsenui';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'ons-page',
  template: `
    <ons-toolbar>
      <div class="center">Content Page</div> 
    </ons-toolbar>
    <div class="content">
      
    </div>
  `
})
class ContentPageComponent {
}

@Component({
  selector: 'ons-page',
  template: `
    <ons-toolbar>
      <div class="center">Left Page</div> 
    </ons-toolbar>
    <div class="background"></div>
    <div class="content">
      
    </div>
  `
})
class SidePageComponent {
}

@Component({
  selector: 'app',
  template: `
  <ons-splitter>
    <ons-splitter-side [page]="sidePage" side="left" width="200px" style="border-right: 1px solid #ccc" collapse swipeable>
    </ons-splitter-side>

    <ons-splitter-content [page]="contentPage">
    </ons-splitter-content>
  `
})
export class AppComponent {
  sidePage = SidePageComponent;
  contentPage = ContentPageComponent;
}

@NgModule({
  imports: [OnsenModule],
  declarations: [AppComponent, SidePageComponent, ContentPageComponent],
  bootstrap: [AppComponent],
  entryComponents: [SidePageComponent, ContentPageComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Hi @argelius,

seems like the dialog directive creates an isolated scope. How can I access the parent scope to invoke some click actions? (for example, I've created a login dialog and all my controller related stuff is in my LoginController, e.g. Facebook-Login, but my functions don't trigger in the dialog.

Any fast solution for me?

When i click one button(in page1) to push a new page(page2), just after the next page(page2) is indicated, click the button's position(Even though page1 is already hidden) once again in rapid succession on the second page(page2). the second page(page2) would be push to page stack two times. May be this is onsenui's bug?

Sorry for my poor english.

@misterjunio @asial-matagawa Please have a look at this and test it on Safari. For the "notification-like" method, what do you think it's better? ons.notification.action(...)? ons.actionSheet(...)?

Reported by @iqmeta in #1580.

Also there is a new tab-bar problem with iOS / mobile Safari, on Chrome it's working fine:

document.addEventListener('init', function (event)
{
  var page = event.target;   
  console.log("init:" + page.id);
}

Chrome console is correct:

init:tabBar
init:menu
init:gruppenPage
init:home

On iOS gruppePage is added 3x times:

init:menu
init:gruppenPage
init:gruppenPage
init:gruppenPage
init:home

Markup Tabbar no where else in code gruppen.html was referenced

 <ons-tabbar id="tabs" animation="slide">
        <ons-tab active page="home.html" id="alarm">
            <div class="tab-bar__icon">
                <ons-icon icon="ion-ios-bell" size="33px" style="line-height:0px"></ons-icon>
            </div>
        </ons-tab>
        <ons-tab id="gruppen" page="gruppen.html">
            <div class="tab-bar__icon">
                <ons-icon icon="ion-radio-waves" size="33px" style="line-height:0px"></ons-icon>
            </div>
        </ons-tab>
</ons-tabbar>

gruppen.html

<ons-page id="gruppenPage">
    <div id="testX">X</div>
    <ons-list id="groupList">
    </ons-list>
</ons-page>

tabs.addEventListener('postchange', function(event)
{
  $("#textX").text("Y") <= works only on chrome. on iOS not! because tabBar added 3 times the gruppenPage.html. Th
}

Screenshot from Cordova Remote Debugger

Going back to R17 for now. There this works flawless ;-) Hope this helps a bit. Great work on onsen by the way :+1: .

Update: With R17 i have double inits with splitter too:

think these are back or still present:

https://community.onsen.io/topic/605/init-called-twice-on-one-page-after-updating-to-rc16/

https://github.com/OnsenUI/OnsenUI/issues/1400

If you do < ons-page ng-controller="MyCtrl" >, the scope created by the ons-page directive is a sibling of MyCtrl - so it doesn't inherit MyCtrl's scope.

The workaround is to do:

<div ng-controller="MyCtrl">
<ons-page> </ons-page>
</div>

Or:

<ons-page > 
<div ng-controller="MyCtrl">
</div>
</ons-page>

It's a bit ugly... :)

vue:2.4.4 vue-onsenui:2.2.1 onsenui:2.6.1

when i use this.$store.commit("navigator/push", page) i have <v-ons-toolbar> in my page,but still show me the "toolbar._getToolbarLeftItemsElement is not a function", what i miss? (sorry for my english)

Hi there!

I'm using Onsen2 beta. When using Onsen2 on iOS, the toolbar is too close to the native statusbar:

This was not an issue with Onsen 1.x.

Best, Henrik

In my Capacitor app I am getting this warning using vscode Ionic extension:

Warning "Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform"

It is not a problem for me at this moment.

A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced. To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData. Note that for performance reasons, only the first access to one of the properties is shown.

Affected resources: onsenui.min.js:1

Environment

Onsen UI Version: latest

Framework: Capacitor / OnsenUI

Framework binding:

Additional libraries:

Platform: Google PIXEL 6 emulator with Android 13/API 33

Hello i am trying to use tabbar and navgation in app js but i was unable to i am getting error that navigator is undefined

import React from 'react';
import ReactDOM from 'react-dom';
import {Tabbar, Tab, Navigator} from 'react-onsenui';

import HomePage from './HomePage';
import SettingsPage from './SettingsPage';
import '../www/style.css'
import IntroPage from './IntroPage';
import SignUpPage from './SignUpPage';
import LoginPage from './LoginPage';

export default class App extends React.Component {
  renderPage(route, navigator) {
    const props = route.props || {};
    props.navigator = navigator;

    return React.createElement(route.component, props);
  }
  
  renderTabs() {
    return [
      {
        content: <HomePage />,
        tab: <Tab label='Discover' className='tabs' icon='md-search' />
      },
      {
        content: <SignUpPage />,
        tab: <Tab label='Wishlist' className='tabs' icon='ion-ios-heart' />
      },
      {
        content: <LoginPage />,
        tab: <Tab label='Store' className='tabs' icon='md-store' />
      },
      {
        content: <SettingsPage />,
        tab: <Tab label='Profile' className='tabs' icon='md-account' />
      }
    ]
  }
  render() {
    return (
      <>
      <Tabbar   initialIndex={0} renderTabs={this.renderTabs.bind(this)} />
      <Navigator initialRoute={{component: MainPage}} renderPage={this.renderPage} /> 
      </>
    );
  }
 
}

Environment

Onsen UI Version: 2.12.6

Framework: Vue 3.2.45

Framework binding: vue-osenui 3.0.0

Additional libraries: n/a

Platform: MacOS Firefox

Encountered problem When calling VueOnsen.platform.isFirefox(), I get the warning InstallTrigger is deprecated and will be removed in the future.

How to reproduce Call VueOnsen.platform.isFirefox() in main.js.

The font for my H1 element in the following page structure is being overridden by OnsenUI CSS and I can't figure out why or how to override it successfully:

<div class="page__content page--material__content">
	<div id="cmbcontent" class="source-serif-pro-font-light">
                 <h1 style="color: rgb(99, 81, 109);">My text here</h1>

etc.

My index.css file includes the following rule for the font, and is included after onsen CSS in my HTML file.

.source-serif-pro-font-light { 
    font-family: 'Source Serif Pro Light', serif;
    font-weight: 300;
    font-style: normal;
}

In my code I use JQuery to set the font: $('#cmbcontent, #cmbcontent h1, #cmbcontent h3').addClass('source-serif-pro-font-light'); and I've confirmed by inspection that it's then set on those elements but it's being overridden by rules for ".page--material__content h1" and/or ".page__content h1" in onsen-css-components.css (I'm using the .min version) Even doing $('#cmbcontent > h1').addClass('source-serif-pro-font-light'); or $('#cmbcontent > h1').css('font-family', "'Source Serif Pro Light', serif;");doesn't work, and yet I think these should as my understanding is more specific CSS rules override less specific ones.

This is happening using OnsenUI 2.11.2 in Chrome (latest version) launched from Microsoft Cordova Tools in VSCode on Windows 10.

Any suggestions please? Thanks

Environment

[Core]
  onsenui latest
  
[Framework]
  react 18.2.0

[Framework binding]
 react-onsenui latest

[Platform]
  Desktop - Windows 10 64-bit

[Browser]
  Desktop - Chrome 108.0.0.0 on Windows 10 64-bit

Encountered problem

How to reproduce

Demo link

• HTML

<div id="app"></div>

• JS

class MyPage extends React.Component {
  state={
    weight:0
  }
  handleClick() {
    // ons.notification.alert('Hello world!');
    this.setState({
      weight:0
    })
  }

  renderToolbar() {
    return (
      <Ons.Toolbar>
        <div className='center'>My app</div>
      </Ons.Toolbar>
    );
  }

  render() {
    return (
      <Ons.Page renderToolbar={this.renderToolbar}>
        <Ons.Button onClick={this.handleClick}>
          Click me!
        </Ons.Button>
                <Ons.Range
          name="weight"
          // modifier="material"
          min={0}
          max={50}
          value={this.state.weight}
          onChange={(event) => { 
            
            this.setState({ weight: parseInt(event.target.value) }) 
          }}
        />
      </Ons.Page>
    );
  }
}

ons.ready(function() {
  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<MyPage />);
});

Environment

[Core]
  onsenui latest
  
[Framework]
  vue 2.7.1

[Framework binding]
 vue-onsenui legacy

[Platform]
  Desktop - OS X 10.15.7 64-bit

[Browser]
  Desktop - Chrome 108.0.0.0 on OS X 10.15.7 64-bit

Encountered problem

The bound variable does not change by the slider value changes.

How to reproduce

volume is always 25 (initial value) in this demo.

Demo link

• HTML

<template id="main">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Range</div>
    </v-ons-toolbar>

    <v-ons-list>
      <v-ons-list-item>
        Adjust the volume:
        <v-ons-row>
          <v-ons-col width="40px" style="text-align: center; line-height: 31px;">
            <v-ons-icon icon="md-volume-down"></v-ons-icon>
          </v-ons-col>
          <v-ons-col>

            <v-ons-range v-model="volume" style="width: 100%;"></v-ons-range>

          </v-ons-col>
          <v-ons-col width="40px" style="text-align: center; line-height: 31px;">
            <v-ons-icon icon="md-volume-up"></v-ons-icon>
          </v-ons-col>
        </v-ons-row>
        Volume: {{ volume }} <span v-show="Number(volume) > 80">&nbsp;(careful, that's loud)</span>
      </v-ons-list-item>
    </v-ons-list>
  </v-ons-page>
</template>

<div id="app"></div>

• JS

new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
      volume: 25
    };
  }
});