Comment redimensionner le contrôle jPage DatePicker

Question

Je suis en utilisant le contrôle DatePicker de jQuery pour la première fois. J'ai eu à travailler sur ma forme, mais il est environ deux fois plus grand que je le voudrais, et environ 1,5 fois plus grand que la démo de l'INTERFACE utilisateur de jQuery page. Est-il un simple réglage, je suis absent pour le contrôle de la taille?

Edit: j'ai trouvé un indice, mais il ouvre de nouveaux problèmes. Dans le fichier CSS, il indique le composant de mise à l'échelle selon le parent de l'élément taille de la police. Ils recommandent de régler

body {font-size: 62.5%;}

pour faire cadratin (1 em = 10px. En faisant cela me donne une bien dimensionnés datepicker, mais à l'évidence il bousille le reste de mon site (j'ai actuellement font-size: .9em).

J'ai essayé de jeter un DIV autour de ma zone de texte et définition de sa taille de police, mais il semble ignorer que. Donc il doit y avoir un moyen de réduire le datepicker en changeant la police de son parent, mais comment puis-je le faire sans avoir à remodeler le reste de mon site?

Answer 1

Vous n'avez pas besoin de le changer dans le fichier jquery-ui css (cela peut être déroutant si vous changez les fichiers par défaut), cela suffit si vous ajoutez

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

dans une feuille de style chargée après les fichiers ui

div.ui-datepicker est nécessaire dans le cas où ui-widget est mentionné après ui-datepicker dans la déclaration

Answer 2

Je ne peux pas ajouter de commentaire, donc c'est en référence à la réponse acceptée par Keijro. En fait, j'ai ajouté ce qui suit à ma feuille de style:

     div.ui-datepicker {
    font-size: 62.5%;
}
 

et ça a marché aussi. Cela pourrait être préférable à la valeur absolue de 10px.

Answer 3

Je ne sais pas si un certain corps a suggéré la façon suivante, si oui, ignorez mes commentaires. J'ai testé ça aujourd'hui et ça marche pour moi. En redimensionnant simplement la police avant que le contrôle ne s'affiche:

 $('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){    
           $(".ui-datepicker").css('font-size', 12) 
    }
});
 

Utilisation de la fonction de rappel beforeShow

Answer 4

Je change la ligne suivante dans ui.theme.css:

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

à:

 .ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }
 

Answer 5

Ajouter

 div.ui-datepicker, .ui-datepicker td{
 font-size:10px;
}
 

dans une feuille de style chargée après les fichiers ui. Cela va également redimensionner les éléments de date.