Remplacer jQuery UI Datepicker div visible étrangement sur la première page de la charge.

Quelque chose d'étrange à pied, ici:

Une instance de Datepicker est de se manifester dans un étrange endroit que d'une seule barre dans le coin supérieur gauche de cette page.

Je suis en utilisant à la fois jQuery UI Datepicker et de l'Accordéon sur une page. Dans le CSS de l'INTERFACE utilisateur, le display:none pour Datepicker semble être remplacée par la display:block pour l'Accordéon, du moins d'après Firebug (voir img ci-dessous).

Puis, une fois le Datepicker de déclenchement est cliqué dans la restauration/salle de spectacle " tab " (cliquez sur l'un des boutons de montrer div avec Datepicker), la display:none semble que de travailler.

Voici ce que le mauvais div ressemble:

Remplacer jQuery UI Datepicker div visible étrangement sur la première page de la charge.

et voici le panneau Firebug:

Remplacer jQuery UI Datepicker div visible étrangement sur la première page de la charge.

InformationsquelleAutor Adam | 2011-01-02
  1. 43

    J'ai eu le même problème et alors que certains de ces solutions ne fonctionne, la méthode la plus simple de réparer tout est à ajouter ceci dans votre css:

    #ui-datepicker-div {display: none;}

    Fondamentalement, ce masque à la réorganisation de la datepicker élément lorsqu'il ne peut pas être appliqué à un élément invisible. Vous le cacher, mais il sera initialisé lorsque vous cliquez sur un élément qui doit afficher le datepicker. Sur la ré-initialisation, le datepicker de l'élément avec l'id #ui-datepicker-div aura la bonne position.

    • le réel plus facile de fixer et ne se produit que dans google Chrome, mon côté.
    • Merci beaucoup pour la correction. A sauvé beaucoup de temps.
    • Super Corrigé, Merci beaucoup. 🙂 🙂 🙂
    InformationsquelleAutor alxbrd
  2. 4

    Le problème pourrait être que vous êtes de liaison du datepicker pour quelque chose qui n'est pas visible, cela expliquerait l'étrange positionnement (en essayant de décalage à partir de quelque chose qui n'existe pas va dégénérer à la compensation de (0, 0)). Le datepicker <div> devrait avoir au moins une table à l'intérieur alors peut-être le datepicker est de se confondre et de lancer une exception avant la fin de son initialisation. Lorsque vous cliquez sur un de la borne d'entrées, il est probablement l'initialisation de lui-même à nouveau (ou au moins correctement la finition de l'initialisation) et tout fonctionne bien après.

    Essayer de liaison du datepicker lorsque la date d'entrée devient visible:

    • Supprimer la $(".date_picker").datepicker({ disabled: false });
    • Ajouter un id="cater" à <input type="text" name="cater"/>
    • Appel $('#cater').datepicker(); lors de la "réserve de la salle de spectacle" le bouton est pressé.

    Si cela fonctionne, alors vous auriez à ajouter similaire hacks pour d'autres datepickers. Si cela ne fonctionne pas alors je me suis probablement mal. Si mon hypothèse s'avère être à droite, puis vous pouvez signaler un bug pour le jQuery-UI les gens.

    BTW, dans Safari, je ne peux voir les deux premiers onglets, j'ai dû passer à Firefox pour voir la "restauration" de l'onglet. Curieusement il fonctionne très bien sur Chrome. C'est probablement sans rapport, mais j'ai pensé que je voulais te le dire de toute façon.

    • Tout d'abord, voir le commentaire de chprpipr, ci-dessous. Ouais, et comme pour le Safari question; Ce n'est pas seulement que seulement deux des onglets du menu afficher, c'est qu'il semble ignorer AnythingSlider (la "page" du système que j'utilise,) et tout simplement des listes de la <li> que, ainsi, les éléments de la liste. Obtenu toutes les suggestions?
    • Le Safari question est bizarre. L'étrange disposition sur le deuxième onglet (brunch) suggère que vous avez fermé un <div> deux fois et l'imbrication est d'obtenir foiré, les différents navigateurs fera différentes suppose que lorsque vous essayez de réparer les choses. J'avais essayer de tirer le contenu des panneaux, qui va vous donner l'onglet/panneau de structure; puis commencer à les mettre sur le panneau arrière de contenu jusqu'à ce qu'elle casse. Que vais au moins de savoir d'où la confusion.
    • En fait, j'ai été absent un <div> tag. Fonctionne comme un charme, maintenant. Merci de vous en soucier...
    InformationsquelleAutor mu is too short
  3. 3

    Le problème est réduit à l'élément le datepicker est " lié " à ne pas être encore disponibles.

    La solution que j'ai trouvé était à initalize le datepicker quand l'élément a été cliqué et ensuite le montrer tout de suite après initalization. Cela garantit l'élément est disponible avant le datepicker a été affectée et initalized.

    $(function() {
  $(".date_input").click(function() {
    $(this).datepicker();
    $(this).datepicker("show");
  });
});

    ....

    <input type="text" class='date_input' />
    • pas sûr de savoir pourquoi vous avez décidé de le coller dans une fonction, mais juste assez! 🙂
    InformationsquelleAutor Matt Ramsay
  4. 3

    Dans mon cas, j'utilise la session "$(document).ready(function(){" de JQuery en ma faveur.

    Comme j'ai un fichier JavaScript qui est chargé de toutes les pages de mon système, je viens d'ajouter la ligne suivante sur elle.

    $('#ui-datepicker-div').css('display', 'none');

    Pour moi, il semble clair et élégant solution parce que je n'ai pas à changer sa bibliothèque.

    Le meilleur de tous, il fonctionne très bien sur tous les navigateurs. 🙂

    InformationsquelleAutor Alexandre Ribeiro
  5. 2

    J'ai eu un problème similaire dans google Chrome, et je l'ai résolu d'édition jquery-ui1.7.2.custom.css

    à partir de:

    .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }

    à: 

    .ui-helper-hidden-accessible { position: absolute; left: -9999999px; }

    Il y a probablement trop de neuf pour Chrome.

    InformationsquelleAutor Jan Cintala
  6. 1

    Essayez de déplacer le dernier bloc en bas de la page (juste avant de fermer la balise body). Vous pouvez lire plus au sujet de pourquoi vous voulez le faire ici:

    http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html

    BTW: bonne idée pour un menu. Je l'aime.

    • Eh bien, j'ai fait ce que je devrais probablement l'ont fait en premier lieu: Recréer l'INTERFACE utilisateur personnalisée et de recommencer. Chose est, il a travaillé à la fois, et j'ai fait quelque chose de le faire casser. Remplaçant, il n'était pas un gros problème. Merci pour la réponse, cependant.
    InformationsquelleAutor chprpipr
  7. 1

    Parfois, il a à voir avec le z-index de l'autre élément sur la page étant plus élevé. Réglage de la z-index à un nombre très élevé résolu mon problème.

    #ui-datepicker-div {z-index:11111;}
    InformationsquelleAutor hgolov