Sub label of file upload field is not displaying aligned with custom CSS code

  • Profile Image
    Enlighted_INC
    Asked on June 18, 2020 at 05:25 PM

    I have added some CSS code which lines thing up pretty nice, but when I view the form, it is not correct.

    Please advise.

    1592515641Upload 1.png

    1592515663Upload 2.png

  • Profile Image
    Kiran
    Answered on June 18, 2020 at 08:29 PM

    The images provided in the post seems to be the same. As I check your Jotform in the build mode and preview mode, they are displayed different.

    Build

    159252624020200619_055250.png

    Preview

    159252626020200619_055305.png

    Also, there seems to be duplicate codes added for the upload field in the CSS section. Please check and let us know how the upload buttons to be displayed. Please be noted that there may be limitations with customizing the form within the builder.

    Thanks!

  • Profile Image
    Enlighted_INC
    Answered on June 18, 2020 at 08:40 PM

    My mistake

    here are the two images i am trying to show you.

    The issue is in the advanced designer


    The Correct image is what I see in the advanced designer. This is how i designed it.

    Then I go to see the final product, and it looks like the incorrect image.

    What is going on?

    As you can see, I want the Max files size text under the buttons, but it does not work.

    1592526874Upload 1.png



    1592527014Upload 2.png



  • Profile Image
    Kiran
    Answered on June 18, 2020 at 10:49 PM

    Please try changing the 'div' in the CSS code for the two sub labels to 'label' so that it should be displayed below the Upload button.

    159253494220200619_081733.png

    #cid_290 label.form-sub-label {

        font-size : 11px;

        width : 240px;

        margin-left : 316px !important;

        white-space : nowrap !important;

    }

    #cid_97 label.form-sub-label {

        font-size : 11px;

        width : 240px;

        margin-left : 316px !important;

        white-space : nowrap !important;

    }

    Hope this information helps! 


  • Profile Image
    Enlighted_INC
    Answered on June 18, 2020 at 11:22 PM

    thank you. that fixed it.