MOB: badge disabilitato

[alesic]

Ciao, il badge impostato su un tab non selezionato, viene visualizzato come se fosse disabilitato (sfondo rosso e scritta grigia), e quindi si legge poco. Lo stesso badge una volta che il tab è attivo, si vede perfettamente (sfondo rosso e scritta bianca).
Secondo me il badge dovrebbe essere sempre ben visibile (come d'altronde fanno le app native)
Allego img per chiarezza

[d.pierangeli]

Strano, io ho fatto una prova in un nuovo progetto ed il badge è sempre con la scritta bianca.

Su che Browser/Dispositivo l'hai visto?

Riesci ad allegare un progettino che replica il caso?

[alesic]

ciao, il comportamento lo noto su IE9, Chrome, iPhone, iPad che sono tutti i dispositivi che ho a disposizione.
Ho creato un esempio da zero che si comporta allo stesso modo

grazie

[d.pierangeli]

Ho capito, succede solo su Iphone e non su Ipad; questo perchè nel css dell'Iphone (Iphone.css) c'è una classe aggiuntiva che cambia il colore del testo.

Per risolverlo puoi mettere nel file custom.css le seguenti classi:

.badge-red
{
display: inline-block;
position: relative;
padding: 0px 3px 0px;
background: #f13c31;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f79690), to(#ae0c09));
-webkit-background-clip: padding-box;
border:2px solid #fff;
min-width: 16px;
height: 22px;
-webkit-border-radius: 18px;
-webkit-box-shadow: 0px 2px 2px #000 !important;
box-shadow: 0px 2px 2px #000 !important;
z-index:9999;
color: #fff !important;
font-weight: bold;
text-align: center;
}

.badge-grey
{
display: inline-block;
position: relative;
padding: 0px 3px 0px;
background: #8b99b4;
border:1px solid #fff;
min-width: 16px;
height: 22px;
-webkit-border-radius: 18px;
z-index:9999;
color: #fff !important;
font-weight: bold;
text-align: center;
font-size: 18px;
}

L'unica differenza con le classi standard del template è l'important nelle impostazioni del colore, che fa si che l'impostazione vinca su quella dell'altro css.

Abbiamo creato l'attività NPQ00635 per tenere conto di questa conversazione. Quando verrà valutata, potrai seguirne l'andamento con Instant Developer Roadmap.

[alesic]

grazie!