Adaptive Form Table - Move Add/Remove Buttons to Left of Table | Community
Skip to main content
New Participant
August 3, 2022
Solved

Adaptive Form Table - Move Add/Remove Buttons to Left of Table

  • August 3, 2022
  • 3 replies
  • 845 views

Hello,

 

By default, the add/remove buttons on a dynamic table are positioned to the right of the table. Is there a way to set the buttons to be on the left side? I have attached a screenshot for reference. Thank you

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MorisMonk

I don't see an option on the table that a standard Author could use to achieve this display.

Don't know if you are using the Theme Editor, and not sure if it can be done via the Theme Editor.

Maybe just add something like the following to your clientlib (Client Library Category) for now:

.guideTableNode table .guideTableRuntimeRightControls{
	display:none;
}
.guideTableNode table .guideTableRuntimeLeftControls {
    display: inline-block;
}
.guideTableRuntimeEditControl {
        display: none;
}

3 replies

Mayank_Gandhi
Employee
August 5, 2022

@techddx go with @morismonk  approach but put it at forms client libs else all the control for all the forms will have the changes.

Pulkit_Jain_
Employee
August 4, 2022

@techddx 

Seems you're using an accordion layout with this panel. Thus, you're seeing these add & trash icons.

If you want to change the position of these icons, then you can change the alignment of the repeatable buttons class to "left" in the common.css under themes as shown below:

Hope this helps!

 

MorisMonkAccepted solution
New Participant
August 4, 2022

I don't see an option on the table that a standard Author could use to achieve this display.

Don't know if you are using the Theme Editor, and not sure if it can be done via the Theme Editor.

Maybe just add something like the following to your clientlib (Client Library Category) for now:

.guideTableNode table .guideTableRuntimeRightControls{
	display:none;
}
.guideTableNode table .guideTableRuntimeLeftControls {
    display: inline-block;
}
.guideTableRuntimeEditControl {
        display: none;
}