Why the tiddler links and close button in menubar dropdown of Sidebar/Open is not aligned correctly

Why the tiddler links and close button in menubar dropdown of Sidebar/Open is not aligned correctly in a single line.

image

Here is the demo wiki.

It’s a CSS issue: by default, dropdown links and buttons get block formatting.

image

Changing width: 100% and replacing display: block with display: inline-block should fix it—though you may not want to overwrite the default styling for all dropdowns. I’d recommend targeting nav.tc-menubar .tc-drop-down a, nav.tc-menubar .tc-drop-down button or another more specific class of your choice.

I have a few solutions where this occurs sometimes and not in others. I would love to find a simple way to apply a style or class in a dropdown where this occurs, but its beyond my CSS skills.

If it’s a general issue with buttons and links not appearing inline within dropdowns, it might be easier to target sibling elements. :thinking: Maybe something like this?

.tc-drop-down a + button,
.tc-drop-down button + a,
.tc-drop-down button:first-child {
  display: inline-block;
  width: fit-content;
}

That might be broader than you need, depending on your use-case. (FWIW, @arunnbabu81, the following also solves your inline issue—but I haven’t tested to see what else it affects, if anything.)

.tc-drop-down button:first-child {
  display: inline-block;
  width: fit-content;
}
4 Likes

I’s working. thank you @etardiff

1 Like