$ ionicActionSheet che visualizza il formato errato

Question

Dopo l'aggiornamento del framework ionico all'ultima release candidate, $ionicActionSheet ha iniziato a comportarsi in modo anomalo. Mostra il formato corretto con i colori ecc. Quando viene visualizzato nel browser Chrome utilizzando ionic serve ma quando installo l'app sul dispositivo Android visualizza uno sfondo bianco semplice per $ionicActionSheet.

Qui ci sono due campioni

Qualcuno ha qualche idea per favore?

Answer 1

Ho ispezionato la pagina e mi sono reso conto che posso sostituire le classi utilizzate da ActionSheet. Qui ci sono varie classi a diversi livelli di nidificazione.

<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> 

Speranza che aiuti qualcuno là fuori.

Answer 2

La differenza nel formato è di progettazione. Ionic sta incorporando elementi di design dei materiali in Android.

ActionSheets android ugly styling need help

Answer 3

La ragione è che ionico applica un ".platform-Android" classe CSS anteponendo le classi che lei ha citato (linee 3813-3842 in /css/ionic.css). Puoi provare solo commentando queste righe.

Answer 4

È necessario commentare qui sotto il codice a 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; } 

per più infomation andare fino in fondo al di sotto di collegamento

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