Phonegap within ons-scroller and ons-button

Question

Im recently working on phonegap using onsen UI system running in iOS devices. I had an issues and i noticed if you were using "", any included within was not press-able while run in iPad or iPhone. Here was my code as below:

<ons-template id="test.html" style="display:none;">
    <ons-page>
      <ons-toolbar style="background-color:#FF9500;">
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Main AK</div>
      </ons-toolbar>
        <div class="center">
             <ons-scroller>

               <ons-button modifier="food_folder" onclick="">Type A</ons-button>
               <button class="button button--cta" style=" width:100px; z-index:1000;"  >Test</button> -->

            </ons-scroller>
      </div> 

        <ons-tabbar>
            <ons-button icon="ion-ios-checkmark" modifier="navi_button" onclick="">SAVE</ons-button>
            <ons-button icon="ion-ios-checkmark" modifier="chk_button" onclick="">
                <div><span class="notification">1</span></div>
            Latte
            </ons-button>
        </ons-tabbar>
    </ons-page>
</ons-template>

When I run in the browser is working fine. Just when i deploy into iOS devices the button within the ons-scroller is not press-able. It seem cover by another layer on top. If i remove ons-scroller then the buttons is working fine. Just the reason was I might have lots buttons will fit into that area, i need it to be scrollable specially run in iPhone.

Is anyone facing the same issues? How to solve this problem? Thanks

I had found my way to solve the issues: but not sure this will be the standard way of doing this: first : i re-position the <ons-tabbar> after the <ons-toolbar> then only start <ons-scroller>, second: I will change the css for <ons-tabbar> remove z-index:2..then it work fine. If anyone have different way to solve this issues plz update here. Thanks — D_9268

D_9268 D_9268 · Accepted Answer · 2015-09-24T15:04:27

I had found my way to solve the issues: but not sure this will be the standard way of doing this: first : i re-position the <ons-tabbar> after the <ons-toolbar> then only start <ons-scroller>, Second: I will change the css for <ons-tabbar> remove z-index:2..then it work fine. If anyone have different way to solve this issues plz update here. Thanks

Phonegap within ons-scroller and ons-button

1 Answers