$ionicActionSheet displaying wrong format

Question

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

Anyone has any clue please?

Behnken

Answer 1

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.

Behnken

Answer 2

The reason is that Ionic applies a ".platform-android" css class prefixing the classes that you mentioned (lines 3813-3842 in /css/ionic.css). You can try it just commenting these lines.

Protein

Answer 3

The difference in the format is by design. Ionic is incorporating material design elements into android.

ActionSheets android ugly styling need help

Papert

Answer 4

You need comment below code in ionic.css

.platform-android .action-sheet-backdrop.active {
  background-color: rgba(0, 0, 0, 0.2); }

.platform-android .action-sheet {
  margin: 0; }

  .platform-android .action-sheet .action-sheet-title,
  .platform-android .action-sheet .button {
    text-align: left;
    border-color: transparent;
    font-size: 16px;
    color: inherit; }

  .platform-android .action-sheet .action-sheet-title {
    font-size: 14px;
    padding: 16px;
    color: #666; }
  .platform-android .action-sheet .button.active,
  .platform-android .action-sheet .button.activated {
    background: #e8e8e8; }

.platform-android .action-sheet-group {
  margin: 0;
  border-radius: 0;
  background-color: #fafafa; }

.platform-android .action-sheet-cancel {
  display: none; }

.platform-android .action-sheet-has-icons .button {
  padding-left: 56px; }

for more infomation go through with below link

https://forum.ionicframework.com/t/actionsheets-android-ugly-styling-need-help/18462

Lazurite