Intereting Posts

Comment faire pivoter un code HTML 90 degrés? Html.fromHtml désapprouvé dans Android N Exception de la méthode Java 8 de référence non gérée Comment conserver les sauts de ligne lorsque jsoup est utilisé pour convertir du HTML en texte brut? Qu’est ce qui est nul en Java? Pourquoi utiliser ? Option de suffixe ordinale mois-jour pour NSDateFormatter setDateFormat Fonction de sorting personnalisée dans ng-repeat Erreur de génération d’équipe: le chemin d’access… est déjà associé à l’espace de travail Création de coins arrondis à l’aide de CSS Mercurial feuille de sortingche git? Je veux que mon application Android ne soit exécutée qu’en mode portrait? Quelle est la différence entre «mvn clean package» et «mvn clean install»? Cassandra: texte vs varchar Que signifient les symboles de makefile $ @ et $ <?

Comment redimensionner le contrôle jQuery DatePicker

J’utilise le contrôle jQuery DatePicker pour la première fois. Je travaille sur mon formulaire, mais il est environ deux fois plus gros que je le souhaiterais, et environ 1,5 fois plus grand que la démo de l’interface utilisateur de jQuery. Y a-t-il un réglage simple qui me manque pour contrôler la taille?

Edit: J’ai trouvé un indice, mais cela ouvre de nouveaux problèmes. Dans le fichier CSS, il indique que le composant sera mis à l’échelle en fonction de la taille de la police de l’élément parent. Ils recommandent de définir

body {font-size: 62.5%;}

faire 1em = 10px. Faire cela me donne un datepicker bien dimensionné, mais évidemment, cela perturbe le rest de mon site (j’ai actuellement la taille de la police: .9em).

J’ai essayé de lancer un DIV autour de ma zone de texte et de définir sa taille de police, mais cela semble ignorer cela. 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 gâcher le rest de mon site?

Vous n’avez pas à le changer dans le fichier css de jquery-ui (cela peut être déroutant si vous modifiez 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 si ui-widget est mentionné après le ui-datepicker dans la déclaration

Je ne peux pas append de commentaire, c’est donc en référence à la réponse acceptée par Keijro. J’ai ajouté les éléments suivants à ma feuille de style:

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

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

Je ne sais pas si un organisme a suggéré la voie suivante, si oui, ignorez simplement mes commentaires. Je l’ai testé aujourd’hui et cela fonctionne pour moi. En redimensionnant simplement la police avant l’affichage du contrôle:

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

Utiliser la fonction de rappel avant Afficher

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; }

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.

Pour moi, c’était la solution la plus simple: j’ai ajouté la font-size:62.5%; la font-size:62.5%; à la première .ui-datepicker du fichier css personnalisé jquery:

avant:

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

après:

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

J’essayais ces exemples sans succès. Apparemment, d’autres feuilles de style sur la page définissaient des tailles de police par défaut pour différentes balises. Si vous ajustez l’interface utilisateur, vous modifiez un div. Si vous modifiez une div, vous devez vous assurer que le contenu de cette div hérite de cette taille. C’est ce qui a finalement fonctionné pour moi:

Bonne chance!

J’utilisais une entrée pour collecter et afficher le calendrier, et pour pouvoir redimensionner le calendrier, j’utilisais ce code:

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

Il fonctionne comme un charme.

$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');

Cela a fonctionné pour moi et semble simple …

 $(function() { $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'}); });

 with out changing the css file you can also change the calendar size by putting the the following code in to ur ..... tag:   jQuery UI Datepicker - Icon sortinggger

J’ai essayé d’utiliser la fonction callback beforeShow mais j’ai aussi dû définir la hauteur de la ligne. Ma version ressemblait à:

 beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}

le meilleur endroit pour changer la taille du calendrier est dans le fichier jquery-ui.css

 /* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: .7em; /* <--default is 1.1em */ }

Ce code fonctionnera sur les boutons de calendrier. la taille des nombres augmentera en utilisant “line-height”.

 /* Change Size */

vous pouvez changer jquery-ui-1.10.4.custom.css comme suit

 .ui-widget { font-family: Lucida Grande,Lucida Sans,Arial,sans-serif; font-size: 0.6em; }

Une autre approche:

 $('.your-container').datepicker({ beforeShow: function(input, datepickerInstance) { datepickerInstance.dpDiv.css('font-size', '11px'); } });

$('div.ui-datepicker').css({ fontSize: '12px' }); travailler si on l’appelle après $("#DueDate").datepicker();

Violon

La solution de Jacob Tsui fonctionne parfaitement pour moi:

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

Je pense que je l’ai trouvé – je devais aller dans le fichier CSS et changer la taille de la police pour le contrôle Datepicker directement. Evident une fois que vous le savez, mais déroutant au début.

ouvrir le fichier ui.all.css

à la fin mis

 @import "ui.base.css"; @import "ui.theme.css"; div.ui-datepicker { font-size: 62.5%; }

et aller !

Pour que cela fonctionne dans Safari 5.1 avec Rails 3.1, j’ai dû append:

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