Menubar Plugin question

#1

I am experimenting with the MenuBar plugin once again and I have a fundamental question.

I have a tab in the sidebar that I’m using for my main navigation. It has a select widget in it that I use to select among different things I want to navigate to (railroads, histories, timetables, etc.). When I close the sidebar and have the sidebar as part of the menubar, my custom tab works as desired. That is, I can select an option from the select widget and the contents change.

However, if I have this tab as a menubar item by itself, the I can no longer use the select widget because when I attempt to make a selection the menu closes.

I’ve noticed that with the sidebar as a menubar item, when clicking links and my select widget, the menu stays open, but when my tab is stand alone it closes as soon as something is clicked which makes the select widget unusable.

I found in the menubar readme at tiddlywiki.com the following: “Custom menu items should make sure that the clickable link or button is an immediate child, and not wrapped in another element.”

I’m not sure how to interpret this other than this has something to do with the behavior I’m seeing. Could one of you smart folks enlighten this poor fellow who is in the dark?

Thanks in advance.

#2

Just bumping this up for attention purposes and with some screenshots.

Here’s a picture of my tab in the sidebar:

image
image642×1442 134 KB

And here’s one as part of the menubar:

image
image642×1442 134 KB

Here’s an image when the Navigation tab is directly part of the menubar and not part of the sidebar:

image
image599×1408 72.7 KB

When I make the Navigation tab a menubar item by itself, the formatting changes and the behavior changes. I can no longer use the select widget. As soon as I click the select widget, the menu closes.

I’m a little stuck as to why the behavior and formatting are different.

Thanks.

1 Like
#3

I am not sure I have enough to go on, or the necessary skill to solve this particular problem but there are two possibilities I can think of that may be causing this problem, perhaps it gives you a helpful lead.

Since you have not yet received any response’s let me try ands kick this a long and possibly inspire someone else to answer.

  • Often popups and dropdowns have a state set somewhere, often a state tiddler, possibly using the qualify widget and a prefix within it.
    • If the menu and the select share the same state tiddler this may explain it.
    • See how the PopupMechanism works or the popup parameter in the ButtonWidget and RevealWidget.
  • Some HTML/CSS based popups have a setting that closes them as soon as you click away from them, the select may be triggering this which closes the menu which then no longer displays the select.

Some hints towards a problem like this exist where you see related behaviours already in TiddleyWiki.

  • The Info button on tiddlers will close the info pannel whn you click away
  • The ActionPopupWidget has a $floating parameter
  • The Tiddler More button, then export button lets you select an Export format successfully (Which seem like what you need)
  • Perhaps in the worst case you could revert to using a modal or even a seperate window, which can “remote control” the main wiki window.
#4

I believe you’re having two separate but related issues, both to do with the default styling and behavior applied to dropdowns in the menubar.

  • Popups that utilize the $reveal widget aren’t “sticky” by default: they’ll close when you click anywhere within the window, including clicks inside the popup itself. This isn’t generally a problem for menubar links, because you only need a single click to trigger navigation, but prevents you from using widgets like $select that require more than a one-click interaction. You should be able to fix this behavior by adding a “tc-popup-keep” class, just as you would to make any popup sticky. In my experience, the simplest way to do this is to go directly to the tiddler that holds your dropdown content and add a “class” field with content “tc-popup-keep”.
  • Your formatting issues are stemming from the default CSS applied to menubar dropdowns. Take a look at $:/plugins/tiddlywiki/menubar/styles. You can either edit the default styling or add some more specific custom rules to overwrite this behavior. For example, it looks like buttons nested inside .tc-menubar are getting “display: block; width: 100%;” applied by default; you’ll need to change or delete that in order to see the styling as you intended it.
#5

Thanks very much @etardiff for the response. You were spot on. I’ve got things just the way I want them now.

Thanks @TW_Tones for giving me some things to think about and consider.

1 Like