Onsen UI

• E

  This topic is deleted!
  • emccorson

  1
  0
  Votes
  1
  Posts
  68
  Views

  No one has replied

• 

  How to ask a question.
  • OnsenUI

  2
  3
  Votes
  2
  Posts
  3822
  Views

  

  @onsenui said in How to ask a question.: You can include any other resources that you consider important to understand your question. For example you can add links to external pages or embed images in the post (drag and drop the images to the composer). interesting great information :)
• L

  Is there a ways to create "pull to close page"?
  • Lael

  2
  0
  Votes
  2
  Posts
  28
  Views

  E

  Did you already figure it out? It looks like you can already pull to close on that page you linked.
• N

  How do I close other opened expandable items when opening a new one?
  • npad69

  3
  0
  Votes
  3
  Posts
  58
  Views

  N

  @emccorson Thank you very much. When I tried it for the first time I found out that it does not seem to work on dynamically generated lists. So what I did was to remove the ons-ready and converted it to a function to be invoked each time a new content is generated. Now its working!
• R

  Is Onsen v 2.10.8 backwards compatible with onsen v 2.7.0?
  • rb054549

  2
  0
  Votes
  2
  Posts
  29
  Views

  E

  ons-split-view was a component in Onsen UI v1. v1 was coupled with AngularJS, but with the release of Onsen UI v2, you could use just plain JS or another framework without needing to use AngularJS. So as of Onsen UI v2, ons-split-view was deprecated in the AngularJS version and not available in any other version. This also means v2.7 did not include ons-split-view. Now you should use ons-splitter instead of ons-split-view. There are some other breaking changes between minor versions. For a full list of changes, please see the CHANGELOG: https://github.com/OnsenUI/OnsenUI/blob/2.10.10/CHANGELOG.md Realistically there shouldn’t be too many difficulties in moving from v2.7 to the latest version, but there may be a couple of minor things that don’t work as expected. One problem that other people have run into is that the syntax for ionicons changed in v2.10.9. If your icons are suddenly not showing, check here for the correct syntax: https://ionicons.com/v4/ Also, the latest version is 2.10.10, not 2.10.8, so you may as well upgrade to that. If you need any help upgrading, please let me know.
• T

  Angular + Onsen setImmediate error
  • TommyPA

  2
  0
  Votes
  2
  Posts
  289
  Views

  

  Any update? I’m still experiencing this error today.
• R

  Change animation of ons-splitter
  ons-splitter • • rcpinheiro

  3
  0
  Votes
  3
  Posts
  63
  Views

  R

  @emccorson Thanks a lot!
• M

  navigate to the page with url like "/app/SomeController/{123}/show"
  ons-navigator • • mowgly

  1
  0
  Votes
  1
  Posts
  59
  Views

  No one has replied

• I

  What's Push Ad Network that I can use?
  • icangeek

  1
  0
  Votes
  1
  Posts
  43
  Views

  No one has replied

• A

  js not working or navigation not working in in page2
  • anthony

  1
  0
  Votes
  1
  Posts
  44
  Views

  No one has replied

• A

  want to display Marquee Tag before a tabbar
  • anthony

  1
  0
  Votes
  1
  Posts
  38
  Views

  No one has replied

