Create Buttons on Tab | Skuid Support Community

Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Old Conversations

I have a page that needs buttons to open a lot of related documents
i was able to add them as page actions

but i'd really like to add them as buttons on a tab

is there a component that will let me do that ?

ktyler

9,274 Points

Posted 6 years ago

6 years ago

Anna Wiersema

10,910 Points

So the hack-y way to do this is to put a page title component in each tab. Delete the default text in the title and subtitle fields so the title text doesn't show up at all. Then you can add the appropriate actions to each tab.
Does that answer your question?

2013-04-30T14:48:45+00:00

Zach McElrath, Employee

51,638 Points

Nothing hack-y about this, in my mind --- this is the best way to do it.

6 years ago

ktyler

9,274 Points

That worked

It would be nice to be able to put the buttons in a vertical row rather than in a horizontal one

6 years ago

ktyler

9,274 Points

OK, I figured that out... put 10 page title components on the tab... this is a little hacky zach

which means i have to recreate each button

it would be nice to just drag them from one page title component to the next

6 years ago

Zach McElrath, Employee

51,638 Points

If you want them in a vertical row, and want them to show up inside each tab, perhaps you could use a Panel Set? Put the 10 page title components in a Left Panel, and then put your Tab Set in the Right Panel. That way the buttons would be on the left and show up for every tab.

1 person likes this

6 years ago

Anna Wiersema

10,910 Points

I suggest using XML to copy and paste the whole component into the next tab.

You can also use the panel set component to structure the size of your titles/action sets. Do you have different actions for every tab, or the same ones? Because if they are the exact same actions, then you can just use a panel set to put a little sidebar beside your tabset and throw the actions in there.

6 years ago

ktyler

9,274 Points

that gives me this

not quite what i was hoping for... but it works for now

any way to get the buttons to "align left" instead of right

6 years ago

ktyler

9,274 Points

ok
panel set helped
i just put the panel set on the tab, since i didn't want the buttons to be visible for all tabs

6 years ago

ktyler

9,274 Points

be nice to be able to format the buttons to give them an uniform width

(i know... picky, picky)

2014-10-03T19:10:29+00:00

Rob Hatch, Official Rep

44,588 Points

Important question that merits specific topic Please reference the new topic here: Format buttons with uniform width

6 years ago

Ben Hubbard, Employee

12,550 Points

Hi Ken,

Adding this code as an inline CSS resource should get you started down that road.

.nx-panel-left-inner .ui-button {
display: block;
background: lightblue;

}

.nx-panel-left-inner > div > div > div > div {
display: block !important;
}

.nx-panel-left-inner > div > div > div {
width: 100%;
display: block;
}

1 person likes this

6 years ago

ktyler

9,274 Points

Thanks Ben,
That worked out
we all need the api defined so we can style these things ourselves

6 years ago

Ben Hubbard, Employee

12,550 Points

Yeah, I totally agree. Whenever I get time, I want to go through and document all of the css classes as well as make sure everything has intuitive names. Not sure when that's going to be able to happen though.

In the mean time, Chrome's "Inspect Element" functionality can do some pretty amazing things as far as letting you know what styles are being applied and what rules are applying them.

2 people like this

6 years ago

Glenn Elliott, Champion

7,748 Points

Very keen to hear when this is done. Even just a simple glossary of the CSS elements would help a lot. (Doesn't sound like a fun job for you, though ...)

1 person likes this

2013-07-01T18:00:01+00:00

Anna Wiersema

10,910 Points

This is a great idea that's separate from the main topic, so I created a new topic to continue the discussion. Please reference the new topic here: Document Skuid CSS

This conversation is no longer open for comments or replies.