jQuery Date Picker est plus grand que le site d'aperçu

Question

J'essaie de tester l'outil calendrier jQuery, mais il appears to be too big, plus grand que le preview page.

Des idées?

Merci!

Answer 1

J'ai rencontré le même problème. J'ai dû changer les tailles de police dans le CSS personnalisé à quelque chose d'autre que 1.25em. Je crois que j'ai utilisé petit comme c'était ce que j'ai utilisé ailleurs dans mon application. En parcourant la page dans FireFox, j'ai pu inspecter tout le contrôle du calendrier dans FireBug et changer la taille de la police à moyen (je pense, peut-être petit) et cela s'est parfaitement rendu à ce point. Juste allé dans l'interface utilisateur CSS et en permanence changé et aucune plainte depuis.

Découvrez my post here ...

Answer 2

Avez-vous une feuille de style CSS spécifique qui ajuste la taille de la police? Cela ajusterait toutes les tailles de police jQuery.

Answer 3

Il est très probable qu'une feuille de style contrôle cela. En regardant la source de la page Web, il est soit this one ou this one. Comme vous pouvez le voir, ils sont assez moche comme c'est, mais vous pouvez le faire passer par un préclieur comme this one.

Ou vous pouvez simplement télécharger une version de JQuery UI qui a le thème de légèreté dedans. Je suppose qu'il a déjà les bonnes tailles. Vérifiez à nouveau que vous utilisez le même thème jQueryUI que celui utilisé par le site de démonstration.

Answer 4

J'ai vu ce problème exact en ayant le mauvais thème chargé sur mon site.

Answer 5

Vous pouvez utiliser Firebug's Inspect feature pour sélectionner l'une des valeurs et vous verrez quelles feuilles de style définissent la taille de la police. Ensuite, vous pouvez le changer pour répondre à vos besoins.

Answer 6

Cela a quelque chose à voir avec les styles CSS qui jquery est utilisé (Ceci est Coïncidant avec tout le monde d'autre réponse sur le css), en particulier la taille de la police étant en em par rapport à px - Je pense qu'il essaie d'hériter des styles de la page elle-même, ou quelque chose comme ça.

Pour moi, la solution était de changer l'interface-widget css font-size de classe à 11px, ce qui la classe css suivante:

.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

Dans le fichier css changer la taille de la police par exemplemon fichier css se trouve être

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

et je changé

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

à

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

Answer 8

Ou tout simplement ajouter cette ligne css:

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

Answer 9

ajoutez simplement votre css ligne:

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

comme ceci:

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

Answer 10

je suis tombé sur un problème similaire. Je l'ai résolu en inspectant les éléments à l'aide de l'outil de développement de chrome et j'ai réalisé que l'élément div contenant la datepicker (c'est-à-dire la div avec l'ID ui-datepicker-div) était ajouté à l'élément body. Le div datpicker a son attribut css font-size défini sur 1.1em (de la classe ui-widget dans le fichier css de base de l'interface utilisateur jQuery). Comme je n'avais pas défini de taille de police sur l'élément body (c'est-à-dire l'élément contenant la datepicker), il utilisait par défaut 16px selon this blog. Définir un font-size explicite sur l'élément de corps a résolu le problème pour moi.