Cleaner Pages! (How to hide unwanted component headers and footers)

Thought I´d just pass on a hot tip from Moe, by just adding .table-actions {
display: none;} to your page layout CSS will remove all the instances of grey component headers and footers as you will see in the illustrations below. This may not be ideal if you have a need to refresh, have pagination, search enabled, add record etc, so Moe has also come up with a solution to be able to do the same with just selected components. In this case add .hide-actions .table-actions {display: none;} to the page layout CSS and then simply add hide-actions to the component Additional CSS Classes.

Hope people find this as useful as I have, Thanks Moe!!!

With Headers/Footers Hidden


Not Hidden

10 Likes

Nice @Ashley!

Thank you for sharing :grinning:

This is AWESOME!! Thank you for sharing, it totally changed the look of my app!

Would anybody know how to hide certain elements of a table?

I have values that I set to be hidden after I collect the info I need, but it looks odd:

Any help will be greatly appreciated!

Hey @Rez,

Are these columns hidden for all users? If so, you can add the CSS class “hide” in the column setting of the table.

Hi @tim.young, they are not. They only disappear after the user has clicked on them and submitted the information I need to collect.

See below: the red items need mean the user needs to click and submit information. Once they do that, it disappears. I don’t want them to be able to edit or see after submission.

Does that make sense or should I try and do this another way?

Oh I see! That makes more sense.

So this is more complex because hiding the column for one record, would hide it for other records. It might be possible with JavaScript but that’s a bit beyond me unfortunately!

Personal opinion here as far as design goes, I’d suggest just changing the icon color to green. That way column widths stay consistent as you scroll down the page.

2 Likes

Thanks for the fast response @tim.young!

I did think about turning the items into green or regular colors, but they are still a form. I don’t want users to see / resubmit the form again.

It would work if instead the form to submit I could display the info the user entered once the symbols are green, but I don’t that’s doable either.

I will just have to think of another way to do this. Thank you though!

1 Like

Hey @tim.young, I have been using a radio button to change status to “complete” after the form has been submitted, and then, I disabled the “send” button on the form and change the status to “You cannot submit this form again”.

Worth to mention it does not work with a decision field, however, a radio field works!

1 Like

@Rez -

I have never had good results using the decision box for such types of actions. I have used a similar method as you described.

Adam

1 Like

Thanks @SafetyUniversity, this has been my experience as well!