Button Toolbar in one row

[NeoCoderMatrix86]

Hello everybody,

I'm currently trying to get my layout corrected, since there is a not desired behaviour. I have several Buttons in in Button Toolbar like in the example here https://blazorise.com/docs/components/button.
The Button Toolbar is inside a responsive table and I would like to have the Toolbar use the space default that it is displayed in one row and not breaking like this:

The code looks like this:

<TableRowCell>
	<Tooltip Placement="TooltipPlacement.Top" Text="@GetLocalizedString((AudioPlayer != null) && (AudioPlayer.AudioIsPlaying == true) && (AudioPlayer.CurrentlyPlayingTrack == track),"Current track is played")">
		<Buttons Role="ButtonsRole.Toolbar">
			<Buttons Margin="Margin.Is1.FromEnd">
				<Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Edit track tooltip"]">
					<Button Size="Size.Small" Color="Color.Secondary" Clicked="() => EditTrackModal(track)">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
							<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
							<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
						</svg>
					</Button>
				</Tooltip>
				<Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Copy track tooltip"]">
					<Button Size="Size.Small" Color="Color.Success" Clicked="() => CopyTrackClicked(track)">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-images" viewBox="0 0 16 16">
							<path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
							<path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z" />
						</svg>
					</Button>
				</Tooltip>
			</Buttons>
			<Buttons Margin="Margin.Is1.FromEnd" Display="Display.None.OnMobile.None.OnTablet.Flex.Row.OnDesktop">
				<Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Start playback this track"]">
					<Button Size="Size.Small" Color="Color.Info" Disabled="(AudioPlayer == null) || ((AudioPlayer != null) && (AudioPlayer.PlaybackPossible == false))" Clicked="() => OnPlayTrackClicked(track)">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-btn" viewBox="0 0 16 16">
							<path fill-rule="evenodd" d="M14 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z" />
							<path fill-rule="evenodd" d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z" />
						</svg>
					</Button>
				</Tooltip>
			</Buttons>
			<Buttons Margin="Margin.Is1.FromEnd" Display="Display.None.OnMobile.None.OnTablet.Flex.Row.OnDesktop">
				<Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Move track up tooltip"]">
					<Button Size="Size.Small" Color="Color.Secondary" Disabled="!Cuesheet.MoveTrackPossible(track, MoveDirection.Up)" Clicked="() => Cuesheet.MoveTrack(track, MoveDirection.Up)">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
							<path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z" />
						</svg>
					</Button>
				</Tooltip>
				<Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Move track down tooltip"]">
					<Button Size="Size.Small" Color="Color.Secondary" Disabled="!Cuesheet.MoveTrackPossible(track, MoveDirection.Down)" Clicked="() => Cuesheet.MoveTrack(track, MoveDirection.Down)">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-down" viewBox="0 0 16 16">
							<path fill-rule="evenodd" d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z" />
						</svg>
					</Button>
				</Tooltip>
			</Buttons>
			<Buttons Margin="Margin.Is1.FromEnd">
				<Tooltip Placement="TooltipPlacement.Right" Text="@_localizer["Delete track tooltip"]">
					<Button Size="Size.Small" Color="Color.Danger" Clicked="() => OnDeleteTrackClicked(track)">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
							<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
						</svg>
					</Button>
				</Tooltip>
			</Buttons>
		</Buttons>
	</Tooltip>
</TableRowCell>

I tried using a around, but that didn't work. Any ideas, how to get this in one row?

[stsrki]

Maybe try placing buttons in a Div and then assign the Flex. eg.

<Div Flex="Flex.JustifyContent.Start.AlightItems.Center">
  // buttons
</Div>

Haven't tested it but try several different combinations to see if it works.

[NeoCoderMatrix86]

Thanks, works fine :)