Formatting edit etc button in table rows

I’ve added Detail and Edit link buttons to a table, like this:

image

(The eyeball button is the Detail link.) I am trying to format the buttons to make them less attention-grabbing. First thing I want to do is get rid of the command name – what I think Tadabase calls the Title – so that the buttons are just icons, like the eyeball, rather than icons + text, like the Edit button.

.

Now I can’t see any way to get rid of the button’s title other than to clear the Title field in the Edit Column dialog. But when I do clear that Title value, then the table view in the page editing area gets harder to use, because the column title is erased. Here’s an example of the table after I’ve cleared the title field for the Detail link column but have not yet done same thing for the Edit link column.

When I format the Edit link the same way, I’ll have two columns side by side, with “null” in the field and no column title. As you can see this makes it a little harder for me to know which is which. Not impossible, certainly, not a major problem. But I’m wondering if I’m doing something wrong.

.

The other thing I wish I could do is format these buttons so that they show just the icon. Here’s a mockup I did outside Tadabase. I can get Tadabase to format the button like the one here on the left and the one in the middle (with the light border). Ideally I’d prefer the one on the right with no fill and no border. Is this possible?

image

William

Well, I think I’ve found what’s probably the best answer: I changed my theme to Yeti. After the theme change and after configuring both buttons as well I can, things now look like this:

Wish I could get rid of those outlines around the icons, but as I said above, this isn’t a major deal, and these buttons are satisfactory.

William

Incoming screenshots…

1st - double click the field you want to edit to open up the column settings and set it up like this



You’re setting “Hide Title” to YES, giving the field a blank title, and setting an icon. The result is…



After this, you can right click on a button and click Inspect. You’re looking for this part…



In my case, you can see it says btn btn-primary , this is the type of button I selected in my field column setup. I can use this now to style the button.

td .btn-primary {
    border: 5px solid red;
}

We’re adding td to the beginning because I only want to style the buttons inside the table. So if you chose the button type “Warning”, you would replace .btn-primary with .btn-warning

You can add this to the table CSS, the page CSS, or for a global app setting - put the CSS in Custom Header / Footer code.


screenshot-dataflowstudios.tadabase.io-2020.11.04-23_59_54


Edit: let me just add this. You’ll also want to change the hover color and I usually change the colors for when the button is clicked. The latter is controlled by :focus and :active

td .btn-primary {
    border: 2px solid #whatever_color_you_want;
    background-color: transparent;
    color: black; /*controls icon color*/
}

td .btn-primary:hover {
    border: 5px solid #whatever_color_you_want;
    background-color: #whatever_color_you_want;
    color: #whatever_color_you_want;
}

td .btn-primary:focus, td .btn-primary:active  {
    border: 5px solid #whatever_color_you_want;
    background-color: #whatever_color_you_want;
    color: #whatever_color_you_want;
}

@tim.young,

I’m going to have to take you out for BBQ with all the trimmings if you’re ever passing through Dallas! This is exactly what I needed – and it would have taken me days to find it on my own.

I was using the default button style for these buttons, and I wanted NO border around the button. So I modified your example CSS to look like this:

td .btn-default { border: 0px solid red; }

And now my buttons look like this:

Which is just lovely. Thanks so much for the detailed explanation.

Looking like it’s time for me to try to dust off my knowledge of CSS!

.

This doesn’t solve my other little problem (the fact that, while developing, I’m looking at columns in the table that just say “null”). But that’s minor. I don’t have that many of these links, and I always put them in the same place. Or worst case, I click the collumn’s edit pencil and see what that column’s Field name is.

Thanks again Tim!

William

ADDENDUM 2 minutes later: I just noticed I left the “solid red” part of your CSS in there! I’m not editing it here, just to show that I really did copy and modify what you’d given me. With a border width of 0 the “solid red” part has no effect. Just wanted to save you the trouble of pointing that out. :wink:


Ah right! Sorry I completely glanced over the fact that you were referring to the builder. I agree with you here, as I almost always use icons only rather than text. I would suggest making a post in #suggestion-box to help get that on the Tadabase team’s radar.

Anyways, happy to help!

1 Like