Adding CSS to Plumbsnail form

Forms
#1

Hi,

I am trying to add two button Save and close in the bottom of the page as well (just like the one in the top of the general plumsail form)
image

I tried to create the same by dragging and droping two button changing the properties and adding java script as below.

fd.spSaved(function() {
setTimeout(function() {
    fd._showAlert('The form has been submitted successfully. Thank you, IT');
}, 5);

})

I set the width of the button as one but still the width between the buttons are not as same as the default created one on the top. and the css class I have added in the properties is "tn btn-outline-primary" and "btn btn-primary" to get the default theams from the site but the out put shows this
image instead if this image

#2

Hello @rinu007,

Please paste the below code in CSS Editor to change Close button styling.

image

.btn-outline-primary:not(:hover){
 background-color:transparent !important;
}
#3

Thanks MNikitha,

is there any way to control the width between buttons?

#4

@rinu007,

You can use the grid to place fields and controls side by side and to layout and align content in forms.

Please see the 'Use Grids instead of Tables' article for more information.

#5

I did but its still the same
image
with the below properties
image

#6

@rinu007,

The alternative is to change the margins of the default buttons with the below CSS so it will match the width between custom buttons.

.fd-toolbar-primary-commands > button {
    margin-right: 10px !important;
}
#7

I have tried this but still the same.
image

please see the below

image
image.png1406×724 52.3 KB

#8

@rinu007,

Please do the following:

  1. Add the 'Table' container to the form. Set 'Width Unit' to 'Auto'.
    image

  2. Add 'Save' and 'Close' buttons inside the table. Set the left and right padding to '0'.

image

The buttons on the form will look like this:
image

#9

Perfect nmikitina. it worked like a charm :blush:

1 Like
#10

i have similar situation but i have four button and button is hidden on condition so if second button is hidden there a space for that button still available is there a way to hide the space too? I have set visibility:hidden in style and showing button on status which works great except for the hidden button still occupies the space.

#11

never mind it was a simple trick i figured it out for anyone else looking for it using display:none; will hide whole container

1 Like