Create Buttons on Tab

  • 1
  • Question
  • Updated 5 years ago
  • Answered
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 ?

Photo of ktyler

ktyler

  • 9,274 Points 5k badge 2x thumb

Posted 6 years ago

  • 1
Photo of Anna Wiersema

Anna Wiersema

  • 10,910 Points 10k badge 2x thumb
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?
Photo of Zach McElrath

Zach McElrath, Employee

  • 51,638 Points 50k badge 2x thumb
Nothing hack-y about this, in my mind --- this is the best way to do it.
Photo of ktyler

ktyler

  • 9,274 Points 5k badge 2x thumb
That worked


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

ktyler

  • 9,274 Points 5k badge 2x thumb
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
Photo of Zach McElrath

Zach McElrath, Employee

  • 51,638 Points 50k badge 2x thumb
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.
Photo of Anna Wiersema

Anna Wiersema

  • 10,910 Points 10k badge 2x thumb
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.
Photo of ktyler

ktyler

  • 9,274 Points 5k badge 2x thumb
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
Photo of ktyler

ktyler

  • 9,274 Points 5k badge 2x thumb
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

Photo of ktyler

ktyler

  • 9,274 Points 5k badge 2x thumb
be nice to be able to format the buttons to give them an uniform width

(i know... picky, picky)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,588 Points 20k badge 2x thumb
Important question that merits specific topic Please reference the new topic here: Format buttons with uniform width
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,550 Points 10k badge 2x thumb
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;
}
Photo of ktyler

ktyler

  • 9,274 Points 5k badge 2x thumb
Thanks Ben,
That worked out
we all need the api defined so we can style these things ourselves
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,550 Points 10k badge 2x thumb
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.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,748 Points 5k badge 2x thumb
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 ...)
Photo of Anna Wiersema

Anna Wiersema

  • 10,910 Points 10k badge 2x thumb
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.