jquery-ui - ejemplos - jquery datetimepicker example

jQuery DatePicker Demasiado grande

Question

He implementado el datepicker jQuery. Parece que funciona bien, pero el calendario es demasiado grande.

jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png

El sitio en el que estoy trabajando tiene muchas capas de hojas de estilo y páginas y controles primarios. Y parece que no soy capaz de aislar lo que lo está haciendo grande. (Lo siento, el sitio no es público).

Parece que el calendario se basa en un tamaño de fuente. Intenté envolver mi cuadro de texto en un div con una fuente más pequeña pero parece ignorarlo. ¿Hay alguna manera de especificar un tamaño de fuente fijo?

Answer 1

Añadiendo esto al site.css funcionó para mí

.ui-widget {
    font-size: .7em !important;
  }

Answer 2

Estoy de acuerdo con mdmullinax. Tienes que cambiar el tamaño de fuente para toda la clase.

.ui-datepicker-div {font-size: 11px; }

porque datepicker no está controlado por ID, por lo que el cambio no tiene impacto en el tamaño

ui-datepicker-div {font-size: 11px; }

h

Answer 3

Nuestro calendario era grande y feo con flechas de mes difíciles de hacer clic. Fue causado por las versiones no coincidentes de jquery-ui css y jquery-ui js incluye.

los números de versión deben coincidir, por ejemplo,

jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js

pero también necesitaba el css recomendado anteriormente

#ui-datepicker-div { font-size:11px; }

Answer 4

Se necesita algo de excavación en firebug, pero he incluido una de las versiones que uso para reducirla. La clave es copiar los estilos exactos del archivo CSS jQuery-ui y colocarlos en el encabezado de la página que los necesita o en una hoja de estilo CSS después de la hoja de estilo jQuery-ui.

.ui-datepicker {
    padding: 0.1em 0.1em 0;
    width: 11em;
}

.ui-widget {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
}

.ui-datepicker th {
    border: 0 none;
    font-weight: normal;
    padding: 0.2em 0.1em;
    text-align: center;
}

.ui-datepicker th span {
    font-size: 11px;
}

.ui-datepicker td span, .ui-datepicker td a {
    padding: 0.1em;
}

.ui-datepicker td {
    padding: 0.9px;
}

.ui-datepicker .ui-state-highlight {
    height: 12px;
    margin-bottom: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    font-size: 10px;
    font-weight: normal;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 13px;
}

.ui-datepicker .ui-datepicker-title span {
    font-size: 11px;
}

.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {
    margin-left: -8px;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
    height: 15px;
    top: 1px;
    width: 15px;
}

.ui-datepicker-next-hover .ui-icon {
    height: 16px;
    width: 16px;
}

Answer 5

intente establecer font-size de font-size para la clase .ui-datepicker

.ui-datepicker {font-size:11px;}

http://jsfiddle.net/pxfunc/ps5cA/

Answer 6

puede cambiar "jquery-ui-1.10.4.custom.css" de la siguiente manera

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}

Answer 7

Al cambiar el tamaño de fuente para los .ui-widget de .ui-widget , obtuve los mejores resultados con lo siguiente.

#ui-datepicker-div { font-size:11px; }

Esto no solo parece hacer exactamente lo que necesito, sino que también es poco probable que afecte a otros widgets de jQuery ui.