Help Deleting Label Spacing for Dropdown

  • 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 Screenshot 10




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

    https://form.jotform.com/73475556751971

    1513704665form3 Screenshot 21



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

    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;

        

    }


  • John_Benson
    Replied on December 19, 2017 at 2: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 Screenshot 10

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


  • brianatbad
    Replied on December 19, 2017 at 2: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!

  • brianatbad
    Replied on December 19, 2017 at 3: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;

    }

  • Jed_C
    Replied on December 19, 2017 at 4: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 Screenshot 10

    Looking forward for your response.

  • brianatbad
    Replied on December 20, 2017 at 9: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 Screenshot 10