Problème de taille de police du sélecteur de données jQuery

Tous les éléments de l’interface utilisateur jQuery peuvent être modifiés à la main dans le fichier css de l’interface utilisateur jQuery, ou vous pouvez créer votre propre thème personnalisé sur le site de l’interface utilisateur jQuery avant de le télécharger. Si vous utilisez Chrome, Safari ou Firefox avec Firebug, cliquez avec le bouton droit de la souris sur le sélecteur de date, sélectionnez “inspect element” et recherchez les lignes de code correspondantes dans le fichier css de jQuery UI que vous devez modifier. Si vous ne savez pas exactement où se trouve votre fichier css jQuery UI, consultez la rubrique Ressources de votre inspecteur Web pour trouver le chemin du fichier.

Vous aurez besoin de “thématiser” le

http://jqueryui.com/demos/datepicker/#theming

Exemple de balisage avec les classes CSS Framework de jQuery UI:

 
 Prev Next 
 January2009 
 
  ...  ... 
 
 
 
Su
 
 
 
 1 
 
 
 
 Today Done  

Enfin j’ai trouvé la solution

1. Trouvez jquery.ui.datepicker.css

2. Ajouter une taille de police: 10px; pour chaque ligne de .ui-datepicker

3. Changer avec largeur: 11em;

CSS:

 .ui-datepicker { padding: .2em .2em 0; display: none; font-size:10px; width: 11em;} .ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; font-size:10px;} .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; font-size:10px;} .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; font-size:10px;} .ui-datepicker .ui-datepicker-prev { left:2px; font-size:10px;} .ui-datepicker .ui-datepicker-next { right:2px; font-size:10px;} .ui-datepicker .ui-datepicker-prev-hover { left:1px; font-size:10px;} .ui-datepicker .ui-datepicker-next-hover { right:1px; font-size:10px;} .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; font-size:10px;} .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; font-size:10px;} .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; font-size:10px;} .ui-datepicker select.ui-datepicker-month-year {width: 100%; font-size:10px;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%; font-size:10px;} .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; font-size:10px;} .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size:10px;} .ui-datepicker td { border: 0; padding: 1px; font-size:10px;} .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; font-size:10px;} .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; font-size:10px;} .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; font-size:10px;} .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; font-size:10px;} 

 .ui-widget {font-size: 62.5%;} 

Semble faire l’affaire. Il devrait être ajouté au corps, mais de cette façon, rien d’autre ne doit être changé. https://groups.google.com/forum/?fromgroups=#!topic/jquery-ui/pri7DPcO074

Certains CSS aléatoires doivent écraser la taille de police par défaut de cet élément ou bien le supprimer complètement. Il suffit de le déclarer à nouveau ou de le définir explicitement comme !important pour compenser toute autre valeur CSS.

Voici le CSS pour le re-déclarer:

 .ui-datepicker table { border-collapse: collapse; font-size: 0.9em; /*add !important if it doesn't pick up the size*/ }