Notice: The Monaca & Onsen UI Community Forum is shutting down.

Onsen UI

• D

  Create "stackable" pages with Cordova + Onsen UI?
  • dustintinsley

  3
  0
  Votes
  3
  Posts
  943
  Views

  D

  The Nest app. Also noticed it on an app called Super Agent.
• 

  How to add a card-header like the bootstrap's sytle?
  • BrightSun2021

  2
  0
  Votes
  2
  Posts
  1152
  Views

  G

  Sorry for late reply. <ons-card modifier="bootstrap"> <div class="header">Header</div> <div class="content"> <div class="title">Title</div> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <div class="footer"><small> Last updated 3 mins ago</small> </div> </ons-card> .card--bootstrap .header { font-weight: 500; padding: 0.75rem 1.25rem; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); } .card--bootstrap { padding: 0px; border-radius: 0px; } .card--bootstrap__content { padding-left: 15px; padding-right: 15px; } .card--bootstrap__content .title { /* same as onsen .card__title */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 20px; margin: 4px 0px 8px 0; padding: 0; display: block; box-sizing: border-box; } .card--bootstrap .footer { padding: 0.75rem 1.25rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); } You can write your css. Best Regards, Gobi
• S

  onsen carousel last item getActiveIndex
  • SushiMan

  2
  0
  Votes
  2
  Posts
  2907
  Views

  G

  Sorry for late reply. It seems the postchange will not fire for last item, because it is not yet touch the end. Instead of setting carousel item width 80%, set a div 80% to contain the carousel. <div style="width:80%"> <ons-carousel fullscreen swipeable auto-scroll item-width="100%" overscrollable id="carousel"> <ons-carousel-item style="background-color: #085078;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> BLUE </div> </ons-carousel-item> <ons-carousel-item style="background-color: #373B44;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> DARK </div> </ons-carousel-item> <ons-carousel-item style="background-color: #D38312;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> ORANGE </div> </ons-carousel-item> </ons-carousel> </div> Best Regards Gobi
• 

  How to change the icon's color of BackButton?
  • BrightSun2021

  2
  0
  Votes
  2
  Posts
  1135
  Views

  G

  Sorry for late reply. <ons-page> <ons-toolbar> <div class="left"> <ons-back-button>back</ons-button> </div> </ons-toolbar> </ons-page> .back-button__icon { fill: red; } .back-button__label { color: orange; } Use .back-button__icon: { fill: the color you want}, will change the left arrow color, and .back-button__label to change the color of text. Best Regards, Gobi
• D

  This topic is deleted!
  • dustintinsley

  1
  0
  Votes
  1
  Posts
  42
  Views

  No one has replied

• A

  Buy Properties in Electronic City Phase 1
  • aravindarya

  1
  0
  Votes
  1
  Posts
  627
  Views

  No one has replied

• 

  What are the core files
  • hajsf

  2
  0
  Votes
  2
  Posts
  1054
  Views

  E

  This section of the guide about reducing app size may be helpful for you: https://onsen.io/v2/guide/appsize.html#reducing-app-size Specifically, using ES modules is the way to ensure you only include the components you actually use. The CSS for iOS/Android is bundled together so it will be difficult to separate these, but the weight of this is not very much. Also, you can use onsenui-core.js instead of onsenui.js, and only the icon packs you need.
• N

  How to make ons-input autofocus like input tag
  • naufal17

  5
  0
  Votes
  5
  Posts
  2778
  Views

  R

  Very helpful thread… mobdro
• E

  Onsen UI for Android - keyboard key Next/Enter not firing any action
  • esantamaria

  4
  0
  Votes
  4
  Posts
  1333
  Views

  E

  It should work if you wrap your inputs in a form element: <form> <ons-input></ons-input> <ons-input></ons-input> </form>
• O

  how to use api to login in and fetching videos from api
  • osppro

  2
  0
  Votes
  2
  Posts
  959
  Views

  E

  There shouldn’t be any need to do anything special here because of Onsen UI. You can just write normal JavaScript code like you would outwith Onsen UI and it should also work with Onsen UI (since Onsen UI is just for the UI layout).
