jQuery UI Thème trop gros

Lorsque je télécharge un jQuery-ui thème, que dois-je ajouter pour obtenir les valeurs par défaut de la recherche la même chose que dans le jQuery-ui page de démonstration?

La boîte de dialogue, j'en vois sortir de la boîte est ÉNORME (voir ci-dessous). Je connais le css est disponible pour moi à partir de la page de démonstration, mais je ne suis pas vraiment un CSS expert, et ne sais pas quoi prendre et quoi laisser.

jQuery UI Thème trop gros

MODIFIER

Voici un jsFiddle lien montrant la même.

MODIFIER

  • Je pense que vous devez thème rouleau pour que... avez-vous regardé ici?
  • Avez-vous des CSS de votre propre jeu?
  • Je suis en utilisant le pré-conserves de Redmond thème du thème du rouleau. J'ai essayé ce qu'il m'a donné, et aussi la google-version partagée de la même. La fois le résultat de cette pléthorique dialogue <link type="text/css" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/..." />
  • J'ai essayé de supprimer TOUS les autres css n'importe où ailleurs sur ma page—pas de changement.
  • peut-on y voir une démo ou un jsfiddle.net?
  • jsfiddle.net/w92TY

InformationsquelleAutor Adam Rackis | 2011-09-01
  1. 27

    Je vois ce qu'est la question 😛

    body{font-size:10px;}

    Les tailles sont par rapport à la page (plus d'un fluide de mise en page). Donc (au moins en coulisse) modification de la taille de police du corps fixe. Il suffit de changer vos pages tailles de police et de la boîte de dialogue changer avec lui.

    http://jsfiddle.net/hnBmC/

    • Merci!!!! Je ne suis pas normalement poser des questions de suivi, mais je pense que cela est lié: comment puis-je rétablir le navigateur par défaut de la taille de police par ailleurs? Maintenant j'applique cette classe .defaultText { font-size: 14px; } à la div qui a le plus de mon contenu. Est-il quelque chose que je peux mettre à la place de font-size: 14px qui va revenir sur le texte pour ce qu'il en serait autrement?
    • Vous pouvez obtenir de l'utilisateur de la taille de police par défaut avec medium en tant que valeur. Voir ici. Ainsi, vous utilisez font-size: medium;
    InformationsquelleAutor Joseph Marikle
  2. 41

    La meilleure façon est : modification de la base de jQuery-ui font-size:

    .ui-widget{font-size:12px;}

    Voir ce violon pour un exemple.

    • Cela devrait être marqué à répondre, car il n'affecte que le JQuery UI éléments, et pas tous dans le corps comme l'marqué solution.
    • n'oubliez pas d'ajouter !important attribut. .ui-widget{font-size:12px !important;}
    • -1: le fait de Changer juste .ui-widget n'est PAS assez. Vérifiez le jquery-ui.fichier css pour font-size paramètres - il y en a beaucoup qui utilisent diverses multiple de em. Vous auriez à changer TOUS d'entre eux pour obtenir quelque chose de cohérent. Mieux pour définir un seul font-size enfermant dans un conteneur, tel qu'un <div>.
    InformationsquelleAutor undefined
  3. 1

    De cette boîte de dialogue en-tête de problème, vous pouvez simplement ajouter le dessous de l'attribut dans la boîte de dialogue de la classe parent

    .ui-dialog { clear: both; }

    De référence,
    jQuery UI Dialog Titlebar trop grand

    • Évolution des flux de documents n'affecte pas la taille du texte que vous devez faire quelque chose pour changer la police la taille.
    InformationsquelleAutor Soundar
  4. 1

    Si vous regardez themeroller.css avec votre favori de la page web de l'inspecteur, alors vous allez trouver ceci:-

    #themeroller {
    font-size: 10px;
}
#themeroller button,
#themeroller input,
#themeroller select,
#themeroller textarea {
    font-size: 12px;
}

    Un peu de creuser dans le code HTML révèle que <div id="themeroller"> englobe l'ensemble de la "démonstration" de la page de sorte que TOUT le jquery-ui widgets sont à l'intérieur et, par conséquent, prendre leurs polices par rapport à ces valeurs.

    De regarder mon "trop gros" de la page, le texte normal a une taille de police de 18px. Cela vient de .ui-widget dans themes/ui-ténèbres/jquery-ui.css ayant font-size: 1em qui il calcule à partir de mon navigateur de la base taille de la police de 16px. J'ai découvert cette taille de base par l'inspection d'un simple document:

    <html><body>
<span style="font-size: 100%">here is some plain body text</span
</body></html>

    Donc la réponse à la question de savoir comment définir la taille de police pour jquery-ui widgets est de définir une taille de police d'un élément englobant. <body> (tel que recommandé par Joseph Marikle) est la garantie que tout, mais peut-être trop large pour répondre à vos besoins, dans ce cas, vous devez utiliser un intérieur <div> à la place. <span> est probablement mal car vous ne devriez pas enveloppement au niveau du bloc de choses dans la non-blocs - mais de vérifier cette affirmation avec le Style CSS de la Police, je suis juste un hacker!

    J'allais diatribe au sujet de pourquoi les concepteurs ont choisi de hauteurs de base sur em, qui est un largeur, plutôt que de ex, qui est un hauteur. Cependant, je soupçonne que la réponse est que em vous donne des résultats plus cohérents sur une large gamme de polices de caractères, comme la plupart des fois la hauteur d'un " l "est d'environ la même que la largeur d'un "m". A l'inverse, si vous avez utilisé 2ex que votre mesure de base, puis vous obtenez bizarre hauteurs de caractères avec un très court ou très long jambages inférieurs et supérieurs, comparativement à la hauteur d'un "x".

    InformationsquelleAutor kbro
  5. 0

    l'interface utilisateur de jquery est un framework, vous pouvez le modifier par la création de nouvelles ou existantes thème:

    /*css which made title too large, reduce padding as you need*/
.ui-dialog .ui-dialog-titlebar {
    padding: 0.5em 1em 0.3em;
    position: relative;
}
    • ce n'est pas le rembourrage... c'est une taille de police de .ui-widget
    InformationsquelleAutor cetver
  6. 0

    vous pouvez utiliser cette règle css pour appliquer la taille de la police:

    .ui-dialog{font-size: 62.5%;}

    • Il y a plus de classes affectant la taille de police que .ui-dialog - regardez dans le jquery-ui.fichier css pour font-size pour les trouver tous.
    InformationsquelleAutor ARIJIT