How to put 2 buttons in the same line

,
#1

Sorry to bother for something so simple (or so I believe). I was trying to put two buttons side by side, and normally it’s intuitive to do so, but on this occasion I just can’t get it. Basically I had a similar need to the one I found here https://groups.google.com/g/tiddlywiki/c/qo0kmYAhyMg, where asked for a way to tag multiple tiddlers. The proposed solution (which I later adopted) was to use a button that added the tag in question to all currently open tiddlers. I was going to insert this button next to “close all” in $:/core/ui/SideBar/Open like so:

2023-01-17 172439
2023-01-17 1724391472×763 34.6 KB

Unhighlighted code is the same as $:/core/ui/SideBar/Open and buttons right now are just an example with “123” so as not to complicate unnecessarily things. The button I added is highlighted in blue, and I assigned the macrocall “droppable item” (highlighted in green) to it instead of the close all button (highlighted in yellow).

I dont know if its the $macrocall $name="droppable-item" button that doesn’t make things work for how I’m using it, or if I’m missing something else. Maybe I should wrap both buttons in the same macrocall? (Btw, when I tried moving the "/> that closes the macrocall after the close all button the $macrocall $name="droppable-item" button broke)

  • How can I put the two buttons in the same line?

    2023-01-17 170751

Full code: (It is mostly the same as$:/core/ui/SideBar/Open, I put it whole for convenience; it is long but the affected parts, as can be seen in the figure, are very few)

\whitespace trim
\define lingo-base() $:/language/CloseAll/

\define drop-actions()
<$action-listops $tiddler=<<tv-story-list>> $subfilter="+[insertbefore<actionTiddler>,<currentTiddler>]"/>
\end

\define placeholder()
<div class="tc-droppable-placeholder"/>
\end

\define droppable-item(button)
\whitespace trim
<$droppable actions=<<drop-actions>> enable=<<tv-allow-drag-and-drop>> tag="div">
<<placeholder>>
<div>
$button$
</div>
</$droppable>
\end

<div class="tc-sidebar-tab-open">
<$list filter="[list<tv-story-list>]" history=<<tv-history-list>> storyview="pop">
<div class="tc-sidebar-tab-open-item">
<$macrocall $name="droppable-item" button="<$button message='tm-close-tiddler' tooltip={{$:/language/Buttons/Close/Hint}} aria-label={{$:/language/Buttons/Close/Caption}} class='tc-btn-invisible tc-btn-mini tc-small-gap-right'>{{$:/core/images/close-button}}</$button><$link to={{!!title}}><$view field='title'/></$link>"/>
</div>
</$list>
<$tiddler tiddler="">
<div>
<$macrocall $name="droppable-item" button="<$button class='tc-btn-mini'>Tag with 123
<$list filter='[list[$:/StoryList]]'>
<$fieldmangler tiddler=<<currentTiddler>>>
<$action-sendmessage $message='tm-add-tag' $param=123/>
</$fieldmangler>
</$list>
</$button>"/><$button message='tm-close-all-tiddlers' class='tc-btn-mini'><<lingo Button>></$button>
</div>
</$tiddler>
</div>
#2

You could wrap your buttons in <span>your stuff</span>.

#3

The droppable-item macro explicitly wraps its output within <div>...</div>, which is forcing your button to appear on a line by itself.

However… the droppable-item macro is only intended for use within the list of currently open titles (the code starting with <$list filter="[list<tv-story-list>]" history=<<tv-history-list>> storyview="pop"> and ending with </$list>). It makes the individual titles within that list droppable, so that you can change the display order of the tiddlers shown in the StoryRiver.

For your purposes, the added “Tag with 123” button doesn’t need to be a “droppable-item”, so you should remove the <$macrocall $name="droppable-item" button=" and matching "/>

Also, you can simplify your button’s actions by eliminating the use of the $fieldmangler widget. Instead of using a tm-add-tag message (which needs the surrounding $fieldmangler widget), you can use $action-listops to easily add the desired tag, like this:

<$button class='tc-btn-mini'>Tag with 123
   <$list filter='[list[$:/StoryList]]'><$action-listops $tags="[[123]]"/></$list>
</$button>
1 Like
#4

Almost solved. Thank you Eric.
Really interesting insight that the droppable-item macro wraps in <div>...</div>. Thank you, it explained a lot.

There is only one problem that remains at the moment. Unfortunately, apparently, the droppable-item macro was not without purpose (indeed I didn’t add it but it was already there in $:/core/ui/SideBar/Open and now I find out why).
Basically if I wanted to move a currently opened tiddler at the bottom of the StoryRiver I can’t unless there is a droppable-item macro that can accommodate it at the bottom. (And so the droppable-item that was on the close all button in the original $:/core/ui/SideBar/Open was there for just that.)

  • Is there a way to wrap two buttons in the same droppable-item? Maybe I need to change how it’s defined at the top to do that (?)
#5

Try this:

  1. Add a macro definitions, like this:
\define addTagToAll()
<$button class='tc-btn-mini'>Tag with 123
   <$list filter='[list[$:/StoryList]]'><$action-listops $tags="[[123]]"/></$list>
</$button>
\end

\define closeAll()
<$button message='tm-close-all-tiddlers' class='tc-btn-mini'>
   <<lingo Button>>
</$button>
\end
  1. Then, replace the last droppable-item macrocall with:
<$macrocall $name="droppable-item" button="<<addTagToAll>>&nbsp;<<closeAll>>"/>

Note:

  • The new button code COULD have been added “inline” in the button="..." parameter of the last droppable-item macrocall, but moving both button definitions into small macros makes the droppable-item macrocall MUCH more readable.
  • Using macros for the individual button definitions also eliminates the parsing problem of not being able to use double-quotes within the button="..." parameter value.
  • The HTML &nbsp; character entity forces a small separation between the two buttons

enjoy,
-e

1 Like
#6

Works like a charm, brilliant. Thanks for the help and also for the explanations, I really did appreciate them :slightly_smiling_face:
Thank you Eric!