How do I reduce the space between the two questions?

  • Profile Image
    teamfaith
    Asked on October 21, 2020 at 04: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?

  • Profile Image
    roneet
    Answered on October 21, 2020 at 09: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.



  • Profile Image
    teamfaith
    Answered on October 22, 2020 at 01: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?

  • Profile Image
    Simon_L
    Answered on October 22, 2020 at 08: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

  • Profile Image
    teamfaith
    Answered on October 22, 2020 at 08: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.


  • Profile Image
    teamfaith
    Answered on October 22, 2020 at 08: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
    ...
  • Profile Image
    roneet
    Answered on October 22, 2020 at 09: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_

    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.


  • Profile Image
    teamfaith
    Answered 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
    ...
  • Profile Image
    roneet
    Answered 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.

  • Profile Image
    teamfaith
    Answered on October 23, 2020 at 06: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
    ...
  • Profile Image
    roneet
    Answered on October 23, 2020 at 09: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_

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

    Thanks.