Custom css help lining up fields.

  • Profile Image
    davsun55
    Asked on June 27, 2019 at 12:28 AM

    I've already had some assistance, but would appreciate some more. Some things are better and a couple have regressed.

    1: I have decided to split the table into two, which I did by duplicating the field. I have added what I thought was the same CSS codes for positioning and field width, but they aren't working. So firstly, can the 'Whole camp' labels and fields be the same width as the 'Day visitor' table.

    2: The 'Whole camp' and 'Day visitors' labels are quite distant from their tables. Can they be moved closer together as in the example below?

    Current and desired examples below:

    1561609206People1.jpg  1561609242People2.jpg

    3: The amounts fields are lined up nicely in the designer, but on some screens the label widths are now variable, even more so that in the first panel below:

    Current and preferred:

    1561609417Amounts1.jpg  1561609429Amounts2.jpg

    4: The email input field is now being indented to the left a little on some screens

    5: I get what '@media only screen and (max-device-width: 768px)' are trying to do, and I've changed it to '1024px'. Is there some doco on what they actually do and all options?

    Thanks again,

    David

  • Profile Image
    ashwin_d
    Answered on June 27, 2019 at 04:34 AM

    Please inject the following custom css code in your form and see if that solves your problem:

    #cid_103 {

        margin-top: -40px !important;

    }

    #cid_82 {

        margin-top: -50px !important;

    }

    label#label_99, label#label_69, label#label_100, label#label_65, label#label_46, label#label_47, label#label_49 {

        width: 105px !important;

        padding-right: 10px !important;

    }

    The following guide should help you how to inject custom css code in form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    For  the issue related to email field, I would suggest you to please share a screenshot of the issue and we will take a look. The following guide should help you how to upload image in forum post: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

    For you question related to @media only css code, I would suggest you to please take a look at the following guide which should help you: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Hope this helps.

    Do get back to us if you have any questions.

  • Profile Image
    davsun55
    Answered on June 27, 2019 at 08:09 PM

    That's very good - thanks. Now all I need is for the 'Whole camp' table (the one with just one column), to have the same label and field widths as the 'Day visitors' table. What I need is shown in the images above.

    Thanks again,

    David

  • Profile Image
    roneet
    Answered on June 27, 2019 at 09:25 PM

    It seems that you have already fixed the issue. The label and the field's width of the WHole camp table appear exactly the same as the Day visitor table.

    15616850001.PNG


    let us know if you have further questions.

    Thanks.

  • Profile Image
    davsun55
    Answered on June 27, 2019 at 09:31 PM

    That's just on the graphic I dummied up. If you look at the form, it's still wrong. Tks.

  • Profile Image
    AndrewHag
    Answered on June 28, 2019 at 12:22 AM

    Please try the CSS code below:

     #cid_103 .form-matrix-table{

       width: 55% !important;

     }