jQuery Il selettore di date è più grande del sito di anteprima

Question

Sto provando a testare lo strumento di calendario jQuery, ma è appears to be too big, più grande dello preview page.

Qualche idea?

Grazie!

Answer 1

Mi sono imbattuto nello stesso problema. Ho dovuto modificare le dimensioni dei caratteri nel CSS personalizzato con qualcosa di diverso da 1.25em. Credo di aver usato piccoli come quello che ho usato altrove nella mia app.

Mentre si sfogliava la pagina in FireFox, sono stato in grado di ispezionare l'intero controllo del calendario in FireBug e modificare la dimensione del carattere in media (penso, forse piccola) e reso perfettamente a quel punto. Sono appena entrato nel CSS dell'interfaccia utente e l'ho modificato in modo permanente senza lamentele da allora.

Partenza my post here ...

Answer 2

Avete uno specifico CSS che regola la dimensione del carattere? Questo regolerebbe qualsiasi dimensione dei caratteri jQuery.

Answer 3

È molto probabile che un foglio di stile lo stia controllando. Guardando la fonte della pagina web, è this one o this one.

Come si può vedere, sono abbastanza brutto come è, ma è possibile eseguirlo tramite un prettifier come this one.

Oppure puoi semplicemente scaricare una versione dell'interfaccia utente di JQuery che contiene il tema della leggerezza. La mia ipotesi è che abbia già le dimensioni corrette.

Answer 4

Verificare che si stia utilizzando lo stesso tema jQueryUI utilizzato dal sito demo. Ho visto questo esatto problema caricando il tema sbagliato sul mio sito.

Answer 5

È possibile utilizzare Firebug's Inspect feature per selezionare uno dei valori e si vedranno quali fogli di stile imposta la dimensione del carattere. Quindi puoi cambiarlo in base alle tue esigenze.

Answer 6

Questo ha qualcosa a che fare con gli stili CSS che jQuery sta usando (Questo è legare con tutti gli altri risposta sulla CSS), in particolare il font-size essere in em confronto a px - Penso che stia cercando di ereditare gli stili dalla pagina stessa, o qualcosa del genere.

Per me, la soluzione è stata di cambiare font-size della classe CSS ui-widget 11px, con conseguente la seguente classe CSS:

.ui-widget { 
-x-system-font:none; 
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; 
**font-size:11px;** 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
line-height:normal; 
} 

Answer 7

nel file CSS cambiare il font-size per esempioil mio file css sembra essere

/css/smoothness/jquery-ui-1.8.1.custom.css 

e ho cambiato

.ui-widget { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 1.1em; 
} 

a

.ui-widget { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 0.7em; 
} 

Answer 8

O semplicemente aggiungere questa linea css:

#ui-datepicker-div { 
    font-size:12px !important; 
} 

Answer 9

Basta aggiungere nel CSS riga:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } 
font-size: 0.7em; 

come questo:

.ui-datepicker { width: 17em; font-size: 0.7em; padding: .2em .2em 0; display: none; } 

Answer 10

mi sono imbattuto in un problema simile. L'ho risolto esaminando gli elementi utilizzando lo strumento di sviluppo di chrome e ho realizzato che l'elemento div contenente il datepicker (ovvero il div con ID ui-datepicker-div) è stato aggiunto all'elemento body. Il div di datepicker ha l'attributo css font-size impostato su 1.1em (dalla classe ui-widget nel file css di base dall'interfaccia utente jQuery). Poiché non avevo impostato una dimensione font sull'elemento body (ovvero l'elemento che contiene il datepicker), per impostazione predefinita utilizza 16px in base a this blog. L'impostazione di un font-size esplicito sull'elemento body ha risolto il problema per me.