Extra, blank option showing on dropdown on Forms

Hello,

I have options presented in my dropdown menu, but Squarespace is adding an additional, blank option/line item that cannot be selected (that part is good, at least). However, IMO, it looks unprofessional, and is therefore driving me crazy lol.

Does anyone know how to fix this with any type of coding? Seems like a bug to me but not sure if a genius has a solution? Any help is greatly appreciated. 

TIA! 

Can you share link to page in screenshot?

I am having the same issue. The page in question for us is https://www.oakdalefusion.com/camper-registration

Specifically in the Camper Information form, the fields for 'Grade Completed' and 'T-shirt Size' are both dropdowns that are leaving an extra option. 

Inspecting the element doesn't show an extra option, but it does have an 'optgroup' at the bottom with a blank label. 

The optgroup hack is to attempt to fix an issue on iOS (iPhone/Safari) and select menus getting cut off (extending beyond the right of the screen). Add the following to Design > Custom CSS.

form .select optgroup {

  display : none;
  
  }

This is all a bit of a hack so do check on iOS if you can to make sure all is well with your select menus.

Let us know how it goes.

On 5/29/2021 at 12:22 AM, creedon said:

The optgroup hack is to attempt to fix an issue on iOS (iPhone/Safari) and select menus getting cut off (extending beyond the right of the screen). Add the following to Design > Custom CSS.

form .select optgroup {

  display : none;
  
  }

This is all a bit of a hack so do check on iOS if you can to make sure all is well with your select menus.

Let us know how it goes.

This worked for desktop and iOS! Thank you!!!!!

On 5/29/2021 at 12:22 AM, creedon said:

The optgroup hack is to attempt to fix an issue on iOS (iPhone/Safari) and select menus getting cut off (extending beyond the right of the screen). Add the following to Design > Custom CSS.

form .select optgroup {

  display : none;
  
  }

This is all a bit of a hack so do check on iOS if you can to make sure all is well with your select menus.

Let us know how it goes.

hey @creedon, this solution is no longer working. I have not made any code changes since this. Any advice?

Quote

this solution is no longer working. I have not made any code changes since this. Any advice?

When you say it's not working do you mean my code is no longer hiding the extra option at the end of the menu? I tested my code on my test site and it is still hiding the blank menu item.

23 hours ago, creedon said:

When you say it's not working do you mean my code is no longer hiding the extra option at the end of the menu? I tested my code on my test site and it is still hiding the blank menu item.

That is correct @creedon, it is no longer hiding the extra option at the end of the menu. I removed all other code in Custom CSS except for your code, and the blank extra option persisted. 

Quote

blank extra option persisted

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@creedon https://www.chloemanson.com/pm-inquiry

password is: cinnamon

you can see it in the "type of booking" dropdown option

thank you!

@cinnamoncat

It appears to be working for me.

I viewed on Chrome/macOS and Safari/iOS.

What browsing environment are you using?

@creedon Im on Safari Version 14.0.1 (16610.2.11.51.8) on MacOS BigSur 11.0.1 and still see the issue:

I tried it on Opera 82.0.4227.33 and it worked as expected:

Any suggestions?

7 hours ago, cinnamoncat said:

Any suggestions?

Not at this time but I can confirm what you're seeing on Safari/macOS. It appears some versions of Safari is outright ignoring the display none! 😞

11 hours ago, creedon said:

Not at this time but I can confirm what you're seeing on Safari/macOS. It appears some versions of Safari is outright ignoring the display none! 😞

I'm glad I'm not going crazy at least! I'm not sure how to proceed from here. Can you or your team look into this further, or is there a different team I should contact? TIA!

8 hours ago, cinnamoncat said:

Can you or your team look into this further, or is there a different team I should contact? TIA!

I don't work for Squarespace. I'm a member of this forum like yourself. Squarespace doesn't officially monitor this forum for support issues. If you want to contact customer support use Contact Customer Support.

I'm dubious as to a solution for this issue. The whole having an empty item at the end of the menu is a hack that has to be used to get around a rendering bug in Safari on iOS. If the hack is not there menus are cut off on the right side of the screen. In addition Safari doesn't allow the use of display none (which hides things) in select menus therefor cutting off the only avenue of being able to hide it. Given these parameters I not hopeful for a solution at this time.

You can thank Apple for this lovely little issue we have to live with! 😞

Please if anyone does have a solution let us know!

@creedon ah okay, thank you so so much for your help and info!!