Help Deleting Label Spacing for Dropdown

  • Profile Image
    brianatbad
    Asked on December 19, 2017 at 12:43 PM

    There's label spacing for my 'which week' dropdown that I want to delete...it only shows when I embed the source code on my website -- see screenshot and url below:

    https://www.breakadifference.org/locations/greater-new-york-city-ny/

    1513705368form4.JPG




    The JotForm hosted form does not show spacing, which is what I want -- see screenshot and url below:

    https://form.jotform.com/73475556751971

    1513704665form3.JPG



    -------------------------------------

    See all my CSS below:






    .form-label-left, .form-label-right, .form-label-top {

        display : none;

    }



    .form-label-top {

        display : none;

    }


    #cid_11 {

        text-align-last : center;

        text-align : center;

        -ms-text-align-last : center;

        -moz-text-align-last : center;

    }


    .form-textbox {

        color : 555 !important;

        font-size : 16px !important;

        font-family : 'Muli' !important;

        text-align : center;

        border-color : #ccc !important;

        -webkit-border-radius : 10px !important;

        -moz-border-radius : 10px !important;

        border-radius : 10px !important;

        border : 1px !important;

        box-shadow : 0px 1px 1px #888888 !important;

    }


    .form-line {

        padding-top : 0px;

        padding-bottom : 0;

        margin-top : 10px;

        margin-bottom : 0;

        

    }


    .form-required {

        visibility : hidden;

    }


    .form-dropdown {

        font-size : 16px !important;

        font-family : 'Muli'!important;

        width : 550px;

        color : 555 !important;

        background : #ffffff !important;

        border-color : #ccc !important;

        -webkit-border-radius : 10px !important;

        -moz-border-radius : 10px !important;

        border-radius : 10px !important;

        border : 1px !important;

        box-shadow : 0px 1px 1px #888888 !important;

    }



    select {

        text-align-last : center;

        text-align : center;

        -ms-text-align-last : center;

        -moz-text-align-last : center;

    }




    .form-submit-button {

        font-family : 'Muli' !important;

        background : #be1e2d !important;

        color : #fff;

        -webkit-border-radius : 5px;

        -moz-border-radius : 5px;

        border-radius : 5px;

        border : 0;

        height : 60px;

        font-size : 20px !important;

        text-shadow : 0 0px #000 !important;

        margin-top : 15px;

        border : 0;

    }

    #input_8 {

        font-family : 'Muli' !important;

        background : #fe8300 !important;

        color : #fff;

        -webkit-border-radius : 5px;

        -moz-border-radius : 5px;

        border-radius : 5px;

        border : 0;

        height : 60px;

        font-size : 20px !important;

        text-shadow : 0 0px #000 !important;

        margin-top : 15px;

        border : 0;

        

    }



    #input_12 {

        font-family : 'Muli' !important;

        background : #be1e2d !important;

        color : #fff;

        -webkit-border-radius : 5px;

        -moz-border-radius : 5px;

        border-radius : 5px;

        border : 0;

        height : 60px;

        font-size : 20px !important;

        text-shadow : 0 0px #000 !important;

        margin-top : 15px;

        border : 0;

        

    }


  • Profile Image
    John_Benson
    Answered on December 19, 2017 at 02:24 PM

    I checked the website URL (https://www.breakadifference.org/locations/greater-new-york-city-ny/) you provided and I didn't see the "Which week" dropdown. Here's a screenshot:

    1513711322533z2z.png

    Please provide the correct link so we can investigate it further. Thank you.


  • Profile Image
    brianatbad
    Answered on December 19, 2017 at 02:46 PM

    @john_benson -- yeah sorry, I've been messing around with the form since I posted the original question. 

    I moved the 'week' dropdown down to the bottom now... it shows the unwanted gap spacing.


    Thanks in advance for your help!

  • Profile Image
    brianatbad
    Answered on December 19, 2017 at 03:08 PM

    It seems setting the top margins and padding for that one drop down to -50px moved it to where I wanted...

    This fix makes it work the way I want it when I embed it on my website...but it shows up overlapping the previous question on the jotform hosted form. Seems there's some css on my website messing with the coding of my form even though I have '!important' on most of my forms' css coding.


    Here's my partial fix....


    #input_9 {

        color : 555;

        padding-top : -50px !important;

        padding-bottom : 0px !important;

        margin-top : -50px !important;

        margin-bottom : -20px !important;

    }

  • Profile Image
    Jed_C
    Answered on December 19, 2017 at 04:06 PM

    Thanks for the response.

    Just wanted to confirm if you are referring to the spacing between CHILDREN & YOUTH and First Name or the checkbox and the Group Volunteering button?

    By the way, the spacing you've first reported looks good from my end. Can you please send us a screenshot with markings so we can see what you are referring at.

    1513717518spacing.png

    Looking forward for your response.

  • Profile Image
    brianatbad
    Answered on December 20, 2017 at 09:51 AM

    @Jed_C thanks so much for your response. I fixed my original problem with the spacing between 'Mobile#' and 'Select Week' by adding negative spacing at the top of the 'Select Week' CSS.

    Thanks again for your response!

    1513781493fixed.JPG