How To Add Padding On Form Label Text
Yofie Setiawan
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.
Rashida Rahman
Accepted AnswerHi there!
Thanks for reaching out.
Did you mean Field label or field placeholder?
https://share.cleanshot.com/DMxQrHjy
If you mean Field Label then here is existing margin option: https://share.cleanshot.com/TfqWWtYx
Hope this helps!
Best regards,
Yofie Setiawan
Accepted AnswerHi Rashida,
I mean Field Placeholder?
Yofie Setiawan
Accepted AnswerHi Rashida,
That doesnt work for me, i try this one that actually works...
.sppb-form-control {
padding-left: 20px !important;
}Rashida Rahman
Accepted AnswerTry this: https://share.cleanshot.com/K207TYdb
Yofie Setiawan
Accepted AnswerHi Rashida,
Tried that, i know it suppose to be there, but no changes on frontend, no padding added...
Rashida Rahman
Accepted AnswerHello,
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!
Yofie Setiawan
Accepted AnswerHi Rashida,
Here the credentials, try to add padding left to field label on reservation form on this page
Rashida Rahman
Accepted AnswerThanks 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,
Paul Frankowski
Accepted Answer@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
Accepted AnswerHi 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...