Ionic Framework How to place a div or buttons belo

2019-09-13 06:30发布

问题:

I'm working on an ionic project and in a tab I placed a google map following this tutorial. Now I want to put some buttons (inside a div?) to trigger some actions over that map. how can achieve that? I'm really newbie with this framework, I'll appreciate any help.

My index.html

<body>
    <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-a"></i>
        </ion-nav-back-button>
        <ion-nav-buttons side="right">
            <a class="button" href="#/tab/twitter">
                <i class="icon ion-social-twitter"></i>
            </a>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view animation="slide-left-right-ios7">
    </ion-nav-view>
</body>

My maps.html

<ion-view title="Ubicación">
    <ion-content id="maps" scroll="false" data-tap-disabled="true">
    </ion-content>
</ion-view>

回答1:

Why don't you add your map into a separate div

<ion-view title="Ubicación">
    <ion-content>
          <div id="maps" scroll="false" data-tap-disabled="true"></div>
          <div class="testHello "> My Button </div>
    </ion-content>
</ion-view>

And position your items on position fixed

.testHello { 
  position : absolute;
  background-color: red;
    width : 100%;
  bottom:0px;
}

See updated codepen http://codepen.io/anon/pen/eNgRpR