Skip to content

jQuery plug-in to convert a multi-line <select> into a list usable on Safari mobile

License

Notifications You must be signed in to change notification settings

LeeGDavis/safarimobile-multiline-select

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#Problem Safari for mobile ignores the 'size' attribute of <select> elements. It always renders a one-line high drop down list instead of a multiline list box.

#Solution If the browser is not Safari for mobile, this plugin hides the <select> and replaces it by something that looks and acts like a list.

#Usage

##Code:

$().ready(function () {
	$("select").fixForSafariMobile();
})

Style for height and width

The plugin is not able to set a good value for the height and width of the list it creates (send a pull request if you fix this). For now, you must define styles to set a correct height and width. The plugin generates an 'id' for the replacement list based on the original select's id by appending '_safarimobile' to the name. You should defne styles like this:

#select1_safarimobile { height: 200px;  width:200px; } 
#select2_safarimobile { height: 100px;  width:150px; } 

#Details

  • The original <select> is not removed from the DOM so existing code can still change or access its value. The plugin keeps its valiu in sync with the replacement list's current value.
  • The plugin is uses hardcoded styles that are injected in the DOM. I did that to ship the plugin as a single file. You can change the source code or just add styles to your stylesheet to override the plugin's default styles.
  • It only works for single selection (send a pull request if you need multiple selection support).

About

jQuery plug-in to convert a multi-line <select> into a list usable on Safari mobile

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published