Dropdown arrows in wrong position – please help

• 

  ecobwoy · Member · Jan 12, 2025 at 4:42 pm

  • Copy link
  • Add topic to favorites

  Hi guys,

  My contact forms seem to all have an issue with the drop down arrows being below the box on the the left, when they should be inside the box on the right.

  Below is a link to one of my forms so you can see what i mean. 

  https://ecorubbishclearance.co.uk/sofa_disposal_london/sofa_removal_disposal_get_a_quote/
  
  Please help. 

  The blog I need help with is: ecorubbishclearance.co.uk

  The blog I need help with is: (visible only to logged in users)

• 

  collinskiprono · Member · Jan 14, 2025 at 10:29 am

  • Copy link

  Hi,

  My contact forms seem to all have an issue with the drop down arrows being below the box on the the left, when they should be inside the box on the right.

  The issue seems to be the calculations for the top and inset-inline-end properties. Here’s some CSS code to ensure these values are always set:

  /** Contact form select field **/
  .contact-form .contact-form__select-wrapper:after {
  top: 50%;
  right: 10px;
  }

  Here’s the expected result: https://share.zight.com/4guLOq65

  To add your CSS, go to Appearance > Customize > Additional CSS.

  You can get more details here: https://wordpress.com/support/editing-css/

• 

  ecobwoy · Member · Jan 19, 2025 at 7:20 pm

  • Copy link

  Hi Collinskiprono,

  i have added that CSS but unfortunately it seems to be the same. Nothing has changed.
  

  This is what my additional CSS style sheet looks like:

  /*
  Welcome to Custom CSS!

  To learn how this works, see http://wp.me/PEmnE-Bt
  */ actionbar {

  display: none;

  }

  article a {
  color: #33bbe3;
  text-decoration: none;
  }

  article a:focus,
  article a:hover {
  color: #0e853b;
  }
  .entry-title {
  display: none;
  }
  .wp-video { margin:0 auto; }

  .site-branding:after {
  content: “We’ll leave behind, peace of mind”;
  color: #ddddd;
  font-weight: bold;
  }
  hr{
  height: 1px;
  color: #dddddd;
  background-color: #dddddd;
  border: none;
  }
  .contact-form .contact-form-dropdown__menu ul.ui-menu {
  background-color: white;
  }

  .contact-form .contact-form__select-wrapper:after {
  top: 50%;
  right: 10px;
  }

• 

  collinskiprono · Member · Jan 20, 2025 at 6:46 pm

  • Copy link

  Hi @ecobwoy

  Thanks for sharing the full CSS code. It seems the code we used is being overwritten. To prevent this, you’ll need to add !important after the value in the declaration.

  Here’s the updated CSS code:

  .contact-form .contact-form__select-wrapper:after {
  top: 50% !important;
  right: 10px !important;
  }

• 

  ecobwoy · Member · Jan 25, 2025 at 1:44 pm

  • Copy link

  Thank you. You’re a genius. All good now!
  Much appreciated.