How to change the position of the dropdowns of the editor toolbar

,
1

Hi, I’m new here and I’m loving tiddlywiki, indeed I already made some customization and everything went correctly, even if with some difficulties because I’m not an expert at all.

Unfortunately I couldn’t figure out how to change the position of the dropdowns in the editor toolbar. I searched everywhere but I’m really stuck. Here what I discovered:

Using the browser analysis tools (I’m using firefox) I found that the position of these dropdowns is set to absolute like this <span class =" tc-reveal tc-popup" style="position: absolute; z-index...";>. Now, if I manually and temporarily change that “absolute” to “downleft” in the browser tool I have my desired solution.
But when I go to create a tiddler tagged with “$:/tags/Stylesheet” I can’t change the position (I can easly change the background color, but the change of position I try to make is overridden)
Probably my change isn’t specific enough for the css:
e.g. (one of my attempts)

.tc-editor-toolbar .tc-drop-down
{
background: blue;
position: downleft;
}

I even tried to change the vanilla theme, but with no luck (mostly trial and error, I undestand only a fraction of what is there) But ideally I don’t want to mess with the themes. If there was a non-intrusive solution, that would be ideal. I hope I have described the problem well
Thanks in advance

Immagine 2022-11-29 110705
Immagine 2022-11-29 110705975×916 35.3 KB

2

Downleft is not a valid value for the property position, so when you set it to it what happens is the same as if you set it to static.

And the reason your CSS doesn’t work is indeed due to specificity. The position: absolute; is defined inside the style attribute:

image
image1273×757 92.3 KB

As this page tells us, inline style gets 1,000 specificity points so to override that in CSS you need to get a bigger number - which you can accomplish by adding !important, thus the CSS you’d want is:

.tc-editor-toolbar .tc-drop-down
{
background: blue;
position: static !important;
}

(I replaced downleft with static due to what I wrote earlier).

But I am not sure if static is what you want. Perhaps what you want is to override left and right such that it shares right edge with the button rather than the left edge?

3

You’re probably better off just moving the toolbar buttons that have menus over to the left side of the screen:

Control Panel > Appearance > Toolbars > Editor Toolbar

Drag items to the top of the list

4

Hi Maurycy, thank you
Static is not what i’m looking for, but what you wrote could be really useful. I feel i could be on the right track. If I find a solution, I’ll post it.
Thanks

5

Brilliant, never thought of that. Not the ideal solution but I think I’ll do as you wrote for the moment.
Thank you Brian

6

I did remove strikethrough and underline from the toolbar. They show up in the “More” dropdown if removed from the toolbar.

7

The dropdowns are created with the reveal widget.

But the dropdowns of button for editor toolbar, their position is hardcoded in the button (and dropdown) template $:/core/ui/EditTemplate/body/toolbar/button

Then you will need change the position (from below) to belowleft, you have to options to do it:

  • Modify directly in the tiddler template
  • Copy and modify the macro (toolbar-button), which creates the button (and dropdown), in a new tiddler is tagged with $:/tags/Macro.

I would choose the second option. The modified macro would be:

\define toolbar-button()
<$list

  filter={{!!condition}}
  variable="list-condition"

><$wikify

  name="tooltip-text"
  text=<<toolbar-button-tooltip>>
  mode="inline"
  output="text"

><$list

  filter="[all[current]!has[dropdown]]"
  variable="no-dropdown"

><$set name=disabled filter={{!!condition-disabled}}><$button

  class="tc-btn-invisible $(buttonClasses)$"
  tooltip=<<tooltip-text>>
  actions={{!!actions}}
  disabled=<<disabled>>

><span

  data-tw-keyboard-shortcut={{{ [<disabled>match[yes]then[]else{!!shortcuts}] }}}

/><<toolbar-button-icon>><$transclude

  tiddler=<<currentTiddler>>
  field="text"

/></$button></$set></$list><$list

  filter="[all[current]has[dropdown]]"
  variable="dropdown"

><$set

  name="dropdown-state"
  value=<<qualify "$:/state/EditorToolbarDropdown">>

><$set name=disabled filter={{!!condition-disabled}}><$button

  popup=<<dropdown-state>>
  class="tc-popup-keep tc-btn-invisible $(buttonClasses)$"
  selectedClass="tc-selected"
  tooltip=<<tooltip-text>>
  actions={{!!actions}}
  disabled=<<disabled>>

><span

  data-tw-keyboard-shortcut={{{ [<disabled>match[yes]then[]else{!!shortcuts}] }}}

/><<toolbar-button-icon>><$transclude

  tiddler=<<currentTiddler>>
  field="text"

/></$button></$set><$reveal

  state=<<dropdown-state>>
  type="popup"
  position="belowleft"
  animate="yes"
  tag="span"

><div

  class="tc-drop-down tc-popup-keep"

><$transclude

  tiddler={{!!dropdown}}
  mode="block"

/></div></$reveal></$set></$list></$wikify></$list>
\end
8

I didn’t tested but now I think that create the macro tiddler could don’t work. You will need to modify the original tiddler.

9

Thank you Álvaro!
The macro tiddler didn’t work (unless i did something wrong), but it works perfectly editing $:/core/ui/EditTemplate/body/toolbar/button.
The only edit necessary was changing as you said “below” to “belowleft”. Wonderful.
Thanks again

10

Yes, it doesn’t work. The macro definition and the call are in the same tiddler, there isn’t chance to redefine the macro before the macro call. I forgot the the macro call was here.