Styliser le jQueryUI DatePicker
J'utilise le jpery datepicker ( http://jqueryui.com/demos/datepicker/ ).
Le sélecteur de date sur la page de démonstration est petit et compact. Cependant, lorsque j'utilise le sélecteur de date sur mon site, le calendrier est ÉNORME. Je dirais que chaque date utilise une police de 12 pt.
Comment puis-je réduire les jours?
La réponse simple: vous pouvez ajouter une taille de police dans votre CSS à ".ui-datepicker".
Mais je pense que vous pouvez avoir des règles CSS qui sont contradictoires. Vous devriez utiliser la méthode du lien de Paulo pour vérifier si c'est le cas.
C'est un peu tard, mais pour référence future seulement: Ajoutez ceci entre votre, après la référence jquery ui css.
<style type="text/css">
.ui-datepicker { font-size: 9pt !important; }
</style>
et il deviendra plus petit.
La toute première ligne de jquery.ui.theme.css a la taille de police:
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: .9em; }
Aucune de vos règles CSS n'est en conflit - je peux le vérifier en toute confiance!
La raison en est que les pages de démonstration de jQuery peuvent être TRÈS trompeuses. Comme l'a dit Seth, leurs pages ont de nombreuses règles CSS supplémentaires ajoutées au-dessus du CSS par défaut de la bibliothèque. Si vous regardez ici:
http://jqueryui.com/demos/demos.css
Vous verrez qu'ils réduisent considérablement la taille de la police de base, ce qui est la vraie cause.
Moi aussi, j'obtenais le même problème exact où j'obtenais un sélecteur de date beaucoup plus grand sur mes pages que sur leur démo. Pour confirmer que c'était [~ # ~] leur [~ # ~] CSS qui était "en conflit", j'ai utilisé le menu CSS de la barre d'outils du développeur Web dans Firefox pour désactiver uniquement le fichier CSS indiqué ci-dessus, puis tout à coup LEUR site de démonstration avait de grands sélecteurs de date de la même taille que le mien.
Ainsi, la meilleure réponse ici est incorrecte - ce n'est rien de votre côté - c'est entièrement la façon dont ILS ont diminué la taille de base. Je vous garantis que si vous essayez ce que j'ai mentionné ici, vous trouverez la même chose.
jQuery UI a un rouleau de thème qui vous permet de personnaliser l'un des thèmes existants, y compris les polices, les couleurs et les arrière-plans avant le téléchargement. Vous pouvez faire d'autres choses comme définir le rayon des coins, les marges et le rembourrage.
Je recommanderais d'essayer de le personnaliser autant que possible avant de télécharger afin d'avoir moins à bricoler lors de son utilisation sur votre site.
N'oubliez pas de définir les tailles de police par défaut et celles-ci pour toute la page après que vous avez appelé la feuille de style jQuery UI.
Les pages de démonstration ont un peu de CSS supplémentaire pour `` réparer '' ce qui vient dans le CSS emballé qu'elles ne mentionnent nulle part. À mon avis, ils font un mauvais travail en expliquant cela, surtout avec combien de temps le CSS standard utilise! Important.
En outre, le ThemeRoller utilise em par défaut, qui est% d'un jeu de polices ailleurs.
Quoi qu'il en soit, les dates sont des liens, donc pour les rendre plus petites, définissez une taille pour environ 9 pixels.
Voici ce que je fais avant d'utiliser n'importe quel jquery:
h1 {font-size:10px;}
h2 {font-size:11px;}
h3 {font-size:11px;}
p {font-size:11px;}
a {font-size:11px;}
Incluez-vous jquery-ui.css dans vos déclarations CSS?
En outre, l'exemple de page contient un tas de déclarations de taille de police dans son CSS.
Ils ont une taille de police de 10 pt sur le corps. Supprimez cela dans Firebug et vous verrez probablement les mêmes tailles de police que celles que vous voyez sur votre page.