2

I have a form input field and a button inside a modal and for some reason they both are inactive. If I try to click them I can not enter any text into the field or the button doesnt do anything. All fields and buttons work fine on the page and all my other pages, but dont work correctly in my modals.

Modal 

<ons-modal var="modalSample" ng-controller="SampleController">
  <ons-navigator var="nav3" page="sample">

  </ons-navigator>
</ons-modal>

<ons-template id="sample">
    <ons-page>
        <ons-tabbar position="top">
            <ons-row>
                <ons-col width="15%">
                   <div style="margin-top:15px"><i class="ion ion-arrow-left-c" ng-click="modalSample.hide()"></i></div>
                </ons-col>
                <ons-col width="45%" align="left">
                    <div style="padding-top:18px;color:#fff;">Sample Groups</div>
                </ons-col>
                <ons-col width="20%" align="left">

                </ons-col>            
            </ons-row>
        </ons-tabbar>      
      <ons-row style="padding-top:145px">
        <ons-col>
         <input type="text" id="stufxx" placeholder="test"/>
         <ons-button modifier="large" class="login-button" ng-click="alert('heelo')" style="background:#ccc">Test button</ons-button>
        </ons-col>
      </ons-row>

    </ons-page>
</ons-template>

Rest of page

<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="90%" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="menux.html">
    <ons-page>
        <ons-list class="menu-list">

          <ons-list-item class="menu-item" ng-click="menu.closeMenu()" style="padding-top:2em;padding-bottom:3.5em;">
            <ons-row >
                <ons-col width="20%" align="left">
                    <img src="img/profile.png" width="30" class="profilex"/>
                </ons-col>
                <ons-col width="80%" align="left">
                    Andrew 
                </ons-col>
            </ons-row>            
          </ons-list-item>          
          <ons-list-item class="menu-item" ng-click="myNavigator.pushPage('tags.html', {param1: 'bla'});menu.closeMenu()">
            <ons-row>
                <ons-col width="20%" align="left">
                    <ons-icon icon="ion-ios-barcode-outline darkgrey"></ons-icon>
                </ons-col>
                <ons-col width="80%" align="left">
                    <span style="padding-left:0.3em" align="right" >Tags</span>
                </ons-col>
            </ons-row>            
          </ons-list-item>

          <ons-list-item class="menu-item" ng-click="modalSample.show()">
            <ons-row>
                <ons-col width="20%" align="left">
                    <ons-icon icon="ion-ios-pie-outline darkgrey"></ons-icon>
                </ons-col>
                <ons-col width="80%" align="left"> 
                     <span style="padding-left:0.3em"  align="right">Sample Groups</span>
                </ons-col>
            </ons-row>
          </ons-list-item>

          <ons-list-item class="menu-item" ng-click="myNavigator.pushPage('apps.html', {param1: 'bla'});menu.closeMenu()" style="border-bottom:1px solid #ddd">
            <ons-row>
                <ons-col width="20%" align="left">
                     <ons-icon icon="ion-ios-paper-outline darkgrey"></ons-icon>
                </ons-col>
                <ons-col width="80%" align="left">
                     <span style="padding-left:0.3em"  align="right">Apps</span>
                </ons-col>
            </ons-row>
          </ons-list-item>

          <ons-list-item class="menu-item" ng-click="myNavigator.pushPage('settings.html', {param1: 'bla'});menu.closeMenu()">
            <ons-row>
                <ons-col width="20%" align="left">
                    <ons-icon icon="ion-ios-cog-outline darkgrey"></ons-icon>
                </ons-col>
                <ons-col width="80%" align="left">
                     <span style="padding-left:0.3em"  align="right">Settings</span>
                </ons-col>
            </ons-row>
          </ons-list-item>

        </ons-list>

    </ons-page>
</ons-template>


<ons-template id="main.html">
<ons-navigator var="myNavigator">
    <ons-page ng-controller="LoginController">
        <ons-tabbar position="top">
          <ons-tabbar-item  style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" onclick="menu.toggleMenu()"></ons-tabbar-item>
          <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
          <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
          <ons-tabbar-item page="negative.html"  icon="ion-android-walk"></ons-tabbar-item>
          <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
        </ons-tabbar>
    </ons-page>
</ons-navigator>
</ons-template>
condo1234
  • 3,285
  • 6
  • 25
  • 34

1 Answers1

0

I am a bit confused as to why you would have a navigator in a modal, but I did a codepen that has inputs and buttons in it which works. Please see this codepen:

http://codepen.io/anon/pen/qbGQrN

The modal is just simply this:

<ons-modal var="modal">
  <ons-button onclick="alert('It Works! Input - '+document.getElementById('myInput').value);modal.hide();">Button</ons-button>
  <input type="text" id="myInput"/>
</ons-modal>
Munsterlander
  • 1,356
  • 1
  • 16
  • 29