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.
1,153
questions
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 ...
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 ...
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
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--...
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 ...
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 ...
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 ...
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 ...
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 ...
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 };
...
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 ...
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 ...
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="...
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 ...
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 ...
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....
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 ...
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'...
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 ...
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>
...
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": "^...
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-...
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 ...
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”.
...
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 ...
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?
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, ...
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,
...
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 ...
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">
<...
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, ...
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 ...
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";
<...
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, ...
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 ...
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() {
...
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);...
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(...
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 ...
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 ...
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 ...
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.
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...