• L

  Feature Request: Onsen Playground CSS examples & Documentation
  • LittleOldLady

  2
  0
  Votes
  2
  Posts
  1063
  Views

  E

  What kind of changes are you trying to make in the CSS? If you want to make a new Onsen UI theme, the Theme Roller is the best tool for that: https://onsen.io/theme-roller/
• 

  Onsen Toolbar to not scale when viewport value is increased to allow other elements to scale
  • harry2068

  2
  0
  Votes
  2
  Posts
  865
  Views

  E

  It isn’t possible to use a Cordova plugin with Onsen UI without using Cordova. For the first option, could you make an example to show what you are doing? You may also find it useful to ask for help at the Onsen UI community discord instead of here as it tends to be checked more frequently: https://discord.gg/JWhBbnE
• L

  Help with CSS and checkbox
  • LittleOldLady

  2
  0
  Votes
  2
  Posts
  1013
  Views

  E

  You could try generating your own Onsen UI theme here by selecting the Customize option: https://onsen.io/theme-roller/
• L

  How to show date/time automatically using ons-input
  • LittleOldLady

  2
  0
  Votes
  2
  Posts
  1044
  Views

  L

  OK, thanks again to stack overflow, I found the answer to my question. I’m posting it here because I’ve seen other similar questions in the forum that were never answered. Maybe this will help someone else. My onsen-ui Html5: <div style="text-align: center; margin-top: 30px;margin: bottom 0;"> <ons-input type="text" id="date" > </ons-input> </div> <div style="text-align: center; font-size:small; margin-top: 0px;"> <ons-input type="text" id="time" > </ons-input> </div> The code is pure javascript and was posted by a coder (sorry I don’t have his name) on stack overflow. I do not take credit for it, but I’m grateful for his sharing. 😁 // get a new date (locale machine date time) var date = new Date(); // get the date as a string var n = date.toDateString(); // get the time as a string var time = date.toLocaleTimeString(); // find the html element with the id of "date" // set the innerHTML of that element to the date a space the time document.getElementById('date').innerHTML = n; //date document.getElementById('time').innerHTML = time; }); -Rachel
• S

  Ons-tabbar with ons-navigator active Tab Problems
  • SushiMan

  3
  0
  Votes
  3
  Posts
  1751
  Views

  

  @emccorson said in Ons-tabbar with ons-navigator active Tab Problems png to ico: Internally, each ons-tab has a radio input which is checked when the tab is active. It’s a bit hacky, but you should just need to check the input and uncheck the currently active input for the active styling to work. e.g. if fa-search is currently selected and you want to change tab to fa-user-md: document.querySelector('ons-tab[icon="fa-search"] input').checked = false; document.querySelector('ons-tab[icon="fa-user-md"] input').checked = true; Thank you soooo much, that’s been bugging me for days x
• 

  Integrating onsen into existing website
  • ClosetMonkey

  2
  0
  Votes
  2
  Posts
  888
  Views

  E

  It’s possible you will get some CSS conflicts due to Onsen UI’s class names. We are looking at fixing that in a future version but for the moment if your class name is the same as an Onsen UI, you may have a collision. Please see: https://github.com/OnsenUI/OnsenUI/issues/2645 If you have any ongoing problems, you may also find it useful to ask for help at the Onsen UI community discord: https://discord.gg/JWhBbnE sergei-krylov created this issue in OnsenUI/OnsenUI closed Scope components css classes into namespace #2645
• J

  Monaca / Cordova10 can't access to firebase with iOS in WKwebview
  • JamesDawkins

  1
  0
  Votes
  1
  Posts
  769
  Views

  No one has replied

• N

  This topic is deleted!
  • naufal17

  1
  0
  Votes
  1
  Posts
  217
  Views

  No one has replied

• 

  Passing an HTMLElement to pushPage
  • ianrobertsFF

  2
  0
  Votes
  2
  Posts
  912
  Views

  

  Well thanks to this issue, and 2 or 3 other ones that other people have posted about and have gone completely unanswered I’ll just swap to Framework7.
• 

  How to send a kotlin data object to next page by kvision?
  • BrightSun2021

  3
  0
  Votes
  3
  Posts
  1232
  Views

  

  @brightsun2021 I 've done it. It should use ObservableValue<Int> to monitor the index change selected and modify the currentUser in studentList. Thank everyone.