2011-10-19 3 views
1

J'essaie d'utiliser le plugin jquery.fullcalendar en utilisant le thème de l'interface utilisateur jQuery. Tout est ok, sauf que lorsque l'utilisateur essaie de sélectionner une plage de temps (semaine ou jour), la sélection est décalée d'une heure environ. Vous pouvez voir ce comportement dans this fiddle.Bogue étrange avec Trebuchet MS police

J'ai réduit le problème et je suis arrivé à la conclusion que le problème vient du code CSS. Dans le violon, j'ai copié le code CSS problématique (correspond au framework CSS jQuery UI). Si vous supprimez ce code CSS, la sélection fonctionne bien (mais sans format, bien sûr).

J'ai essayé de trouver quel est le problème exact, mais je ne peux pas voir.

EDIT: J'ai réduit le problème à this. Maintenant, si vous retirez la police "Trebuchet MS" de .ui-widget fullCalendar fonctionne! Voir ici working demo. La question est maintenant, pourquoi? J'utilise Linux, je ne sais pas si cela a un effet ...

+0

Hmm ... Je semblent avoir une erreur dans l'exemple du violon: outerLayout n'est pas défini (ligne 644). Cela semble provoquer l'échec de la fonctionnalité "Sélectionner une plage de temps" (j'imagine) car lorsque j'essaie de faire glisser et déposer une plage de temps, rien ne se passe. –

+0

Nous avons trouvé le problème (s'il vous plaît, lisez EDIT), mais maintenant je me demande pourquoi ça se passe .. – Ivan

+0

Pour ce que ça vaut, votre problème semble spécifique à Webkit et Opera. Je ne peux pas le reproduire dans IE ou Firefox. – lsuarez

Répondre

1

supprimer de votre css les éléments suivants:

.fc-agenda-slots td div { 
    height:20px; 
} 

ou changer pour:

.fc-agenda-slots td div { 
    height:auto; 
} 

Je suppose que le débordement de la taille de la police du div de fixe 20px avec résultat obtenez ce "bug bizarre".

Démo:http://jsfiddle.net/gQMvH/5/

+0

La deuxième option fonctionne (hauteur: auto). Il nécessite le modificateur! Important dans mon système de production. – Ivan

1

J'ai trouvé le code incriminé. C'est

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

sous Component containers. Particulièrement la déclaration de font-family. Le supprimer arrête le comportement étrange, mais quant à pourquoi il le provoque ... aucune idée.

http://jsfiddle.net/5tAaj/

+0

J'ai été plus rapide :) Mais merci !! Maintenant, le problème est de savoir pourquoi ça se passe .. ARe vous utilisez Linux? – Ivan

+1

@Ivan Nope. J'utilise Chrome 14 sur Windows 7. Je ne suis pas sûr pourquoi cette police causerait ce problème. –

Questions connexes