Buttons on a Grid

Forms
1

Good Afternoon,

I have a row of buttons 5 at the top of a form, I have added a grid and then dropped the buttons onto the form, however when I resize the page (smaller) the buttons gradually begin to overlap, I have tried using an offset and adding padding but I can't seem to do anything to stop this happening, How can I set the form to stop this happening to force them to act like other fields and resize with the page size??

Full Size -

image
image.png1358×165 6.63 KB

Resized -
image

Thanks for your help

2

Dear Tony,

Sorry for a late reply.

Please try the following steps to make buttons more responsive:

  1. Add “button-grid” CSS class to Parent Grid of each button

Screenshot_110

  1. Add these CSS rules to CSS Editor:

     .fd-form .fd-button{
     width: 200px;
     margin: 2px;
     height: 100%;
     max-width: 100%;
     white-space: normal;
 }
 .fd-form .button-grid div{
     height: 100%;
 }

 .fd-form .button-grid{
     padding: 10px 2px;
 }
3

Thanks Alex,

That works really well, the buttons now resize properly…

Thanks again