35 votes

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

J'ai donc téléchargé un personnalisé sur le thème de l'INTERFACE utilisateur de jQuery et ajouté le contrôle de calendrier pour mon site (Exemple: texte du lien). Dans l'exemple, il affiche/affiche la taille que je voudrais, mais sur ma page, c'est environ le double de la taille. pourquoi???

J'ai une tonne d'autres CSS mais je n'ai pas de contrôle sur l'apparence de la page (ne Peut pas toucher CSS, MEH!!). Est-il un moyen d'obtenir la démo coup d'oeil sur mon site?

Je pense que c'est le code de jQuery UI a qui pourrait être de 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; }

C'est une partie de l'INTERFACE utilisateur Personnalisée CSS

67voto

Phill Pafford Points 32046

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

9voto

gideon Points 12241
 .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-le pour le remplacer =)

8voto

Shekhar Agarwal Points 81

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, visitez le site http://blog.greatdevelopers.com/?p=33.

5voto

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.

1voto

steamer25 Points 4224

Un inspecteur DOM (par exemple, Firebug, la barre d’outils pour les développeurs 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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X