Questions tagged [onsen-ui]

Onsen UI is a front-end framework for developing hybrid mobile apps in HTML5. It supports both Flat and Material Design and is framework agnostic.

Filter by
Sorted by
Tagged with
0 votes
0 answers
20 views

React + Onsen UI: link in the content

As an alternative to my previous question (React + Onsen UI: Can I change the browser url?) I have a React app. The content comes from a headless cms. Client wants to add links in a page of content to ...
Amanda Lutz's user avatar
0 votes
0 answers
27 views

React + Onsen UI: Can I change the browser url?

I've inherited a React project that uses Onsen UI for stacking/changing pages. Because this site will be available both via browser on the web and mobile app (Cordova) the client wants the url to ...
Amanda Lutz's user avatar
0 votes
1 answer
31 views

NetBeans tag suggestions for Onsen UI

I am using Onsen UI for developing but there is no tag suggestions like on image for included Onsen UI. I tried VS Code, but there is no code suggestions too. What IDE I can use or how to enable them
wybot's user avatar
  • 343
0 votes
0 answers
40 views

How to override default font set by a CSS library (onsen-css-components.css in OnsenUI)?

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--...
Alex Kerr's user avatar
  • 976
0 votes
1 answer
42 views

How to fire deviceBackButton on `v-ons-alert-dialog`

In documentation, deviceBackButton is fired on device back button. It isn't fired on device back button in my application. Device back button terminates my application without showing alert dialog. I ...
akinoguchi's user avatar
1 vote
0 answers
49 views

Cordova-App HTML/JS Everything appears multiple times after leaving page and getting back

I am working on a Cordova project using Onsen. I have multiple ons-pages and if I change from one to another and back to the first one, the whole code is executed twice. If I do it again, everything ...
Dinkelbrötchen's user avatar
0 votes
1 answer
100 views

Onsen UI Back Button

I'm new to Onsen UI, and have been using it to build out a small mobile app for my wife's company. I initially was laying out my project using a single page, but that's starting to become a bit ...
denkom's user avatar
  • 31
0 votes
1 answer
92 views

Angular Onsen UI Ajax call

I am beginning to learn writing apps using Monaca and I have a sample application I am editing which is written in Onsen and Angular. I would like to be able to get data from a remote file on my ...
RobertyBob's user avatar
1 vote
1 answer
136 views

android webview goes blank in PWA frameworks

i have an app that use webview for interface. i want to use PWA frameworks such as Onsen UI or Framework7. these frameworks working well in local browser but not in webview. in webview every thing ...
me Ya's user avatar
  • 21
0 votes
1 answer
62 views

I am unable to change state with button with onsen-ui - please

