How do I reduce the space between the two questions?

  • teamfaith
    Asked 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?

  • roneet
    Replied 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.



  • teamfaith
    Replied 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_L
    Replied 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 !importantborder: 1px orange !importanttext-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

  • teamfaith
    Replied 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.


  • teamfaith
    Replied on October 22, 2020 at 8:28 PM
    I 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
    ...
  • roneet
    Replied 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?

    1603418124 5f92380c91108  Screenshot 10

    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.


  • teamfaith
    Replied on October 23, 2020 at 10:28 AM
    Ok,
    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
    ...
  • roneet
    Replied 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.

  • teamfaith
    Replied on October 23, 2020 at 6:28 PM
    looks 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
    ...
  • roneet
    Replied 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:

    1603503570 5f9385d2f367c  Screenshot 10

    Please check your website and let us know how it goes.

    Thanks.