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