I am learning Onsen-ui React and button to reset state is not working. See below a simple test case ´´´ class MyApp extends Component { constructor(props) { super(props); this.state = { myVal: 123 }; ...
Hastings's user avatar
0 votes
1 answer
64 views

React app doesn't load onsenui css files on chromium

I've got a really weird bug in a create-react-app application. Onsenui is used as a css framework. But when I try to run the app, either in production or on localhost on a chromium based browser, the ...
Filip's user avatar
  • 865
0 votes
1 answer
388 views

How to load multiple .html files using onsen ui?

I am a newbie to onsen ui. https://onsen.io/v2/guide/#making-your-web-and-hybrid-app-feel-native I don't want to put all javascript programs in one html. if i have muitple html, any idea how to load ...
MaryAnn's user avatar
  • 95
1 vote
0 answers
47 views

Why isn't my second tabbar page showing in ONSEN UI

I'm relatively new to ONSEN UI, I am using a tabbar layout and also pushing to different pages when an "option" is pressed, this is my solution for it to do so: <ons-navigator id="...
Ara Malki's user avatar
  • 175
2 votes
0 answers
87 views

Spring Boot cannot load Onsen UI JS and CSS

Something about the way that Spring Boot loads a web page is screwing things up with Onsen UI. The ons-navigator and ons-splitter tags do not work correctly when the pages are served from a Spring ...
moonlightcheese's user avatar
1 vote
1 answer
76 views

Onsen UI Tabbar tab cannot be checked by button when previously clicked

I am developing an Electron app mostly with plain JavaScript and HTML. The app has a top navbar, where all pages (tabs) of the app are stored (kinda like your web browser, but the tabs are fixed and ...
Lee Shau's user avatar
0 votes
1 answer
265 views

How to check for current page with ons-navigator (Onsen UI)

Im trying to figure out how to check what page im on when doing a popPage() using onsen uis ons-navigator. I tried the following but they all always return false no matter what: this.navigator....
SanzioSan's user avatar
  • 224
1 vote
1 answer
4k views

PokeAPI - querying additional pokemon info

I'm currently learning how to use onsen.io and I'm using the PokiAPI to learn. I had helped earlier using "https://pokeapi.co/api/v2/pokemon?limit=151" to display the names of all 151 ...
MetalBearSolid's user avatar
0 votes
1 answer
78 views

Can't loop through my Pokemons in Onsen.io

I'm learning how to use onsen.io and the best way to learn is by making a Pokemon app! But of course, being a noob, I'm having trouble trying to loop through my list of 151 Pokemons using onsen.io. I'...
MetalBearSolid's user avatar
1 vote
2 answers
896 views

Unsubscribe to observable when navigating away from an onsen ui page

I have an angular 2+ app running onsen ui, I have setup some components as pages and I am using the ons-navigator to switch between them. The problem im having is that when im subscribed to an ...
SanzioSan's user avatar
  • 224
0 votes
1 answer
201 views

Scroll to top of page on element hide with Onsen UI

I have the following page: <ons-template id="login.html"> <ons-page id="login-page"> <ons-toolbar> <div class="center">Register</div> ...
MoreScratch's user avatar
  • 2,963
0 votes
1 answer
73 views

use onsen ui in cordova npm package manager

I have successfully installed Onsen UI in NPM in Cordova. It is updated in package.json "dependencies": { "cordova-browser": "^6.0.0", "onsenui": "^...
Mani Singh's user avatar
0 votes
0 answers
297 views

Importing ons from 'onsenui/esm' gives an error

I'm creating an app using pure JavaScript and Onsen UI But, I got this error when tried to import the Onsen UI package (I'm using webpack) ERROR in ./node_modules/onsenui/esm/ons/internal/animator-...
Erick Christian's user avatar
1 vote
1 answer
622 views

How to get multiple checkbox value on button click from an Onsen Checkbox?

I am using ons-checkbox provided by Onsen-UI, I have multiple checbox <ons-checkbox input-id = "brand" value = "example" class = "checkbox"></ons-checkbox> on the button click I ...
Kunal Tyagi's user avatar
  • 2,851
1 vote
1 answer
66 views

HTML object "list" is not updating after switching between sites

What am I trying to achieve: I am creating simple Firebase project with HTML and Javascript where the purpose of app is to create lists of data that is shared across users with specific “families”. ...
Jakub Szlaur's user avatar
  • 1,952
1 vote
1 answer
146 views

SortableJS not working with Onsen UI on desktop

Just copy-pasted the example code from Sortable's docs. It works fine on any touchsreen device, but as soon as I view it on Chrome or any other desktop browser it stops working. No error, you just ...
KVN's user avatar
  • 13
0 votes
1 answer
32 views

Is it possible to create responsive top navigation menu with Onsen UI?

I mean something like this It looks like neither ons-navigator nor ons-splitter can provide such behavior. Any ideas? Probably combining some components together?
Yuriy N.'s user avatar
  • 5,188
3 votes
1 answer
224 views

OnsenUI Navigator + React failed to navigate

I have been banging my head against wall for days due to the issue as mentioned in the title. I was trying to implement navigation function using Onsen UI and React. However after I click to navigate, ...
tnkh's user avatar
  • 1,749
0 votes
1 answer
776 views

How to add onClick function to action sheet?

I am working on onsen-ui and I want to implement an action sheet that does something every time function show() { ons.openActionSheet({ title: 'My Action Sheet', cancelable: true, ...
Ved Tiwari's user avatar
1 vote
1 answer
136 views

How to use LazyList component in react-onsenui to display dynamic data?

I'm using Axios to get dataList from the server and storing it in the state as an array. I want to use LazyList but in the document, there are not props for getting dynamic data array from the server ...
maryam's user avatar
  • 217
0 votes
1 answer
68 views

How to align text with ons-select?

I have this HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <...
sanitizedUser's user avatar
2 votes
2 answers
90 views

How can I check if the current location is outside of a set radius?

I'm currently working on an app that triggers a notification when someone is within a square. The following defines the square: var zonebounds = [[30,35], [40,45]]; var zone = L.rectangle(zonebounds, ...
spelle's user avatar
  • 41
8 votes
1 answer
394 views

Why are HTML attributes set differently into the DOM?

After digging several hours we decided to come up with a question on SO, hoping that someone else could help regarding the following problem. For one of our web applications, we used the Onsen UI js ...
Mihai Matei's user avatar
  • 24.2k
0 votes
0 answers
362 views

Cannot read property of null error ONSEN Ui

I'm making a code that has a line of JavaScript which changes the text of the element in the HTML code. var card = document.getElementById("greeting"); card.style.display = "none"; <...
Ved Tiwari's user avatar
0 votes
0 answers
38 views

How to stop Chrome from displaying dialog to print screen

I'm making an app with Onsen UI and I'm having some trouble with trying too run the code itself. Chrome always displays a dialog to print the screen, which I don't want to do, and when I click cancel, ...
Ved Tiwari's user avatar
0 votes
1 answer
38 views

Is there a way to use EC2 as backend for iOS app developed on Monaca?

We created a webapp (all code is on EC2 server) and now, we are trying to create an iOS app using Monaca, which is based on OnsenUI/Cordova. We would like to use Monaca for the "front-end" and leave ...
kuwagolei's user avatar
3 votes
1 answer
277 views

How do I save the value of "ons-select" into a variable for JavaScript?

I'm trying to make a code in Onsen Ui whichsaves the date in a variable, and displays the value selected as an alert in JavaScript. Here's a snippet of my code so far: function exfunction() { ...
Ved Tiwari's user avatar
1 vote
0 answers
191 views

TypeError: this.navigator.element.pushPage is not a function

Im using onsen-ui with angular 8 I'm getting error in the below function, I am not sure why this happens, because it is the code from the onsenUI-page. push(event, value){ console.log(value);...
Roopini .k's user avatar
0 votes
0 answers
969 views

How to solve Uncaught TypeError: Cannot read property 'transaction' of undefined using Onsen and webDB

How to solve Uncaught TypeError: Cannot read property 'transaction' of undefined using Onsen and webDB, i am trying to fix errors. Here is some of the codes: function getItems(){ db.transaction(...
david john's user avatar
1 vote
1 answer
140 views

ReactJS Onsen - Child State refreshing when using PushPage

While developing our first app using ReactJS, I have run into a state refresh issue. We have a component that reads a list of pages from an API. This result contains the page name and content. We loop ...
John McGuire's user avatar
0 votes
1 answer
126 views

Onsen Cards not showing?

I'm trying to use JavaScript to place cards for however many ids there are in a given JSON input, and while the divisions and cards exist in HTML, they don't show in practice. Can anyone shed some ...
Jaike Mogg wright's user avatar
0 votes
1 answer
255 views

ons-navigator: Error: Module parse failed: Unexpected token (330:6)

How to fix this error? This error is occurs when using the Navigator component from 'react-onsenui' lib. Error: Module parse failed: Unexpected token (330:6) You may need an appropriate loader to ...
Vlad's user avatar
  • 1
0 votes
1 answer
151 views

onsen UI with expanable list and icons with description

I want this list thumbnail which is expandable and also allow me to add my text I have search the internet, so far I can only choose one not both.
Peter's user avatar
  • 437
1 vote
4 answers
642 views

Javascript can't change input value

I'm trying to set a random number as value for an ons-input (signup_txtCodigo), but whenever I try to push the page it just shows me the alert that I put it to check the random and stays there. This ...
LeMertin's user avatar
0 votes
1 answer
155 views

is it possible to add RTL direction for onsen ui 2?

i'm using Cardova with onsen ui v2 but i'm still wondering if its possible to add RTL direction RTL html input[type=text] { direction: rtl; } p, h4{ text-align: right !important; } i tired to put ...
Weizmann's user avatar
0 votes
1 answer
237 views

Onsen UI - changePage with save toolbar, tabbar and preload ajax text

I just want to create an app based on Cordova + onsen UI but I have a small problem. On first screen, I have choosing user language and "start" on press start I'm sending uuid and lang to my database ...
Michal's user avatar
  • 1
0 votes
1 answer
390 views

Camera works in Monaca Debugger but not in Debug Build

So, I am working on a new app that uses the camera for real-time video OCR on Android. Anyway, the app works great in the Monaca debugger. When I then do a debug or release build, the camera will not ...
Munsterlander's user avatar
0 votes
2 answers
700 views

Onsen-ui Carousel properties auto play not working

I am using onsen UI here I use carousel in my mobile web app, but here some problem occurs by which I am unable to use the property autoplay. <ons-page> <ons-toolbar> <div ...
Seth's user avatar
  • 331
8 votes
1 answer
197 views

How to determine if OnsenUI component is compiled in unit test

My project is built with vue-cordova-webpack template. I created a vue-component. There is v-ons-input inside the template of my component. I need to change the value of v-ons-input during the unit ...
Lana's user avatar
  • 1,219
0 votes
1 answer
172 views

How to dynamicaly create ons-tabbar in page

I am trying to generate tabbar pages dynamically in my app. I tried generate elements with ons.createElement() and document.createElement(). But it don't render the pages. Only tabbar, or first page ...
Symorp's user avatar
  • 68
1 vote
0 answers
68 views

Combining OnsenUI app and Wordpress website

I have a webapp that I created using OnsenUI and hosted on AWS. My company website is based on WordPress and now I would like to combine the two, if you will, to use one domain. That would require me ...
kuwagolei's user avatar

1
2 3 4 5
24