onsen.io | onsen.io website repository | User Interface library

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 Pokemons in an ons-list thanks to @sandeep joshi.

I didn't know I need to make another query to be able to grab additional info like "abilities", "elements"..etc and I'm not sure how to do that, any help would be greatly appreciated!

Here's my code:

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'm able to console.log the list of 151, but I'm not sure what's missing to display it in an ons-list.

Am I looping it incorrectly?

Thanks!

Here's my code:

After digging several hours we decided to come up with a question on SO, hoping that someone else could help regarding the following problem.

1. For one of our web applications, we used the Onsen UI js framework with its React support library
2. When we try to render the application on our dev environments everything seems to work properly, but when we try it on our staging environment some components behave differently

3. What we found so far: it seems that on our staging environment, some HTML attributes are set differently into the DOM:

   ...

I'm using Onsen UI + JQuery and .html() function is not working, see: https://jsfiddle.net/w8904ztc/1/

Per documentation here

If page A pushes page B, it can send a function as a prop or data that modifies page A’s context. This way, whenever we want to send anything to page A from page B, the latter just needs to call the function and pass some arguments:

Tried to ask this question in your FORUM on onsen.io but your NEW TOPIC button is broken - even when i am logged in - the button does nothing - doesnt even throw an error.... so here we are

i recently upgraded onsen.io so i can have iPhone-X compatibility.

now my custom animation is broken

dropAnimation.js:15 Uncaught TypeError: Cannot read property 'NavigatorTransitionAnimator' of undefined at dropAnimation.js:15

and here is the code that used to work (and which the onsen guy helped me perfect it)

I am using the onsenUI framework in combination with Cordova in order to create a hybrid application.

For some reason I observe a gap between the toolbar (text) and the iOS statusbar (iPhone 6s, iOS 11) which is larger then should, see the link for an example. example of toolbar

To troubleshoot this issue and to be sure the issue in not caused by my own code I took the code of the very simple example of the toolbar reference at https://onsen.io/v2/api/js/ons-toolbar.html to see what happened on the same iPhone (no own css file used) and the same behaviour is observed.

I am using Cordova to build the App and used the basis settings for the config.xml which are part of the standard Cordova app template. I am applying version 2.8.2 of Onsen, also tried the CDN version. I am using a real iPhone for testing build via XCode.

To confirm it’s not Cordova, I also used plain HTML and also a kitchensick from Framework7 and for both no gap was observed with the same Cordova setup, so something is related with the Onsen setup.

The gap is not shown while running the app in a browser.

Do anyhow has the same behavior and/or an idea what is going on?

OnsenUI2 has a segment with segment button elements. Where is the blue color of the currently chosen segment (radio) button decided in the css, and how do I override it?

Looking at the segment__button I find that it's color is transparent. Perhaps besides the particular css, it is relying on variables and css defined elsewhere? (bootstrap?).

Here's sample html defining a segment from the documentation on the OnsenUI2 website:

The documentation of the OnsenUI2 ons-card (and in particular for Vue2.js v-ons-card) automatically shows a scrollbar next to the content if I add many v-ons-list-item elements.

See here: https://onsen.io/v2/api/vue/v-ons-card.html

Here's a screenshot of what happens when I modify the tutorial with extra list items, and the scrollbar added:

But then when I do it manually in my code I get no scrollbar.