Modification de la hauteur d’un sélecteur de date jquery

J’essaie de changer la hauteur d’un sélecteur de date que j’utilise. J’ai travaillé avec firebug et j’ai pu changer la largeur en modifiant la classe ui-datepicker comme ceci:

 .ui-datepicker { width: 12em; height: 12em; }

La largeur fonctionne bien, mais la hauteur ne change que le dos de la calandre, et non les cellules, alors je me retrouve avec quelque chose comme ceci: Remarquez la hauteur des cellules par rapport au fond

Où la hauteur de l’arrière-plan sélecteur de date a changé, mais les cellules sont les mêmes. Dans la classe .ui-datepicker table je me suis fatigué pour append une ligne de height: 80% de code height: 80% , mais la hauteur ne descendra pas plus bas que 100% (ou du moins une baisse ne changera pas l’apparence du datepicker). J’ai regardé à travers le CSS pour essayer de trouver où la hauteur est réglée, mais je ne peux pas le trouver jusqu’à présent. Aucune suggestion?

Je l’ai eu plus petit en changeant les deux lignes suivantes. J’ai changé la largeur sur le sélecteur de date de 14 à 12 heures; et définissez la police sur .7em.

 .ui-datepicker { width: 12em; padding: .2em .2em 0; display: none; } .ui-datepicker table {width: 100%; font-size: .7em; border-collapse: collapse; margin:0 0 .4em; }

Le sélecteur de date contient quelques éléments différents qui affectent la hauteur. Il n’ya pas de bon sélecteur que j’ai trouvé qui permette d’échelonner le tout.

Vous parlez d’agrandir les cellules. Pour cela, vous pouvez cibler les balises d’ancrage à l’intérieur du sélecteur de date.

 .ui-datepicker td a { height: 1.4em; }

Faire quelque chose comme ça rendra toutes les cellules plus grandes et la fenêtre entière de datepicker se développera automatiquement. Notez que si vous augmentez la hauteur, ce sélecteur ne changera pas la largeur. Essayer d’append une propriété “width” à ce sélecteur créera un remplissage indésirable. Vous devrez le faire comme vous le faisiez à l’origine.

 .ui-datepicker { width: 12em; }

Suivre les étapes m’a aidé.

Ouvrez le fichier CSS ‘jquery-ui.css’ dans \ Content \ themes \ base \
Passer à la section ‘jQuery UI Datepicker 1.8.7’
Modifiez les propriétés Width et Height des éléments suivants conformément à la configuration requirejse .ui-datepicker .ui-datepicker
.ui-datepicker th
.ui-datepicker td
.ui-datepicker td span .ui-datepicker td a

Voici l’interface utilisateur modifiée http://soffr.miximages.com/jquery/JQueryDatePicker.png

Je pense que vous devez modifier spécifiquement la hauteur des cellules du tableau, par exemple, comme ceci:

 .ui-datepicker td { height: 1em; }

Ce qui ajustera également la hauteur du sélecteur de date.

Encore plus petit que la réponse donnée:

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

Changer la taille de la police, tout change

Faites juste ça. La hauteur serait automatiquement prise en charge

 .ui-datepicker { width: 12em; font-size:10pt; }

Si c’est un sélecteur de date en ligne, il y a une astuce. Il suffit de donner un identifiant à datepicker.

. Modifiez maintenant la taille de la police de datepicker en fonction de vos besoins. Cela changera automatiquement la taille de datepicker. css code: #datepicker{ font-size: 20px; } #datepicker{ font-size: 20px; }

La réponse sélectionnée étant déjà correcte, il semble que la hauteur et la largeur n’aient pas été correctement ajustées. Dans mon cas, le code ci-dessous a parfaitement fonctionné.

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

DEMO

Essayez de réduire la propriété line-height de .ui-datepicker td. Dans ce cas, vous devrez probablement jouer avec le remplissage et la taille de la police pour que les chiffres tiennent dans les cases, mais je pense que la hauteur de ligne fera ce que vous recherchez.

Je ne peux pas voter, alors voici le mien

 #dataAgenda2 .ui-widget { font-size: 0.8em !important; }

Je l’ai fait en utilisant le code suivant:

 .ui-datepicker { width: 200px; height:200px; }

Voici un petit exemple JSFiddle dans lequel vous pouvez modifier la largeur et la hauteur à votre guise.

Changer le rembourrage!

 .ui-datepicker td span, .ui-datepicker td a { padding: 10px 5px !important; }