It is currently 17 May 2022, 7:06 Advanced search

MOB: badge disabilitato

Questo forum è nato con lo scopo di raccogliere le proposte di modifica di Instant Developer e discuterne insieme.

MOB: badge disabilitato

Postby alesic » 13 March 2013, 12:54

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
Attachments
Immagine.png
badge disabilitato e abilitato
Immagine.png (17.58 KiB) Viewed 4664 times
User avatar
alesic
 
Posts: 179
Joined: 26 October 2010, 12:17
Location: Torino

Re: MOB: badge disabilitato

Postby d.pierangeli » 14 March 2013, 8:40

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?
User avatar
d.pierangeli
Pro Gamma
Pro Gamma
 
Posts: 7247
Joined: 30 September 2010, 15:35

Re: MOB: badge disabilitato

Postby alesic » 19 March 2013, 9:58

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
Attachments
InstDev1.zip
(362.65 KiB) Downloaded 343 times
User avatar
alesic
 
Posts: 179
Joined: 26 October 2010, 12:17
Location: Torino

Re: MOB: badge disabilitato

Postby d.pierangeli » 19 March 2013, 11:30

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.
User avatar
d.pierangeli
Pro Gamma
Pro Gamma
 
Posts: 7247
Joined: 30 September 2010, 15:35

Re: MOB: badge disabilitato

Postby alesic » 20 March 2013, 13:45

grazie!
User avatar
alesic
 
Posts: 179
Joined: 26 October 2010, 12:17
Location: Torino


Return to Proposte di modifica

Who is online

Users browsing this forum: No registered users and 4 guests