• A

  js in separate page will auto executed
  • anthony

  3
  0
  Votes
  3
  Posts
  83
  Views

  A

  @emccorson Hello thanks for the previous advice. now I decided to get all data when the page is loaded using ajax, but I was not able select he element that is on page2 , then update using jquery , but I can do it if I am using template. so my question is now how can I get the element that is on page2 for example below its the jquery I am tring to get the value from P ID with testearly that is on page2 ``` $(document).ready(function(){ getSportsToday(); let myvar = $(“p#testearly”).text() ; console.log(myvar); // setInterval(updateSportsToday,10000); }); below is HTML for page2 <ons-page id=“early”> <script type="text/javascript"> //ons.notification.alert(" page"); // console.log("test"); </script> <p style="text-align: center;" id="testearly"> This is the early page. </p> </ons-page> the result showing in console.log is empty I believe there is special element I need to use or sytax I need to use when navigate the page2 ??? btw I am using tabbar to page2 Thanks for reading
• I

  Submenu on toolbar
  • icangeek

  2
  0
  Votes
  2
  Posts
  88
  Views

  E

  The closest component is probably ons-popover. https://onsen.io/v2/api/js/ons-popover.html Two differences from your screenshots: By default, it has an arrow pointing out the side but you can easily hide that with CSS. The popover appears below the button, not on top of it. Again you can move this with CSS. Here is an example similar to your screenshots using ons-popover: https://codepen.io/emccorson/pen/gObyrYm HTML: <ons-page> <ons-toolbar> <div class="right"> <ons-toolbar-button icon="ion-md-more" onclick="showPopover(this)"></ons-toolbar-button> </div> </ons-toolbar> </ons-page> <ons-popover id="popover" direction="down" cancelable="true"> <ons-list> <ons-list-item>one</ons-list-item> <ons-list-item>two</ons-list-item> <ons-list-item>three</ons-list-item> </ons-list> </ons-popover> JS: var showPopover = function(target) { document .getElementById('popover') .show(target); }; var hidePopover = function() { document .getElementById('popover') .hide(); };
• I

  <ons-icon> not showing in cordova
  • icangeek

  2
  0
  Votes
  2
  Posts
  90
  Views

  I

  I just found the cause of the problem. It’s because the css fonts (font_awesome, ionicons, meterial-design-iconic-font) folder doesn’t have files inside. strange. the source if from github.
• R

  triggering expandable list content myself
  • rogerkaplan

  2
  0
  Votes
  2
  Posts
  76
  Views

  R

  @rogerkaplan Figured it out… call event.stopPropagation() in the event handler for the button. Duh.
• G

  Ionicons disappear in the current version
  • gobiyau

  6
  0
  Votes
  6
  Posts
  435
  Views

  B

  @emccorson Updating to thte new syntax did not work for me. I have tried: <ion-icon name="videocam"></ion-icon> <ion-icon name="ios-videocam"></ion-icon> <ion-icon name="ion-ios-videocam"></ion-icon> Using: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.10.10/css/onsenui.css"> If I use 2.10.6, it still works. <i class="ion-ios-videocam"></i> Let me know if you would like a link.
• I

  How to properly add text content with padding on the page?
  • icangeek

  3
  0
  Votes
  3
  Posts
  106
  Views

  I

  @emccorson Got it! Thank you!
• C

  Scaling Toolbar and Images for Different Devices
  • christopher

  4
  0
  Votes
  4
  Posts
  148
  Views

  E

  Hmmm… I think both the toolbars from your screenshot might actually be the same size, but the iPad one is overlapping with the device status bar. You can see the blue icon on the right is overlapping. By the way, that overlapping behaviour shouldn’t happen. Does it still happen if you remove the icon and just have a text in the toolbar? I’m guessing that the problem is because the icon height is larger than the toolbar height and the toolbar is not automatically resizing. From the OnsenUI source code, it looks like the height is set to 46px. It should be possible to override this by applying your own CSS class to the toolbar. https://github.com/OnsenUI/OnsenUI/blob/master/css-components/src/components/toolbar.css#L6
• L

  Can't open side menu outside tabbar pages
  • linkon

  4
  0
  Votes
  4
  Posts
  111
  Views

  E

  The problem is that you have currently have the splitter inside the navigator, when you actually need the navigator inside the splitter. Copy the example from the link I already posted. It defines a splitter, and within the splitter content is a navigator. That means that the splitter is available on every page, no matter what page the navigator shows. Then for the tabbar, just define a page with a tabbar and push it using the navigator. That means you have: A top-level splitter Inside the top-level splitter: a navigator that is used to show pages. Inside the navigator: a page containing a tabbar that is pushed by the navigator.
• I

  This topic is deleted!
  • icangeek

  1
  0
  Votes
  1
  Posts
  1
  Views

  No one has replied