JQuery-UI Theming - Différences de taille CSS

Lorsque vous utilisez les échantillons jQueryUI sur le site Web (theme browser), les choses se passent bien. Mais, quand je mets le code et le thème dans mon application, le dimensionnement est complètement détraqué (j'essaie d'utiliser le thème de Redmond).JQuery-UI Theming - Différences de taille CSS

Des idées sur la raison pour laquelle ces échantillons semblent si différents? Dans l'application que j'ai créée, il y a seulement 1 référence CSS qui est pour le thème Redmond ... Ces images ci-dessous sont exactement comment elles ont été rendues au navigateur.

Mon Application:
alt text http://www.imageunload.com/public/14462/jQueryUI.png

jQuery UI Exemple:
alt text http://www.imageunload.com/public/14463/jQueryUI-Sample.png

Mon Code d'application:

<div> 
    <asp:TextBox ID="txtDateSample" runat="server"></asp:TextBox> 
</div> 
</form> 
<script type="text/javascript" language="javascript"> 
    $(function() { 
     $('#<%= txtDateSample.ClientID %>').datepicker({ 
      showButtonPanel: true, 
      showOn: 'button', 
      buttonImage: '../Graphics/Icons/calendar.png', 
      buttonImageOnly: true 
     }); 
    }); 
</script>

Firebug Vue de Div:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"/>

Source

2009-03-18 RSolberg

Voici la solution http://stackoverflow.com/questions/8812401/jquery-data-picker-font-size-issue/8812568#8812568 –

Ce qui se passait pour moi. C'est parce que certains de vos styles affectent par inadvertance le calendrier div. Obtenez Firebug et vérifiez quels styles sont appliqués au calendrier. Modifiez ensuite le thème pour remplacer tout ce que vos styles font.

EDIT:

La pièce que vous recherchez est pas le code HTML généré, mais ce qui est important, il est plus de ce que les styles sont effectivement appliqués:

Firebug Style Tab http://labs.pathf.com/ajax/blogposts/05052008/Firebug_Style_Tab.jpg

Vous affichera les styles qui sont appliqués tandis que les styles qui ont été affectés mais qui ne sont pas appliqués seront affichés ~~rayés~~ . Vous verrez probablement certains de vos styles dans cette fenêtre. Ils sont probablement le coupable. Corrigez-les en les rendant plus spécifiques et votre calendrier devrait être bon à faire.

Source

2009-03-18 01:41:52

Je me demande si c'est la raison pour laquelle ils fournissent la fonctionnalité "modifier le thème". Modifié la taille de la police et cela semblait faire l'affaire. – RSolberg

Ah, bien. Je suppose que mon montage était pour rien alors. :) –

Merci. Je regarderai ceci encore plus tard ce soir. Je crois que c'était le réglage de la taille de la police sur le thème. 1.1em vs.petit. – RSolberg

Quand les choses sont plus petites que prévu, une bonne hypothèse serait que certains types de taille de pourcentage/proportionnel se passe récursive, à savoir que vous avez

.foo {width: 80%;}

quelque part et qui a été appliquée deux fois ou plus, ce qui signifie que votre largeur se termine à 80% de 80% de 80%.

Source

2009-03-18 22:35:50 AmbroseChapel

ajouter ce code dans votre page index.php ou page d'accueil ou chaque page

<head> 
<style> 
    body{ 
     font-size: 62.5%; /* it is necessary for jquery ui */ 
     } 
</style> 
</head>

est une procédure de codage juridique pour gérer la taille des polices ou des balises lorsque vous utilisez jquery-ui.

Source

2013-06-12 07:54:49

JQuery-UI Theming - Différences de taille CSS

Répondre

Questions connexes