Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Extra, blank option showing on dropdown on Forms


cinnamoncat

Question

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! 

Screen Shot 2021-05-21 at 9.17.21 AM.png

Screen Shot 2021-05-21 at 9.19.59 AM.png

Screen Shot 2021-05-21 at 9.20.08 AM.png

Link to comment

15 answers to this question

Recommended Posts

  • 1

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. 

dropdown.png

Link to comment
  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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!!!!!

Link to comment
  • 0
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?

Link to comment
  • 0
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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. 

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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!

Link to comment
  • 0
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!

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...