Group buttons together on a page

I’ve just read the a case study from your customer, Global Distributors. What struck me was the clean design of the app and in particular I liked how they’d organised the buttons. Have the Tadabase team or any forum members got any tips on how they manage their buttons. On my pages the buttons seem to end-up scattered around the page (PDF button, Save button, Action link buttons etc) and it looks a little messy :frowning: It’s certainly something I’d like to improve with my own designs.

Example from Global Distributors:

Are you familiar with flexbox? Its extremely useful for stuff like this

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

@Marty that’s new to me, I’ll take a deeper look as I’d like to implement a slicker solution to the one I have at the moment, thanks. :+1:

I think Tim talks about this here at 30mins 30secs, or similar :blush:

@kruizf201

1 Like

The responses from @CarlHolmes and @Marty can also help.

In the case of the case study, its actually quite simple.

It’s a details page, inside the details page there are 2 columns at the top with 2 Detail Components. On the right and a second on the left.

Each of these buttons are simply action links inside the details component which are formatted to be displayed as a Button.

I rebuilt an example here:

And you can see the output looks like this:

Inside the details component, when setting the Action Link, set it to be a button:

I hope this helps.

6 Likes

Hey @moe is there a way to launch for Save button and Print PDF (Page) functionality in an action link so these special buttons can be group together with the action links in this fashion?

Apologies, I think I mis-interpreted the question the first time. I believe to be able to get buttons from one component inline with buttons from a different component you have a couple of options. The first one would be pure CSS. The other option (and possibly easier) is to create all the buttons the user will see in the HTML or detail component, and use javascript to take a click event of the dummy button and map it to the native buttons which you would hide from view using CSS.

1 Like