Layout help for more menu and alerts

Hello folks,

I’m still learning CSS by brute force and am stuck on 2 pieces:

  1. When the more menu for page controls is too far right - how can I move it further left so it doesn’t get cut off? In my real wiki it’s even further right…


    From debugging it looks like the below, but overwriting the left in another stylesheet doesn’t seem to do anything.
    image

  2. The second one is alerts like the “saved” alert. I’m trying to snag the developer view quickly while it’s up by I’m not fast enough! :slight_smile: I’m implementing a “top bar” and I’d like to move the alerts to below it if possible.

Thanks in advance for any thoughts.

  1. { left: positive number } means to move the element away from the left of the inner boundary of its container by x. I think you need to set it to a negative value so that it gets positioned outside the left boundary of its container
  2. I think the Saved! and other alerts are just HTML! there’s a tiddler in the PageTemplate that handles alerts: $:/core/ui/PageTemplate/alerts.

Drag and drop should change the position of the alerts.

Clutterstack’s notes on the TW page layout were helpful for me.

Problem #1:

When the more menu for page controls is too far right - how can I move it further left so it doesn’t get cut off?

The more menu for page controls uses a .tc-drop-down class inside a .tc-popup class. The position of the popup is automatically calculated by the core so that it appears directly under the $button that triggers it. This calculated position is directly assigned to the left style attribute of the .tc-popup. To override the style attribute using a CSS class, you need to use !important (one of the rare instances where this is actually necessary).

Try the following in a tiddler tagged with $:/tags/Stylesheet:

.tc-page-controls .tc-popup { left:2em !important; }
.tc-page-controls .tc-popup .tc-drop-down { min-width:auto; }

Notes:

  • left:2em !important; places the popup along the left edge of the sidebar (leaving a little space for the sidebar’s margin). You can adjust the value to suit your tastes.
  • min-width:auto; is optional, and allows the .tc-drop-down width to fit the content instead of using the default min-width:380px; that is set in the $:/themes/tiddlywiki/vanilla/base shadow tiddler.

Problem #2:

I’m implementing a “top bar” and I’d like to move the alerts to below it if possible.

The CSS class that defines the message box appearance is .tc-notification. You can use CSS to adjust the top position of the message box, like this:

.tc-notification { top:3em; }

Notes:

  • You can adjust the top:3em; value to suit your tastes.

enjoy,
-e

1 Like

In my opinion the pop-up mechanism in Tiddlywiki has issues! I do not remember but there was effort by few developers to rewrite the popups in Tiddlywiki from scratch, maybe @jeremyruston can explain this!

I think this is part needs some attention by developers!

There is a pretty long list of things that need attention, for not that many developers. :wink:

1 Like

Thanks all - got it working!

@sull-vitsy - sorry for being unclear, I was mostly in need of how to specify the thing less than what to change it to. I agree that Clutterstack’s notes look helpful - thanks for passing along!

@EricShulman - that was exactly what I needed, thanks. Definitely learned a few extra things that will be helpful later. You always have a knack of answering not only the question asked, but probably the next few questions I hadn’t got to yet - much appreciatiated!

1 Like

Yes, it was the awesome Mentat plugin that had code that auto-repositioned popups onscreen if they start offscreen. I fully intend to get that into the core at some point, but I am still working the back-end Node.js stuff. Like @saqimtiaz said, the community has limited developers, all working on it during their “hobby time”.

1 Like