Anjum Anjum - 5 months ago 42
AngularJS Question

$ionicActionSheet displaying wrong format

After upgrading ionic framework to latest release candidate,

$ionicActionSheet
has started misbehaving. It shows correct format with colors etc when displayed in Chrome browser using
ionic serve
but when I install the App on Android device it displays a plain white background for
$ionicActionSheet
.

Here are two samples

Wrong Display on Device

Correct Display In Browser

Anyone has any clue please?

Answer

I inspected the page and realized that I can override the classes that ActionSheet is using. Here are various classes at different levels of nesting.

<div class="action-sheet-wrapper action-sheet-up">
  <div class="action-sheet" ng-class="{'action-sheet-has-icons': $actionSheetHasIcon}">
    <div class="action-sheet-group action-sheet-options">
      <!-- ngIf: titleText -->
      <div class="action-sheet-title ng-binding" ng-if="titleText" ng-bind-html="titleText">Select an Option</div>
      <!-- end ngIf: titleText -->
      <!-- ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Show Page Settings</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">About us</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Version History</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Rate</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Search on Server</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Refresh Menu</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Quit</button>
      <!-- end ngRepeat: b in buttons -->
      <!-- ngIf: destructiveText -->
    </div>
    <!-- ngIf: cancelText -->
    <div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">
      <button class="button ng-binding" ng-click="cancel()" ng-bind-html="cancelText">Cancel</button>
    </div>
    <!-- end ngIf: cancelText -->
  </div>
</div>

Hope that helps someone out there.

Comments