0

I have two ionic slide boxes in a vertical alignment. And in the second slide-box, I have few buttons. When I click those buttons, I am presenting a modal view, and I am dismissing the modal view on click of another button in the modally presented view.

Issue: After I dismiss the modal view, the second ionic slide box is not showing. Only the first slide box is showing.

Here is my html:

<ion-view view-title='Home'>
    <ion-content>
        <div>
        <ion-slide-box class="twitter" show-pager="false">
            <ion-slide>
                <div class="div_twitter">
                    <img class="twitterImg" src="img/ben.png" width="50" height="50" />
                </div>
            </ion-slide>
            <ion-slide>
                <div class="div_twitter">
                        <img src="img/ben.png" width="50" height="50"  />
                </div>
            </ion-slide>
        </ion-slide-box>
        </div>
        <div>
        <ion-slide-box class="belowTwitter"  show-pager="false">
            <ion-slide>
            <div>
                <div id="logoDisplay">
                    <img src="" />
                </div>
                <p id="infoText" style="text-align: center">Welcome to Test App,</p>
             </div>
            </ion-slide>

            <ion-slide>
                <p id="infoText" style="text-align: center">See our help area for more information</p>

                <div align="center">
                    <button class="button button-positive" ng-click="showHelp()">
                        View Help
                    </button>

                </div>
            </ion-slide>
            <ion-slide>
                <div align="center">
                    <button class="button button-positive" ng-click="showapp()">Get Started</button>
                </div>
                </div>
            </ion-slide>

        </ion-slide-box>
        </div>
     </ion-content>
</ion-view>

and CSS:

/*slide box*/
.twitter {
 margin-top:-40px;
 overflow: visible;
 display: table; /* makes the slider have a height */
}

and the code to present the modal view:

      $scope.showHelp=function(){
      $ionicModal.fromTemplateUrl('help.html', function($ionicModal) {
           $scope.modal = $ionicModal;
           $scope.modal.show();
       }, {
       // Use our scope for the scope of the modal to keep it simple
           scope: $scope,
           animation: 'slide-in-up'
       });

Before Modal view presented, 2 slide boxes are shown as normal:

enter image description here

After Modal view dismissed, only the first slide box is shown:

enter image description here

Teja Nandamuri
  • 11,045
  • 6
  • 57
  • 109

0 Answers0