Hello
After upgrade from RC0 to RC1 all my actionsheet looks bad. ¿any help?
I thought I had my CSS hooked up wrong or something - it looks terribly unrefined compared to everything else. Mine also looks like this as well.
PS: What did you use for the ad?
Well, it turns out you can have good results by applying some styling and icons to your menu items, e.g.:
buttons: [
{
text: '<i class="icon ion-compose"></i> Edit'
}, {
text: '<i class="icon ion-document"></i> View note'
}
],
titleText: '<strong>Actions</strong>',
cancelText: 'Close',
destructiveText: '<span class="assertive"><i class="icon ion-"></i> Delete</span>',
Thanks for help. I improve it. My code
titleText : '<center><strong><h4>Menú Opciones</h4>'+favorito.tipoVinculacion +"-"+ favorito.sistemaAcceso +"-"+ favorito.centro +"-"+ favorito.categoria+"</strong></center>",
// cancelText: '<i class="icon ion-compose"></i>Cerrar',
destructiveText: '<span class="letra_roja"><center><i class="icon ion-trash-a"></i>Eliminar</center></span>',
destructiveButtonClicked: function() {
sharedProperties.removeFavorito(favorito);
return true;
},
buttons: [
{ text: '<center><i class="icon ion-arrow-up-a"></i> Subir</center>' },
{ text: '<center><i class="icon ion-loop"></i>Actualizar</center>' },
{ text: '<center><i class="icon ion-flag"></i>Resetear Nomb.</center>' },
{ text: '<center><i class="icon ion-arrow-down-a"></i>Bajar</center>' }
// { text: '<center><i class="icon ion-close-round"></i>Cerrar</center>' }
],
but before rc1 it was perfect without center and class…
This is part of Ionic’s move toward Material Design for android and is intentional. Threw me at first… spent hours trying to figure what I was doing wrong. There’s android specific code for actionsheets in the CSS that results in the above. If you review the Material Design specs, this is what they say android should look like.
If you want to the looks to be same in android and iphone then find the below code block in css stylesheet and comment it out. Then it will look the same as in iphone.
.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; }
Hi, I know this entry is very old but i just tried your css and it won’t change anything on android.
I solve with this
buttons: [
{ text: '<center><i class="icon ion-arrow-up-a"></i> Subir</center>' },
{ text: '<center><i class="icon ion-loop"></i>Actualizar</center>' },
{ text: '<center><i class="icon ion-flag"></i>Resetear Nomb.</center>' },
{ text: '<center><i class="icon ion-arrow-down-a"></i>Bajar</center>' }
],
and in css
.popup-buttons {
flex-direction: column;
}
