Lo que he descargado una costumbre temática de la UI de jQuery y se añade el control de calendario a mi sitio (Ejemplo: enlace de texto). En el ejemplo que se muestra/muestra el tamaño me gustaría, pero en mi página es acerca de dos veces el tamaño. por qué???

Tengo una tonelada de CSS pero no tengo control sobre la apariencia de la página (no se Puede tocar actual CSS, MEH!!). Es allí una manera de conseguir la demo que buscar en mi sitio?

Creo que este es el código que jQuery UI tiene que podría complicar las cosas

/* Component containers
----------------------------------*/
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; }
.ui-widget-content a { color: #616161; }
.ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(../images/ui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }
.ui-widget-header a { color: #fff; }

Es parte de la interfaz de usuario Personalizados de CSS

  • pero parece que la demo tiene un rumbo a través de así
  • Sé que esta pregunta es más de un año de edad, pero ha sido muy útil para mí, gracias!
  • Ídem, acabo de encontrar esta y lo necesitaba. Yay Desbordamiento De Pila.

12 Comentarios

  1. 67

    Me lo imaginé. Fue el tamaño de la fuente que estaba tirando la cosa entera apagado. He añadido esta etiqueta para mostrar correctamente el tamaño que yo quería:

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

    Funciona muy bien si alguien necesita algo de esto

    • En realidad podría funcionar mejor para darle un porcentaje.
    • Futuro nota: el Uso de la interfaz de usuario de la clase widget en su lugar, ya que este problema afecta a otros elementos gráficos. .ui-widget { font-size: 12px; }
    • El cambio a 12 px; no funcionó para mí. Tuve que cambiarlo .6em
    • no funciona cambia el .ui-widget para mí. Tenía que cambiar Phill dijo.
    • Gracias Phil, esto sólo me ayudó.
    • hurra!!! SharePoint 2010 cambiado de alguna manera el tamaño de la fuente y la causa de este problema. Esta resuelto. Gracias!
    • ¿Qué pasa si usted tiene más de un selector de fechas en la página – no sé por qué hay incluso un «id» de la propiedad en esto, dado que múltiples datepickers seguramente es común. Parece que al menos debería ser aplicado a la clase y no el id.
    • Sólo utiliza 1 datepicker de instancia, ya que sólo muestra 1 selector de fecha en un momento, por lo que no necesita para crear más datepickers para cada calendario tiene para mostrar. Por lo tanto, el valor del id que es aceptable y valida perfectamente bien…

  2. 9
    .ui-widget{ font-size: 0.8em; }

    Que es la solución, pero, lo que no sé es si la pones en la cabeza del elemento como este:

    <style type="text/css">
    .ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
    </style>

    Se invalida el resto de la configuración de, por lo que aún puede cargar el alojada en google css pero el uso de este para reemplazarlo =)

    • sólo si la pones después de la css enlace. Tiene que venir inferior de la página, de manera que se anula. La definición de este antes de la CSS enlace no tendrá ningún efecto.
    • +1: como jcolebrand dijo, tenemos que ponerlo después, pero podemos utilizar la versión alojada en google.
  3. 8

    Para fijar el tamaño de la agenda de cambio de control esta:

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

    a este:

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

    Para obtener instrucciones detalladas, por favor visite – http://blog.greatdevelopers.com/?p=33

  4. 5

    Si desea establecer el tamaño de fuente o la fuente de la familia para todos los de jQuery widgets, sería mejor establecer algo como esto:

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

    después de la llamada a la carga de jQuery UI los archivos CSS.

    Todos jQuery componentes de interfaz de usuario son los widgets y heredar la .ui-widget estilo en el nivel superior.

    • Esto es mucho mejor…
  5. 1

    Un DOM inspector (por ejemplo, Firefox, IE Developer Toolbar, etc.) debe ayudarle a determinar qué estilos CSS están afectando a su calendario.

    Tal vez la parte que es de restricción que tocar el CSS dejaría vía libre dentro de un contenedor? I. e.,

    <div id="foo">Your stuff goes here. All your selectors must start with #foo</div>

    Si no, que al parecer tiene el control sobre el JS. Usted debe ser capaz de escribir estilos en línea con eso.

    EDITAR

    También puede ver si usted puede conseguir su contenido envuelto en un iframe.

    • A veces me pregunto por qué me responden en todo siempre hay alguien que me golpea con el punzón y, generalmente, con una mejor respuesta!
    • Parece que una parte de la CSS tiene una huelga a través de ella: Consulte editar el post
    • No estoy seguro de lo que quieres decir. Puede usted ser más específico? No veo la huelga-a través de, o tiene alguna <strike> tags en mi post.
  6. 1

    Para mí para hacer mi calendario más pequeño que yo tuve que hacer un par de cambios en el css.

    Como algunas otras personas ya mencionado, he añadido la siguiente línea a una etiqueta de estilo dentro de mi página (para que no afecte a todos los otros selectores de fecha en mi sitio)

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

    Pero esto sólo hizo que el título de tamaño más pequeño (mes, año). Con el fin de hacer que el día a día de las etiquetas y el número de día del menor tuve que copiar el siguiente dos líneas de jquery-ui-1.8.18.personalizado.css y ponerlos en mi página, pero entonces yo también tenía añadir la fuente-tamaño especificaciones para ambos.

    .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;}
    .ui-datepicker td { border: 0; padding: 1px; }

    Así que lo terminé con es el siguiente:

    <style type="text/css">
    div.ui-datepicker{ font-size:7px;}
    .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size: 1.6em;}
    .ui-datepicker td { border: 0; padding: 1px; font-size: 1.6em;}
    </style>

    Esto me permite controlar el tamaño de fuente para la fecha & año, día de la semana de las etiquetas, y los números de fecha.

  7. 1

    Yo te recomiendo usar

    .ui-datepicker { font-size:10px !important; }

    lugar de utilizar

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

    porque css selectores de clase tienen mayor alcance, como comparar a usar selectores de elementos que son sólo para determinado elemento. Todo lo que necesitas hacer es crear otro elemento html del tipo de clase, y usted no tiene que preocuparse de nada en absoluto.

    Sin embargo, en el problema que usted no tiene que hacer nada, tan sólo añadir el selector de clase a su propio archivo css NO el uno para jquery-ui, y que están ordenados, si usted necesita para crear otro datepicker usted no tiene que preocuparse acerca de cómo modificar el css de nuevo de esta manera.

  8. 1

    Uso de CSS zoom

    .ui-widget{ 
        -ms-transform: translate(-15%,-15%) scale(0.7);//translate must be before scale
        -moz-transform: translate(-15%,-15%) scale(0.7);
        -webkit-transform: translate(-15%,-15%) scale(0.7);
        transform: translate(-15%,-15%) scale(0.7);
    }

    En el código anterior, he utilizado «sclale(0.7)», lo que significa que el ancho y la altura será de 70% de los valores originales. El elemento después de la transformación tendrá el mismo centro de del elemento original, por lo tanto, la reducción de un 30% de la anchura que significa una reducción de 15% desde la izquierda y el 15% de la derecha, la misma cosa para la altura. Así que tenemos que utilizar traducir para mover el elemento nuevo en la parte superior izquierda. «traducir» debe ser antes de la «escala» de modo que «el 15%» será de un 15% de la anchura original (es decir, antes de escala) y no de la nueva anchura después de la transformación.

    jQuery UI Calendario muestra demasiado grande, sería como el demo de tamaño?

    • Genial! Funciona como un encanto. Ahora sólo necesito centro. Es en la parte inferior derecha de la div quiero que se centro en el, pero se ve genial!!
    • FYI: he editado la respuesta mediante la adición de un código de centro.
    • ¿Por qué estás usando una constante fija y no algo proporcional o 2d translate() o traducir de origen? traté de jugar con él hoy en día, pero todavía no podía entender exactamente por qué se escala hacia la esquina inferior derecha, o lo que los ratios aplicados. Hice un hacky manipulación, pero prefiero indagar sobre la estera y las relaciones de derecho y que se entienda mejor, si es posible, en lugar de cortarlo.
    • FYI: he mejorado la respuesta con sus sugerencias. Ahora funciona como un encanto.
  9. 0

    Comprobar que usted no tiene css conflictos en su página – por ejemplo html/cuerpo del contenedor o de la fuente-tamaño de la configuración que desembocan en el calendario.

  10. 0

    Cualquier tamaño que usted desea, puede establecer mediante la edición de esta línea en el css.

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

    acaba de dar otro tamaño de fuente gusta .5em o .8em

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

    Que va a trabajar, que tengo no es.

  11. 0

    Esto es simple : Jquery-ui acaba de hacer su trabajo con el estilo de objeto. Quiero decir :

    <html>
       <body
         <input type="text" id="date"/>
         <script type="text/javascript"> $("#date").datepicker()</script>
       </body>
    </html>

    El tamaño de la fecha, el número y munth nombre se establecerá en función de : $(«#fecha»).css(«font-size»). Por lo tanto, si la entrada tiene 6px como tamaño de fuente, datepicker se vea más pequeña. Si el tamaño de fuente es de 42 puntos, va a ser un ciego selector de fecha!

  12. 0

    Me acaba de pasar a tropezar a través de este, pero trate de añadir el DOCTYPE html de su documento

    <!DOCTYPE html>
    <html>
        <body>
        </body>
    </html>

    antes de su apertura etiqueta html.

Dejar respuesta

Please enter your comment!
Please enter your name here