jQuery Date Picker es más grande que el sitio de vista previa

Question

Estoy tratando de probar la herramienta de calendario jQuery, pero es appears to be too big, más grande que preview page.

¿Alguna idea?

Gracias!

Answer 1

Me encontré con el mismo problema. Tuve que cambiar los tamaños de fuente en el CSS personalizado a algo que no sea 1.25em. Creo que utilicé poco porque era lo que usaba en otras partes de mi aplicación.

Al navegar por la página en FireFox, pude inspeccionar todo el control de calendario en FireBug y cambiar el tamaño de letra a medio (creo, quizás pequeño) y se procesó perfectamente en ese punto. Acabo de entrar en el CSS de UI y lo cambié permanentemente y no tengo quejas desde entonces.

Salida my post here ...

Answer 2

¿Tiene algún CSS específico que ajuste el tamaño de la fuente? Eso ajustaría cualquier tamaño de fuente jQuery.

Answer 3

Es muy probable que una hoja de estilo esté controlando esto. En cuanto a la fuente de la página web, es this one o this one.

Como puedes ver, son bastante feos, pero puedes ejecutarlos a través de un prettificador como this one.

O simplemente puede descargar una versión de JQuery UI que tenga el tema de la luminosidad. Supongo que ya tiene los tamaños correctos.

Answer 4

Comprueba que estás utilizando el mismo tema de jQueryUI que usa el sitio de demostración. He visto este problema exacto al cargar el tema incorrecto en mi sitio.

Answer 5

Puede usar Firebug's Inspect feature para seleccionar uno de los valores y verá qué hojas de estilos establece el tamaño de la fuente. Luego puede cambiarlo para que se ajuste a sus necesidades.

Answer 6

Esto tiene algo que ver con los estilos CSS que está utilizando jQuery (Esto es atar en la respuesta de todos los demás sobre el css), especialmente el de estar en em font-size comparado a px: creo que está intentando heredar estilos de la página en sí, o algo así.

Para mí, la solución era cambiar tamaño de fuente de la clase css ui-widget a 11px, lo que resulta en la siguiente clase 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

en el archivo CSS cambiar el tamaño de fuente, por ejemplo,mi archivo css pasa a ser

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

y me cambió

.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 simplemente añadir esta línea css:

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

Answer 9

Sólo tiene que añadir en su css línea:

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

así:

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

Answer 10

me encontré con un problema similar. Lo resolví inspeccionando los elementos usando la herramienta de desarrollador de Chrome y me di cuenta de que el elemento div que contenía el marcador de fecha (es decir, el div con id ui-datepicker-div) se adjuntó al elemento body. El datepicker div tiene su atributo font-size css establecido en 1.1em (de la clase ui-widget en el archivo base css de jQuery UI). Como no había establecido un tamaño de fuente en el elemento body (es decir, el elemento que contiene el selector de fecha), se usa de manera predeterminada 16px de acuerdo con this blog. Establecer un font-size explícito en el elemento del cuerpo resolvió el problema para mí.