Solved SP Page Builder

How to Add Padding on Form Label Text

Asked by Yofie Setiawan 11 months ago Last activity 10 months ago

Hi,

I wonder how to add nice padding to the left of label text on form addon. Would be nice to have an easy way to add to the config.

https://ibb.co.com/k24KfKNL

Accepted answer

Marked as the solution
Yofie Setiawan Asked this
11 months ago

Hi Rashida,

That doesnt work for me, i try this one that actually works...

.sppb-form-control {
padding-left: 20px !important;
}

5 more replies

Oldest first Newest first Most helpful
Yofie Setiawan Asked this
11 months ago

Hi Rashida,

I mean Field Placeholder?

Yofie Setiawan Asked this
11 months ago

Hi Rashida,

Tried that, i know it suppose to be there, but no changes on frontend, no padding added...

Rashida Rahman Staff
11 months ago

Hello,

Maybe it is getting overrided by the template css. If you give your site URL, where you have that form, maybe I can help.

Thans!

Rashida Rahman Staff
11 months ago

Thanks for the link.

You can try the following code either in your custom CSS:
.sppb-addon-form-builder-form .sppb-form-group select, .sppb-addon-form-builder-form .sppb-form-group input:not([type="checkbox"]):not([type="radio"]), .sppb-addon-form-builder-form .sppb-form-group textarea{padding-left:20px !important;}

I have used 20px in the above code as an example, but you can use any value as per your need.

Best regards,

Rashida Rahman Staff
10 months ago

Thanks for letting me know about your experience. I'm glad that you have found out the working CSS.

Have a nice day!

Paul Frankowski Senior Staff
11 months ago · edited

@Yofie, always first check using Code Inspector (Browser) - you will save a lot of time & get sticker "Pro"

Indeed, it's from template styles. This should help :]

.sppb-addon-form-builder input[type="text"]:not(.form-control), 
.sppb-addon-form-builder input[type="email"]:not(.form-control)  {
  padding: .5rem 1rem !important; }
Yofie Setiawan Asked this
11 months ago

Hi Paul,

Thanks, i actually already familiar in using INSPECT, it just sometimes i'm not good enough in reading the scripts. For some other basic stuffs usually i can read and troubleshoot my self. I'm that person that coming from design background with UI/UX as passion, not coding and programming. xD

Thanks for the learning tip, i hope i can improve...

Paul Frankowski Senior Staff
11 months ago

I guess, above CSS helped.

Sure, I will remember ;]

Log in to reply.