Re: MSIE problem with menu & drop down toolbar contents - SOLVED!

View: New views

1 Messages — Rating Filter: Alert me

Re: MSIE problem with menu & drop down toolbar contents - SOLVED!

by Chuck Okerstrom-2 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Bill,

Actually I'd tried that, but it seemed to simply turn off the menu
display totally. I'd even tried putting in a dojo.addOnLoad entry to
turn on the menu after everything was loaded, but was unable to get that
kludge to work (I'm still learning ;-)).

But after your response I went back and tried a slightly different tact
-- I set all the child menu entries to style="display: none;" and that
did the trick!

So apparently, if you set the top level widget to display=none, dojo
will honor that and allow it stick, but if you do the same to the child
components of the widget, dojo will unhide 'em (as it sees fit).

Many thanks!

Chuck

> From: Bill Keese <wkeese@...>
> Subject: Re: [Dojo-interest] MSIE problem with menu & drop down
> toolbar contents
> To: dojo-interest@...
> Message-ID:
> <8bf426370911080601k3b0dbe3dn1cf6c6f82deca268@...>
> Content-Type: text/plain; charset="iso-8859-1"
>
> How about adding style="display: none" to your Menu?
>
> On Sat, Nov 7, 2009 at 4:53 AM, Chuck Okerstrom <chuck@...> wrote:
>
>> > Hi All!
>> >
>> > I've been working with Dojo for some time now, but have one issue that I
>> > just can't seem to get past and can't seem to find anyone addressing on
>> > the web... and of course IE (being the bane of my existence that it is)
>> > is the problem child!
>> >
>> > Whenever I use a menu or dropdown toolbar, IE upon initial display,
>> > briefly shows all the menu items on the page like an unordered list.
>> > Then I guess after a while it figures out the CSS to apply, and then
>> > finally correctly displays the items as they should be.
>> >
>> > This is somewhat disorienting to users as well as ugly. Of course ALL
>> > the other browsers don't exhibit this behavior. On slower systems it's
>> > even more apparent, but even on fast ones you get this brief flash of
>> > ugly text. And the bigger your menu content the more text that gets
>> > listed on the page.
>> >
>> > Is there some magical ordering of the CSS imports or other pixie dust I
>> > can sprinkle in (sample shown below) that limits or stops this behavior?
>> > Lord knows, I've tried several variations on my own, but to no avail.
>> >
>> > Thanx,
>> >
>> > Chuck
>> >
>> >
>> > Sample Code:
>> > ===============
>> >
>> > <html>
>> > <head>
>> > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
>> > <title>Menu</title>
>> > <style type="text/css">
>> > @import /dojo/dijit/themes/tundra/tundra.css";
>> > @import /dojo/dojo/resources/dojo.css"
>> > </style>
>> > <script type="text/javascript" src="/dojo/dojo/dojo.js"
>> > djConfig="parseOnLoad: true"></script>
>> > <script type="text/javascript">
>> > dojo.require("dojo.parser");
>> > dojo.require("dijit.form.Button");
>> > dojo.require("dijit.Menu");
>> > dojo.require("dijit.Toolbar");
>> > </script>
>> > </head>
>> > <body class="tundra">
>> >
>> > <div dojoType="dijit.Menu">
>> > <div dojoType="dijit.MenuItem">Disaster Menu</div>
>> > <div dojoType="dijit.MenuSeparator"></div>
>> > <div dojoType="dijit.PopupMenuItem">
>> > <span>Natural</span>
>> > <div dojoType="dijit.Menu">
>> > <div dojoType="dijit.MenuItem">Boll Weevils</div>
>> > <div dojoType="dijit.MenuItem">Flood</div>
>> > </div>
>> > </div>
>> > <div dojoType="dijit.PopupMenuItem">
>> > <span>Emotional</span>
>> > <div dojoType="dijit.Menu">
>> > <div dojoType="dijit.MenuItem">Spouse Left You</div>
>> > <div dojoType="dijit.MenuItem">Spouse Caught You
>> > Cheating</div>
>> > <div dojoType="dijit.MenuItem">
>> > Spouse Caught You Cheating and Left
>> > </div>
>> > <div dojoType="dijit.MenuItem">Spouse With Best Friend
>> > <script type="dojo/method" event="onClick">
>> > console.log("Now that is REALLY bad!");
>> > </script>
>> > </div>
>> > </div>
>> > </div>
>> > <div dojoType="dijit.PopupMenuItem">
>> > <span>Medical</span>
>> > <div dojoType="dijit.Menu">
>> > <div dojoType="dijit.MenuItem">TB</div>
>> > <div dojoType="dijit.MenuItem">Rheum-y-tism</div>
>> > </div>
>> > </div>
>> > </div>
>> >
>> >
>> > </body>
>> > </html>
>> >
>> >
>> >
>> > End Sample Code:
>> > ================

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
Dojo-interest@...
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest