how do I align my different products

  • Profile Image
    dcueba
    Asked on March 30, 2014 at 02:21 AM

    I have several products on my order form.  For some reason "Prints" doesn't align with the rest of them.  How can I make everything uniform?  It would be nice to also be able to get rid of the check boxes next to the categories if possible.  Thanks!

  • Profile Image
    EltonCris
    Answered on March 30, 2014 at 06:25 AM

    Hi,

    Your form prints nicely on Chrome upon checking it here. Though the first and last sub-products has more options so it displays below its thumbnail.

    If you want to align them beside the image, add this CSS codes to your form.

    .form-product-item {

    display: inline;

    }

    Result:

    Hope this helps!

  • Profile Image
    dcueba
    Answered on March 30, 2014 at 05:24 PM

    awesome.  thanks.  one last question... is it possible to make the categories for my products bold and remove the check box to the left of them?  When I look at the preview, if I uncheck the category, I can't get it back so I think it would be better not to have a check box there to begin with.  Thanks so much.

  • Profile Image
    abajan
    Answered on March 30, 2014 at 09:17 PM

    Sure. Just add the following rules to the form's injected CSS and save the form:

    #id_7 .form-checkbox {
    display: none;
    }

    .form-product-item label {
    font-weight: bold;
    }

    Do let us know if you need further assistance.

     

    Cheers

  • Profile Image
    dcueba
    Answered on April 03, 2014 at 07:18 PM

    Okay, I made some revisions and now it reverted back to the checkbox.  I entered what you told me to above and it did make the categories bold but the check box is still there.  Can you give me another magic code to make the checkbox go away?  Also to make the "My Products" heading bold?  Thanks!

    http://form.jotform.us/form/40918526699167

  • Profile Image
    dcueba
    Answered on April 03, 2014 at 07:30 PM

    Continued from above post...  Actually for the "My Products" heading, can I make it like it appears here instead?

    http://form.jotform.us/form/40917712388158

  • Profile Image
    Cesar
    Answered on April 03, 2014 at 10:49 PM

    If you want to have absolutely all checkboxes removed from the form, then add the code like so:

    .form-checkbox {
    display: none;}

    .form-product-item label {
    font-weight: bold;} 

    In regards to the second post, I apologize as I may be failing to understand your question as I see you have the heading as you want it on your form. In which case I would say yes, you can make it appear like in your example.

    Which are the parameters set for:

    .form-label-top {
    background: #efefef;
    border: 1px solid #ccc;
    padding: 4px 0px 3px 8px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    text-decoration: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    width: 654px !important;

    Do let us know if you need further assistance. Thank you.

  • Profile Image
    abajan
    Answered on April 04, 2014 at 03:51 AM

    @dcueba

    Setting the alignment of the My Products label from Left to Top
     


    will make the label look like that in the older form. There's a comment in the form's injected CSS immediately above the rule to which Cesar referred, hinting that the selector should be .form-label-left. That would work too but the label would appear too close to the first product's heading. So, it's better to leave the rule as is and change the label alignment to Top.

    As far as the checkboxes are concerned,

    #id_7 .form-checkbox {
    display: none;
    }

    didn't work because the ID of the field in the updated form (http://form.jotform.us/form/40918526699167) is id_19 and not id_7. The rule provided by Cesar will work but as he stated, it will remove all checkboxes from the form. So, if you intend to add other checkbox fields to the form, they won't be shown either and you would need to change the rule to

    #id_19 .form-checkbox {
    display: none;
    }

    to affect just the My Products field.

    Do let us know if you need clarification on any of the above.


    Thanks