-
teamfaithAsked on October 21, 2020 at 4:40 PM
Hi, I created a form in my library called "Huracán-R Purchase Order Form". It works great! Thanks! But I was wondering if the spaces between the items could be modified to make them a lot closer together? I actually found a setting called padding between items and I've even made that number a negative number but it didnt change anything. Can you help me "tighten-up" my form a little?
Page URL: https://teamfaith.wixsite.com/huracanski -
roneetReplied on October 21, 2020 at 9:54 PM
Please inject this CSS in your form:
.form-line[data-payment="true"] span.form-product-item {
margin-bottom: -10px!important;
margin-top: -10px!important;
}
Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes
Let us know how it goes.
Thanks.
-
teamfaithReplied on October 22, 2020 at 1:12 PM
thank you! That is cool. Is there a way you can check it? It looks like there may be an overlap on the background color after an item is checked. In fact I wouldnt mind changing that background color fromthe pastel blue color to just white if possible...but I can't see that adjustment anywhere int he form builder. Also - can the background color of the checked check box be changed from the default blue to an orange?
-
Simon_LReplied on October 22, 2020 at 8:02 PM
Hello,
Thank you for contacting JotForm's support.
1) Background color overlap
Kindly replace @roneet's code with mine, and it should work:
.p_item_separator { display: none;}
The "p_item_separator" class is a <div> tag automatically added between the products from the Product List widget to add some space between them. Changing its display to "none" will remove those separators and will not cause a background color overlap.
2) Removing the background color on hover
Simply add this code into your form's CSS:
.new_ui { background-color: transparent !important;}.new_ui:hover { background-color: transparent !important;}
3) Changing the tickbox's color to orange *
Same thing, some more lines of code to inject:
.checked { background-color: orange !important; border: 1px orange !important; text-shadow: none !important;}
* This however does not fix the blue color when hovering over a checkbox. I could spend more time looking into it if it is really important for you.
Feel free to look up my demo form to see what it looks like. Click here!
Let us know how we can be of any further assistance,
Thank you,
Simon
-
teamfaithReplied on October 22, 2020 at 8:06 PM
Simon, Thanks!
Your demo form looked awesome! I think we lost some width to it howerver...so is there a way to keep the width I had? did you do it on your phone or on a desktop?
Either way, I'm not concerned about whatever blue you said you needed to look into..I think its awesome and exactly what I want.
-
teamfaithReplied on October 22, 2020 at 8:28 PMI think we may have lost some width to the section that contains all the
items...is there a way to bring that out to the width of the rest of the
form? I think its set at 800px
Brian O'Rourke | *President* - Team Faith Racing Ministry
6165 John Hagar Rd. Mt. Juliet, TN 37122
865.671.3066 (Office)
540.222.9240 (Cell)
briano@teamfaith.com
www.teamfaith.com
... -
roneetReplied on October 22, 2020 at 9:56 PM
Are you referring to the product's width or the form's width?
Do you want your product to look like this?
If yes, please inject this CSS in your form:
.form-line[data-payment="true"] span.form-product-item .form-product-item-detail {
width: 150%;
}
Let us know how it goes.
Thanks.
-
teamfaithReplied on October 23, 2020 at 10:28 AMOk,
thank you guys (and gals) so much for all your attention. I just want the
form to be perfect!
But I did some more editing in CSS. Admittedly I do not know much but with
trial and error I got the form to look exactly the way I want in the
Advanced Form Designer using the CSS tab. However, when I click Preview
Form, its not right and doesnt look the way I see it on the screen in the
editor.
[image: formineditor.png]
But in preview mode and on my website:
[image: image.png]
You can see I lost the width from 100% across again. If I change that to
150% it doesn't look right either...
Also - is there a command to keep the categories from being able to
collapse and
open? I don't want to give the user that feature....
Thanks again for all your support
Brian O'Rourke | *President* - Team Faith Racing Ministry
6165 John Hagar Rd. Mt. Juliet, TN 37122
865.671.3066 (Office)
540.222.9240 (Cell)
briano@teamfaith.com
www.teamfaith.com
... -
roneetReplied on October 23, 2020 at 11:51 AM
Could you please view the form now in teh preview mode? I have injected the CSS into your form.
Unfortunately, it is not possible to close the categories collapse when the form is loaded.
Do you want us to open a feature request ticket on this requirement?
Thanks.
-
teamfaithReplied on October 23, 2020 at 6:28 PMlooks almost perfect!
The only thing that keeps happening is for some reason the category of "Jet
Pump" always defaults to the closed or collapsed status when you load the
form. Is there a way to just default it to be open?
Yes, if you'd like to open the feature request ticket to add the feature of
just removing the ability for the category to collapse or open...in other
words...just make that a feature in the editor that the user can have
collapsible categories or not. For me, I prefer for the categories to NOT
expand or collapse...just the headings for each category is fine for me.
Thanks again, you guys are great!
Brian O'Rourke | *President* - Team Faith Racing Ministry
6165 John Hagar Rd. Mt. Juliet, TN 37122
865.671.3066 (Office)
540.222.9240 (Cell)
briano@teamfaith.com
www.teamfaith.com
... -
roneetReplied on October 23, 2020 at 9:40 PM
On further troubleshooting, I have noticed that if you close the collapse section in the edit mode then it will also be closed on the form:
Please check your website and let us know how it goes.
Thanks.