web-dev-qa-db-fra.com

jQuery UI Calendar affiche trop grand, vous voulez la taille de la démo?

J'ai donc téléchargé une interface utilisateur personnalisée pour jQuery et ajouté le contrôle de calendrier à mon site (Exemple: link text ). Dans l'exemple, il montre la taille que je voudrais mais sur ma page Web, il est environ deux fois plus grand. Pourquoi??? 

J'ai une tonne d'autres CSS, mais je n'ai aucun contrôle sur l'apparence de la page (je ne peux pas toucher aux CSS actuelles, MEH !!). Existe-t-il un moyen d'obtenir le look démo sur mon site?

Je pense que c'est le code que jQuery UI a qui pourrait être compliquer les choses

/* Component containers
----------------------------------*/
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; }
.ui-widget-content a { color: #616161; }
.ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(../images/ui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }
.ui-widget-header a { color: #fff; }

Cela fait partie de l'interface utilisateur personnalisée CSS

jqueryuser-interfacejquery-ui
35
Phill Pafford

Je l'ai compris. C'est la taille de la police qui a tout jeté. J'ai ajouté cette balise pour afficher correctement la taille souhaitée:

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

Fonctionne très bien si quelqu'un d'autre a besoin de quelque chose comme ça

67
Phill Pafford
.ui-widget{ font-size: 0.8em; }

C'est la solution, mais ce que je ne savais pas, c'est si vous la mettez dans l'élément head comme ceci:

<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
</style>

Il remplace les autres paramètres , vous pouvez donc toujours charger le fichier CSS hébergé de Google, mais utilisez cette option pour le remplacer =)

9
gideon

Pour corriger la taille du contrôle du calendrier, changez ceci:

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

pour ça:

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

Pour des instructions détaillées, rendez-vous sur - http://blog.greatdevelopers.com/?p=33

8
Shekhar Agarwal

Si vous souhaitez définir la taille de police ou la famille de polices pour tous les widgets de jQuery, il est préférable de définir un paramètre similaire à celui-ci:

.ui-widget {
    font-size: .7em;
}

après l’appel pour charger les fichiers CSS jQuery UI.

Tous les composants de l'interface utilisateur jQuery sont des widgets et héritent du style .ui-widget au niveau supérieur.

5
Harish

Utiliser le zoom CSS

.ui-widget{ 
    -ms-transform: translate(-15%,-15%) scale(0.7);//translate must be before scale
    -moz-transform: translate(-15%,-15%) scale(0.7);
    -webkit-transform: translate(-15%,-15%) scale(0.7);
    transform: translate(-15%,-15%) scale(0.7);
}

Dans le code ci-dessus, j'ai utilisé "sclale (0.7)", ce qui signifie que les nouvelles largeur et hauteur seront égales à 70% des valeurs d'origine. L'élément après transformation aura le même centre de l'élément d'origine, ce qui réduira de 30% la largeur, ce qui signifie réduire de 15% à gauche et de 15% à droite, la même chose pour la hauteur. Nous devons donc utiliser translate pour déplacer le nouvel élément en haut à gauche. "translate" doit être avant "scale", donc "15%" correspondra à 15% de la largeur d'origine (c'est-à-dire avant que nous mettions à l'échelle) et non à la nouvelle largeur après la transformation.

 enter image description here

1
Billel Hacaine

Un inspecteur DOM (par exemple, Firebug, la barre d’outils du développeur IE, etc.) devrait vous aider à déterminer les styles CSS qui affectent votre calendrier.

Peut-être que la partie qui vous empêche de toucher au CSS vous permettrait de régner librement dans un conteneur? C'est à dire., 

<div id="foo">Your stuff goes here. All your selectors must start with #foo</div>

Sinon, vous avez apparemment le contrôle du JS. Vous devriez pouvoir écrire des styles en ligne avec ça.

MODIFIER

Vous pouvez également voir si vous pouvez obtenir votre contenu enveloppé dans un iframe.

1
steamer25

Je vais vous recommander d'utiliser 

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

à la place d'utiliser 

#ui-datepicker-div { font-size:10px !important; }

parce que les sélecteurs de classe css ont une portée plus large par rapport à l’utilisation de sélecteurs d’éléments qui ne sont destinés qu’à des éléments spécifiques. Tout ce que vous avez à faire est de créer un autre élément html du type classe et vous n’aurez à vous soucier de rien. 

Cependant, dans votre problème, vous n'avez rien à faire: ajoutez simplement le sélecteur de classe à votre propre fichier CSS, pas celui de jquery-ui; modifier le css à nouveau de cette façon.

1
A Malik

Afin de réduire la taille de mon calendrier, j'ai dû apporter quelques modifications supplémentaires au fichier CSS.
Comme d'autres personnes déjà mentionnées, j'ai ajouté la ligne suivante à une balise de style dans ma page (pour que cela n'affecte pas tous les autres sélecteurs de dates de mon site)

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

Mais cela n'a fait que réduire la taille du titre (mois année). Afin de réduire les étiquettes et les numéros de jours des jours de la semaine, je devais également copier les deux lignes suivantes du fichier jquery-ui-1.8.18.custom.css et les mettre dans ma page, mais je devais également ajouter la police. Spécifications de taille pour les deux.

.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;}
.ui-datepicker td { border: 0; padding: 1px; }

Donc ce que j'ai fini avec est le suivant:

<style type="text/css">
div.ui-datepicker{ font-size:7px;}
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size: 1.6em;}
.ui-datepicker td { border: 0; padding: 1px; font-size: 1.6em;}
</style>

Cela me permet de contrôler la taille de la police pour la date et l'année, les étiquettes des jours de la semaine et les numéros de date.

1
Vincent

Vérifiez que votre page ne comporte pas de conflits CSS - par exemple, des paramètres html/body ou de taille de police du conteneur qui seraient transmis au calendrier.

0
ScottE

Quelle que soit la taille souhaitée, vous pouvez définir cette ligne en css.

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

il suffit de donner une autre taille de police comme .5em ou .8em

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

Cela fonctionnera, je ne l’ai pas fait.

0
Praveen kumar Agrawal

Je suis tombé par hasard sur ça, mais essayez d’ajouter le DOCTYPE html à votre document.

<!DOCTYPE html>
<html>
    <body>
    </body>
</html>

avant votre balise HTML d'ouverture.

0
Michael

C’est simple: Jquery-ui fait juste son travail en utilisant le style objet. Je veux dire :

<html>
   <body
     <input type="text" id="date"/>
     <script type="text/javascript"> $("#date").datepicker()</script>
   </body>
</html>

La taille du numéro de date et le nom du mois seront définis en fonction de: $ ("# date"). Css ("taille de la police"). Donc, si l'entrée a une taille de police de 6px, datepicker aura l'air petit. Si la taille de la police est de 42 points, ce sera un sélecteur de date pour les aveugles!

0
N Joly