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:
After Modal view dismissed, only the first slide box is shown: