Change position of quantity and price labels please

  • Profile Image
    CoverStarExperiences
    Asked on July 25, 2013 at 04:55 AM

    See this thread...similar problem...

    http://www.jotform.com/answers/230882-how-can-i-swap-the-positions-of-quantity-and-price-on-form?entrymessage=10732640770

     

    I currently have this:

     

    http://www.jotform.com//?formID=32034807832855

     

    I need to make it so that the price is displayed below the "Taster" Part and the "guests" is shown below the drop down box. Can this be done?

  • Profile Image
    EltonCris
    Answered on July 25, 2013 at 05:08 AM

    Hi,

    Do you want it to be like this?

    If yes, removed all the existing CSS codes injected to that specific form and inject this instead:

     

    .form-product-item{

    width: 258px;

    height: 59px;

    }

     

    .form-product-details{

    position: relative;

    top: 26px;

    left: 115px;

    }

    However, if you want it below the dropdown box, replace the 2nd CSS codes to this:

     

    .form-product-details{

    position: relative;

    top: 44px;

    left: -58px;

    }

    You can play around with the top and left value in this CSS codes to position the price text.

    Thanks!

  • Profile Image
    EltonCris
    Answered on July 25, 2013 at 05:14 AM

    Sorry I think I missed your point, use this instead:

    .form-product-details{

    display: block;

    margin-left: 15px;

    }

    .form-product-item .form-sub-label {

    display: block;

    }

     

    .form-sub-label-container{

    margin-left:19px !important;

    }

    Result:

    Let us know if you want further changes. Regards!

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 05:30 AM

    Yeah, second one is what I meant, great! Can I shift these across to the far left or centre everything? Also is there anyway of making the guests and total bigger and shifting the price down a little?

     

    Thank you

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 05:34 AM

    Also, the form in general (the text etc) is to the right hand side of the form when there's lots of space on the left, how do I get it to shift over completely.

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 05:35 AM

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 05:36 AM

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 05:36 AM

    Ignore the grey bar down the left, but as you can see the text etc is towards the right not the left and therefore is giving less room on the right

  • Profile Image
    EltonCris
    Answered on July 25, 2013 at 05:53 AM

    Ok, replace the previous codes to this:

    .form-product-details{

    display: block;

    margin-left: 15px;

    margin-top: 5px;

    font-size: 11px;

    }

     

    .form-product-item .form-sub-label {

    display: block;

    margin-top: 5px;

    font-size: 11px;

    font-weight: bold;

    }

     

    .form-sub-label-container {

    margin-left: 19px !important;

    }

     

    .form-line {

    padding-left: 0 !important;

    }


    Result:

    As you can see I have removed the left padding of your form, this clears the left margin in it.

    Let me know if I have missed something. Thanks!

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 06:17 AM

    This is great...not neccesary but would there be the option to get rid of the dot? This form will be placed below a specific service so there's no need for it. Either way, what code should I change to make everything centre aligned please?

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 06:20 AM

    Also, I think I know the answer to this one, but can you have a custom font or at least one that's not on the list but web safe?

  • Profile Image
    EltonCris
    Answered on July 25, 2013 at 06:25 AM

    To center everyting, append this CSS codes.

    .form-all {

    text-align: center;

    }

    For a custom web safe fonts, use Google Webfonts, here's a guide: Beautify your form with Google Web Fonts

    Thanks!

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 07:07 AM

    Great thank you. The centre option doesn't seem to be centering it though, it's slightly off. How would I go about hiding the "guests" text?

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 10:48 AM

    Hi, would I be able to hide text? Also, I can't seem to finx the centre alignment? It looks as though it's pushing everything to the right a tiny bit

  • Profile Image
    pinoytech
    Answered on July 25, 2013 at 10:51 AM

    Hi,

    To hide sub label "guest" text, inject this custom css:

    .form-sub-label[for*="1002_0"] {

    display: none !important;

    }

    Thank you!

  • Profile Image
    EltonCris
    Answered on July 25, 2013 at 10:55 AM

    @CoverStarExperiences 

    Sorry for the delay.

    To hide the "Guest" text, find this CSS on the previous codes.

     

    .form-product-item .form-sub-label {

    display: block;

    margin-top: 5px;

    font-size: 11px;

    font-weight: bold;

    }

    and then replace it with this,

    .form-product-item .form-sub-label {

    display: none;

    }

    Regarding on the aligning to center, it seems to look fine here.

    '

    Have you previewed your form and check? Can you give us a screenshot on how the form looks like on your end? We'll wait your reply. Thanks!

     

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 11:31 AM

    Hi,

     

    Thank you again.

     

    Only thing that isn't centre is the drop down box?

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 11:32 AM

    You can see that on your image as well

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 11:34 AM

    Also is there a way of centering the drop box text as well. If not, this is not major. Thank you. You've helped me alot!

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 11:39 AM

    This is currently my code

     

    .form-product-details{display: block;margin-left: 0px;margin-top: 5px;font-size: 15px;color:#FFCC66;}.form-product-item.form-product-item .form-sub-label {display: none;}form-sub-label-container {margin-left: 0px !important;}.form-line {padding-left: 0 !important;padding-right: 0!important}.form-all {text-align: center;}

  • Profile Image
    EliezerN
    Answered on July 25, 2013 at 12:52 PM

    To center the dropdown box please insert this CSS code:

    .form-dropdown

    {

    margin-left:18px !important;

    }

    It will look this way:
    If you need to have it more or less centered you can edit the value 18px.
    If you have any other question that is different from the original one of this thread, kindly open a new thread and we will be more than glad to help you.
    Thanks
  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 02:00 PM

    Ok thank you. How would you make the text smaller and next to each text for different products, so far I have all my prices in a large font, but I only need one in a large font and then the rest smaller and next to the product. Thank you

  • Profile Image
    EliezerN
    Answered on July 25, 2013 at 02:27 PM

    I'm afraid I haven't understood your question very well,

    Which of your prices would you like to make smaller or large? and which text would you like to put next to the product?

    Please let us know to can help you.

    Thanks

  • Profile Image
    CoverStarExperiences
    Answered on July 25, 2013 at 02:33 PM

    I have a few issues with the form I'm trying to do..I hope you can help. I managed to solve the text problem though.

    As you can see...http://form.jotform.co/form/32034807832855

    I have a package that costs a certain amount depending on how many guests, that is correct. When it gets down to the extras, I have a long list of extras but not much space on the website. The checkboxes are far to apart, can they be closer together, plus is it possible to have custom hover text over each check box? I don't know the best way to do all this, so if you find an easier way I welcome suggestions,

     

    Thank you

  • Profile Image
    pinoytech
    Answered on July 25, 2013 at 03:49 PM

    Hi,

    Can you please take a look at this cloned form if this is something you want to achieve?

    http://www.jotformpro.com/form/32055848046961

    If yes, inject this custom css into your form.

    .form-sub-label[for*="1002_0"] {

    display: none !important;

    }

    .form-product-item {

    padding: 0;

    }

    .form-description {

    right: -70px !important;

    top: 82px !important;

    }

    Feel free to contact us again if you need further assistance.

    Thank you!

  • Profile Image
    CoverStarExperiences
    Answered on July 26, 2013 at 03:22 AM

    Yes, this is much better thank you. Also, is there a way to custom the 'hover text' option so that each check box can have hover text?

  • Profile Image
    Welvin
    Answered on July 26, 2013 at 03:57 AM

    Hi,

    In behalf of my colleague, you are welcome. Unfortunately, no. That is not possible. Hover text can be only be done per field, not per item on a field.

    Should you have any questions please let us know. If it's unrelated to your original question, please open a separate thread.

    Thanks