Question

Forms - move approve button with CSS

Forms

Updated October 13, 2021

asked on December 23, 2015

I have a user that wants the Approve or Reject buttons at the TOP rather than at the bottom.

Can I move those in CSS? Have made several attempts and have been unsuccessful.

(And I know, it doesn't make sense moving to top, but that is what customer is adamantly requesting)

0 0

Replies

replied on December 23, 2015 • Show version history

You can try the following CSS

.action-btn:nth-child(1) {
  position:absolute;
  top:0;
  left:300px;
}

.action-btn:nth-child(2) {
  position:absolute;
  top:0;
  left:500px;
}

This is so that the buttons don't cover each other up since both the Approve and Reject buttons have the action-btn class.

There may be other options as well, but perhaps start with that and then modify it to see what works for the user.

Also, if the starting/submisssion form and the approval form are the same, then you may want to make a copy of the form and then use the copy for the approval task while also only applying the CSS to the copied approval form. That way the Submit button on the starting/submission form won't get affected.

0 0

replied on December 23, 2015 • Show version history

To use only one form for both submissions and approval, or for forms which may have multiple buttons, you can use the .approval-wrap selector in addition to the code above to make sure the style applies only to the approve/reject buttons:

.approval-wrap .action-btn:first-child {
  position: absolute;
  top: 0;
  left: 300px;
}
.approval-wrap .action-btn:last-child {
  position: absolute;
  top: 0;
  left: 500px;
}

The :first-child or :last-child pseudo-selectors can of course be modified to fit the use case as appropriate.

0 0

replied on April 20, 2018

Hi James, I'm using 10.3 with your CSS code above. See below.

It works for the Submit Button but not the Approve/Reject

Did this code change for 10.3.1

.approval-wrap .action-btn:first-child {
position: absolute;
top: 50px;
left: 1200px;
}

.approval-wrap .action-btn:last-child {
position: absolute;
top: 50px;
left: 1400px;
}

0 0

replied on December 29, 2015

Thank you Alexander Huang, your result moved the Submit button to top. But did not move the Approve/Reject buttons. James Newton comment may be headed the right direction, but I guess I don't understand the syntax, putting exactly what he entered did nothing. How do I see the actual id names of the Approve and Reject buttons?

0 0

View 2 previous replies

replied on December 29, 2015

Hi Arthur,

If you use Alex's code with no modification, because the Submit button also belongs to the action-btn class it is also affected by the CSS which moves it to the top; hence Alex suggested using multiple forms and only applying his CSS to one which is used for approval.

With my CSS, the code only affects action-btn elements within an approval-wrap element, which only exists during a user activity step. The approval-wrap div element contains the Approve/Reject buttons, and no Submit button. So there is no visible difference when filling out the form, but looking at the form during approval from the user's inbox will display the buttons at the top. Is this the behavior you were looking for?

The Approve/Reject buttons have no element ids of their own; you can always view the source of the approval step in your browser: Ctrl + U to view the full HMTL of the page or F12 to bring up the developer console and view particular elements.

Hope this helps!

1 0

replied on December 29, 2015

Your description is exactly what I am looking for, but using your exact CSS code gives an approval screen, with comments and two buttons, but I can't see original fields on submitted form. I even tried adding additional fields because my test form only had three in case it was positioning on top of fields, but they just don't show. See below in case I made an error.

Thank you for help!

0 0

replied on December 29, 2015

The first error I see in the code is a missing period before the action-btn class in each selector, since "action-btn" is the name of a CSS class, not a tag name.

That shouldn't affect why the other fields are not displaying, though. Does it still look this way after adding in periods? If so, does it look the same across different browsers? If this CSS snippet is removed, does the issue persist?

0 0

replied on December 29, 2015

Perfect - the two . fixed it!

0 0

replied on December 29, 2015

Nice. Glad to hear it!

0 0

replied on October 13, 2021 • Show version history

Hi, I'm trying this code in Forms version 11, and it moves the buttons but they are position based on the top left of the webpage, and not relative to the Form itself, meaning the buttons also move based on the browser size. Is there a way to make their position relative to the Top left of the form itself?

0 0

You are not allowed to follow up in this post.

Question

Question

Forms - move approve button with CSS

Replies

Sign in to reply to this post.