[Erledigt] *UPDATE* jQuery 1.9m6 Submenue rendert nicht wie gewünscht (overlay = fals

dreamcatcher · 11.10.2011, 20:29

Guten Abend alle miteinander,

es geht darum, dass mein Menü von jQuery in einer tr nicht anständig angezeigt wird.

Das Menü wird untergeordnet unter Elementen angezeigt, anstatt wie ein "normales" Menü über den Elementen zu stehen.

Im Anhang ist ein Screenshot, damit wird es glasklar.

Ich habe per Chrome Developer Tools schon alle eingebundenen Stylesheets entfernt mit Außnahme des jQuery UI Standard Stylesheets... und es wird immer noch "untergelegt".

Ich habe mit den Chrome Developer Tools über 30 Minuten rumgespielt und mehrere CSS Propertys entfernt, jedoch hat keine Änderung zum Erfolg geführt.

Weiß jemand welche CSS Property dafür verantwortlich ist oder braucht soll ich eine explizite Demo dafür anfertigen ?

Grüße & Dank im voraus, dass Du dich mit dem Thema befässt,

Dreamcatcher

nikosch · 11.10.2011, 20:32

Tja, auf Grundlage eines Bildes kann man nur raten. Ich tippe mal, dass Deine Tabellenstruktur nicht stimmt. Oder das Script das Menü an einen Container anhängt, und damit leider direjt zwischen Tabellenelemente.

dreamcatcher · 11.10.2011, 21:01

N´abend Nikosch

Ich habe nun eine Demo erstellt, leider 90 kb zu groß für den Upload auf php.de.
Daher habe ich es auf uploaded.to hochgeladen.

DEMO:
http://ul.to/gz3slfke

Die Tabellenstruktur ist m.M.n. nicht falsch.
Deinen zweiten Ansatz kann ich nicht konkret nachvollziehen/überprüfen.

Das Problem lässt sich bei der Demo reproduzieren, in dem man auf den ersten Button drückt.
Dadurch sieht man, wie das Menü unter dem zweiten Button verschwindet.

nikosch · 11.10.2011, 21:34

Och nö, lass mal. 15 Sekunden warte, dann zwei Captureversuche und jetzt

Zitat:

Aus technischen Gründen ist ein Download momentan nicht möglich.

In 9 Sekunden wird ein erneuter Versuch gestartet…

… Bla bla. Vielleicht kannst Du ja ein Online-Beispiel machen. jsFiddle oder so.

dreamcatcher · 11.10.2011, 21:37

jsFiddle habe ich getestet, dort klappt es leider nicht ganz, da sie dort noch nicht jQuery 1.9 haben.

http://www.file-upload.net/download-...PHPDE.zip.html

Nur auf "download" und es sollte ohne Counter klappen, hoffentlich

Danke !

nikosch · 11.10.2011, 22:50

Hmm, kann ich leider nicht helfen. Deshalb bin ich auch kein Fan von jQuery UI. Man hat einfach keinen Einfluss mehr auf das Verhalten.

rudygotya · 12.10.2011, 14:43

Zitat:

jsFiddle habe ich getestet, dort klappt es leider nicht ganz, da sie dort noch nicht jQuery 1.9 haben.

Bitte nicht jQuery und jQueryUI durcheinander werfen

Fürs menu-Plugin clone dir am besten den master branch, nach dem Milestone sind noch einige Änderungen/Verbesserungen/Fixes eingezogen. Wenns damit nicht klappt, gib nochmal Bescheid.

Auf jsfiddle oder auch jsbin.com kannst du auch testweise die benötigten Dateien direkt aus github einbinden (für die url auf die source-Datei klicken, dann auf raw gehen, url kopieren, fertig).

dreamcatcher · 12.10.2011, 18:33

rudygotya, Danke für deine wertvollen Tipps !

Dadurch konnte ich jetzt eine Demo aus der "standard-demo" von jQuery UI 1.9 erstellen.

Daher denke ich nun zu 95 %, dass es sich wirklich um einen Bug vom 1.9er release handelt.

Original Demo (https://raw.github.com/jquery/jquery...extmenu.html):

PHP-Code:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Menu - Contextmenu demo</title>
    <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script src="../../jquery-1.6.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.position.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.menu.js"></script>
    <script src="../../ui/jquery.ui.button.js"></script>
    <script src="../../ui/jquery.ui.popup.js"></script>
    <link href="../demos.css" rel="stylesheet" />
    <script>
    $(function() {
        $(".demo button").button({
            icons: {
                primary: "ui-icon-home",
                secondary: "ui-icon-triangle-1-s"
            }
        }).next().menu({
            select: function(event, ui) {
                $(this).hide();
                $("#log").append("<div>Selected " + ui.item.text() + "</div>");
            }
        }).popup();
    });
    </script>
    <style>
        .ui-menu { width: 200px; position: absolute; }
    </style>
</head>
<body>

<div class="demo">

    <button>Select a city</button>
    <ul>
        <li><a href="#Amsterdam">Amsterdam</a></li>
        <li><a href="#Anaheim">Anaheim</a></li>
        <li><a href="#Cologne">Cologne</a></li>
        <li><a href="#Frankfurt">Frankfurt</a></li>
        <li><a href="#Magdeburg">Magdeburg</a></li>
        <li><a href="#Munich">Munich</a></li>
        <li><a href="#Utrecht">Utrecht</a></li>
        <li><a href="#Zurich">Zurich</a></li>
    </ul>

    <div id="log"></div>

</div><!-- End demo -->

<div class="demo-description">

<p>A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>

<p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p>

</div><!-- End demo-description -->



</body>
</html>

Mein Quellcode:

PHP-Code:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Menu - Contextmenu demo</title>
    <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script src="../../jquery-1.6.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.position.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.menu.js"></script>
    <script src="../../ui/jquery.ui.button.js"></script>
    <script src="../../ui/jquery.ui.popup.js"></script>
    <link href="../demos.css" rel="stylesheet" />
    <script>
    $(function() {
        $(".demo button").button({
            icons: {
                primary: "ui-icon-home",
                secondary: "ui-icon-triangle-1-s"
            }
        }).next().menu({
            select: function(event, ui) {
                $(this).hide();
                $("#log").append("<div>Selected " + ui.item.text() + "</div>");
            }
        }).popup();
    });
    </script>
    <style>
        .ui-menu { width: 200px; position: absolute; }
    </style>
</head>
<body>

<div class="demo">

    <button>Select a city</button>
    <ul>
        <li><a href="#Amsterdam">Amsterdam</a></li>
        <li><a href="#Anaheim">Anaheim</a></li>
        <li><a href="#Cologne">Cologne</a></li>
        <li><a href="#Frankfurt">Frankfurt</a></li>
        <li><a href="#Magdeburg">Magdeburg</a></li>
        <li><a href="#Munich">Munich</a></li>
        <li><a href="#Utrecht">Utrecht</a></li>
        <li><a href="#Zurich">Zurich</a></li>
    </ul>
        
        <br>
        
    <button>Select a city2</button>
    <ul>
        <li><a href="#Amsterdam">Amsterdam</a></li>
        <li><a href="#Anaheim">Anaheim</a></li>
        <li><a href="#Cologne">Cologne</a></li>
        <li><a href="#Frankfurt">Frankfurt</a></li>
        <li><a href="#Magdeburg">Magdeburg</a></li>
        <li><a href="#Munich">Munich</a></li>
        <li><a href="#Utrecht">Utrecht</a></li>
        <li><a href="#Zurich">Zurich</a></li>
    </ul>

    <div id="log"></div>

</div><!-- End demo -->

<div class="demo-description">

<p>A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p>

<p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p>

</div><!-- End demo-description -->



</body>
</html>

Der einzige Unterschied besteht also darin, dass ich den Button in meinem Quellcode Beispiel geclont habe. ("Select a city2")
Auch bei der Demo besteht dieser Bug.

Bild:

Getestet habe ich das alles mit den Dateien aus der aktuelle Master-Branch
(https://github.com/jquery/jquery-ui/tarball/master)

################################################## ###########################################

Ich habe deine Tipps beherzigt und alle Scripte via Github eingebunden: (btw. Danke für das gute Tutorial )
http://jsbin.com/eqadin/edit#javascript,html,live

Ich hoffe das hilft weiter !

DirkHo · 12.10.2011, 19:10

Hallo,

ich habe deine Fragen, ... jetzt nur überflogen. Das Problem liegt offenbar daran, dass die Dropdown-Geschichten unterhalb des folgenden Banners angezeigt werden. Und warum nimmst du dann CSS-Elemente weg?

Die Lösung ist meiner Meinung nach der z-index (ich habe das von dir unter file-upload.net hochgelandene Teil verwendet)...

Code:

<style type="text/css">
    .ui-menu { width: 100px; font-size: 0.8em !important; position: absolute; z-index: 99999;}
</style>

Den z-index kannst natürlich auch niedriger setzen. Ist nur sicherheitshalber, dass es wirklich alles überlagert.

Sollte das nicht das Problem sein bzw. in deinem Beispiel beheben, dann poste bitte ein lauffähiges Beispiel - zumindest ich hab keine Lust mir noch CSS, Bibliotheken,.. zusammen zu suchen und runterzuladen.

Grüße,

Dirk

dreamcatcher · 12.10.2011, 23:55

Hat wunderbar funktioniert, einfach einen z-index hinzugefügt.

Bzgl. Demo hatte ich dir sogar eine online Demo gepostet, siehe letzter Post ganz unten
(http://jsbin.com/eqadin/edit#javascript,html,live).

Danke !

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zend_Navigation rendert das Submenue nicht bei unsichtbaren Elementen	dreamcatcher	PHP Einsteiger	1	15.08.2011 08:05
jQuery und FALSE	Chriz	JavaScript, Ajax und mehr	1	27.05.2010 11:05
variable mit onclick an php	drombusch	PHP Tipps 2009	8	30.08.2009 14:45
[JavaScript] new Objekt => Wieder löschen	Destruction	JavaScript, Ajax und mehr	2	29.08.2009 16:23
Help! Felder dürfen nicht gleich sein	proto	PHP Tipps 2009	5	06.02.2009 11:55
Voraussetzungen für dieses Thumbnail Skript	Plague	PHP Tipps 2008	9	19.09.2007 13:35

11.10.2011, 20:29
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	*[Erledigt] UPDATE* jQuery 1.9m6 Submenue rendert nicht wie gewünscht (overlay = fals** Guten Abend alle miteinander, es geht darum, dass mein Menü von jQuery in einer tr nicht anständig angezeigt wird. Das Menü wird untergeordnet unter Elementen angezeigt, anstatt wie ein "normales" Menü über den Elementen zu stehen. Im Anhang ist ein Screenshot, damit wird es glasklar. Ich habe per Chrome Developer Tools schon alle eingebundenen Stylesheets entfernt mit Außnahme des jQuery UI Standard Stylesheets... und es wird immer noch "untergelegt". Ich habe mit den Chrome Developer Tools über 30 Minuten rumgespielt und mehrere CSS Propertys entfernt, jedoch hat keine Änderung zum Erfolg geführt. Weiß jemand welche CSS Property dafür verantwortlich ist oder braucht soll ich eine explizite Demo dafür anfertigen ? Grüße & Dank im voraus, dass Du dich mit dem Thema befässt, Dreamcatcher Miniaturansicht angehängter Grafiken Geändert von dreamcatcher (11.10.2011 um 21:24 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

11.10.2011, 20:32
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Tja, auf Grundlage eines Bildes kann man nur raten. Ich tippe mal, dass Deine Tabellenstruktur nicht stimmt. Oder das Script das Menü an einen Container anhängt, und damit leider direjt zwischen Tabellenelemente. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

11.10.2011, 21:01
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	N´abend Nikosch Ich habe nun eine Demo erstellt, leider 90 kb zu groß für den Upload auf php.de. Daher habe ich es auf uploaded.to hochgeladen. DEMO: http://ul.to/gz3slfke Die Tabellenstruktur ist m.M.n. nicht falsch. Deinen zweiten Ansatz kann ich nicht konkret nachvollziehen/überprüfen. Das Problem lässt sich bei der Demo reproduzieren, in dem man auf den ersten Button drückt. Dadurch sieht man, wie das Menü unter dem zweiten Button verschwindet. Geändert von dreamcatcher (11.10.2011 um 21:25 Uhr).

11.10.2011, 21:37
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	jsFiddle habe ich getestet, dort klappt es leider nicht ganz, da sie dort noch nicht jQuery 1.9 haben. http://www.file-upload.net/download-...PHPDE.zip.html Nur auf "download" und es sollte ohne Counter klappen, hoffentlich Danke ! Geändert von dreamcatcher (11.10.2011 um 21:43 Uhr).

11.10.2011, 22:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Hmm, kann ich leider nicht helfen. Deshalb bin ich auch kein Fan von jQuery UI. Man hat einfach keinen Einfluss mehr auf das Verhalten. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

12.10.2011, 18:33
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	rudygotya, Danke für deine wertvollen Tipps ! Dadurch konnte ich jetzt eine Demo aus der "standard-demo" von jQuery UI 1.9 erstellen. Daher denke ich nun zu 95 %, dass es sich wirklich um einen Bug vom 1.9er release handelt. Original Demo (https://raw.github.com/jquery/jquery...extmenu.html): PHP-Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery UI Menu - Contextmenu demo</title> <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <script src="../../jquery-1.6.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.menu.js"></script> <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.popup.js"></script> <link href="../demos.css" rel="stylesheet" /> <script> $(function() { $(".demo button").button({ icons: { primary: "ui-icon-home", secondary: "ui-icon-triangle-1-s" } }).next().menu({ select: function(event, ui) { $(this).hide(); $("#log").append("<div>Selected " + ui.item.text() + "</div>"); } }).popup(); }); </script> <style> .ui-menu { width: 200px; position: absolute; } </style> </head> <body> <div class="demo"> <button>Select a city</button> <ul> <li><a href="#Amsterdam">Amsterdam</a></li> <li><a href="#Anaheim">Anaheim</a></li> <li><a href="#Cologne">Cologne</a></li> <li><a href="#Frankfurt">Frankfurt</a></li> <li><a href="#Magdeburg">Magdeburg</a></li> <li><a href="#Munich">Munich</a></li> <li><a href="#Utrecht">Utrecht</a></li> <li><a href="#Zurich">Zurich</a></li> </ul> <div id="log"></div> </div><!-- End demo --> <div class="demo-description"> <p>A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p> <p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p> </div><!-- End demo-description --> </body> </html> Mein Quellcode: PHP-Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery UI Menu - Contextmenu demo</title> <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <script src="../../jquery-1.6.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.menu.js"></script> <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.popup.js"></script> <link href="../demos.css" rel="stylesheet" /> <script> $(function() { $(".demo button").button({ icons: { primary: "ui-icon-home", secondary: "ui-icon-triangle-1-s" } }).next().menu({ select: function(event, ui) { $(this).hide(); $("#log").append("<div>Selected " + ui.item.text() + "</div>"); } }).popup(); }); </script> <style> .ui-menu { width: 200px; position: absolute; } </style> </head> <body> <div class="demo"> <button>Select a city</button> <ul> <li><a href="#Amsterdam">Amsterdam</a></li> <li><a href="#Anaheim">Anaheim</a></li> <li><a href="#Cologne">Cologne</a></li> <li><a href="#Frankfurt">Frankfurt</a></li> <li><a href="#Magdeburg">Magdeburg</a></li> <li><a href="#Munich">Munich</a></li> <li><a href="#Utrecht">Utrecht</a></li> <li><a href="#Zurich">Zurich</a></li> </ul> <br> <button>Select a city2</button> <ul> <li><a href="#Amsterdam">Amsterdam</a></li> <li><a href="#Anaheim">Anaheim</a></li> <li><a href="#Cologne">Cologne</a></li> <li><a href="#Frankfurt">Frankfurt</a></li> <li><a href="#Magdeburg">Magdeburg</a></li> <li><a href="#Munich">Munich</a></li> <li><a href="#Utrecht">Utrecht</a></li> <li><a href="#Zurich">Zurich</a></li> </ul> <div id="log"></div> </div><!-- End demo --> <div class="demo-description"> <p>A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p> <p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p> </div><!-- End demo-description --> </body> </html> Der einzige Unterschied besteht also darin, dass ich den Button in meinem Quellcode Beispiel geclont habe. ("Select a city2") Auch bei der Demo besteht dieser Bug. Bild: Getestet habe ich das alles mit den Dateien aus der aktuelle Master-Branch (https://github.com/jquery/jquery-ui/tarball/master) ################################################## ########################################### Ich habe deine Tipps beherzigt und alle Scripte via Github eingebunden: (btw. Danke für das gute Tutorial ) http://jsbin.com/eqadin/edit#javascript,html,live Ich hoffe das hilft weiter ! Geändert von dreamcatcher (12.10.2011 um 18:38 Uhr).

12.10.2011, 19:10
DirkHo Erfahrener Benutzer Registriert seit: 22.07.2004 Beiträge: 226	Hallo, ich habe deine Fragen, ... jetzt nur überflogen. Das Problem liegt offenbar daran, dass die Dropdown-Geschichten unterhalb des folgenden Banners angezeigt werden. Und warum nimmst du dann CSS-Elemente weg? Die Lösung ist meiner Meinung nach der z-index (ich habe das von dir unter file-upload.net hochgelandene Teil verwendet)... Code: <style type="text/css"> .ui-menu { width: 100px; font-size: 0.8em !important; position: absolute; z-index: 99999;} </style> Den z-index kannst natürlich auch niedriger setzen. Ist nur sicherheitshalber, dass es wirklich alles überlagert. Sollte das nicht das Problem sein bzw. in deinem Beispiel beheben, dann poste bitte ein lauffähiges Beispiel - zumindest ich hab keine Lust mir noch CSS, Bibliotheken,.. zusammen zu suchen und runterzuladen. Grüße, Dirk

12.10.2011, 23:55
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Hat wunderbar funktioniert, einfach einen z-index hinzugefügt. Bzgl. Demo hatte ich dir sogar eine online Demo gepostet, siehe letzter Post ganz unten (http://jsbin.com/eqadin/edit#javascript,html,live). Danke !