Classic Dropdown Format Problem

  • Resolved lk001

    (@lk001)


    3 years, 5 months ago

    Hi, i unfortunately cannot really figure out what’s wrong with my dropdown inputs, when building a form. Following problem always appears:

    When something is selected, the “x” to cancel the choice is not displayed properly – it should be displayed in the vertical center of the dropdown input, but it’s always way too low, like there’s some extra margin on top of the x.

    When i inspect my page with chrome i can find the element and fix it by changing the value “top” to 25% instead of 50%, but when i copy the css into my page’s css it doesn’t work when reloading the page. Can anybody suggest the right css changes for this to be fixed?

    div.wpforms-container .wpforms-form .choices[data-type*=”select-one”] .choices__button {
    background-image: url(../images/cross-inverse.svg);
    padding: 0;
    background-size: 8px;
    position: absolute;
    top: 50%; // WORKS WHEN THIS VALUE IS CHANGED TO 25%
    right: 0;
    margin-top: -10px;
    margin-right: 25px;
    height: 20px;
    width: 20px;
    border-radius: 10em;
    opacity: .5;
    }

    Thank you and kind regards,
    Lukas

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @lk001,

    Thanks for reaching out!

    Typically issues such as this are caused by styling that has been added by your site’s theme, or by custom code. The best method to remedy this is to locate where the CSS is coming from that is setting the 50% top value, and adjusting it so that it is either more specific (so as to not affect your form fields), or to remove it.

    Otherwise, you could add some custom CSS to override this:

    div.wpforms-container .wpforms-form .choices[data-type*=”select-one”] .choices__button {
top: 25% !important;
}

    And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

    Please give these options a try. I hope it helps ??

    Kindly,

    Hi @lk001,

    We haven’t heard back from you in about a week, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

    Thanks!

    Thread Starter lk001

    (@lk001)

    Hi henry,

    Thank you very much,
    this solved my problem.

    Regards, Lukas

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Classic Dropdown Format Problem’ is closed to new replies.