Search and Top Navigation
#11606 open feature ()
Opened March 23, 2015 09:36PM UTC
Last modified March 25, 2016 04:39PM UTC
Selectmenu should have a default max height
| Reported by: | sandygettings | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | none |
| Component: | ui.selectmenu | Version: | 1.11.4 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If you have a simple <select> control with many items (say, 40 or so), the entire select list cannot fit within a small browser window. Conveniently, the browser will automatically display a portion of the list with a scroll bar.
A selectmenu widget with the same list does not display a scroll bar; the user must scroll the entire browser window instead. This is not consistent with the default behavior of the <select> control in browsers.
A workaround is shown in the widget’s documentation by explicitly setting the selectmenu’s menuWidget height (or better still, max-height). However, this is an extra step for the developer and does not automatically adapt to browser windows of different sizes.
Suggestion:
1. Display the selectmenu with a default max-height similar to the simple <select> control (about 20 items).
2. Or, display the selectmenu with a max-height that extends to the bottom of the browser window at the time the selectmenu is opened. This is especially convenient for users with larger monitors.
3. Or (preferably), display the selectmenu with a max-height that is the greater of the two options above. This guarantees that the selectmenu displays at least a minimum number of items in small windows and can still display more items when the user has a large window.
Note that I’ve implemented #3 above using the widget’s “open” event handler. I’m happy to share this code if anyone is interested.
This issue was tested with Chrome 41, Firefox 36, and IE 11.
[ large block of code removed ]
Attachments (0)
Change History (3)
Changed March 23, 2015 10:47PM UTC by comment:1
| component: | ui.core → ui.selectmenu |
|---|---|
| description: | If you have a simple <select> control with many items (say, 40 or so), the entire select list cannot fit within a small browser window. Conveniently, the browser will automatically display a portion of the list with a scroll bar. \ \ A selectmenu widget with the same list does not display a scroll bar; the user must scroll the entire browser window instead. This is not consistent with the default behavior of the <select> control in browsers. \ \ A workaround is shown in the widget’s documentation by explicitly setting the selectmenu’s menuWidget height (or better still, max-height). However, this is an extra step for the developer and does not automatically adapt to browser windows of different sizes. \ \ Suggestion: \ \ 1. Display the selectmenu with a default max-height similar to the simple <select> control (about 20 items). \ \ 2. Or, display the selectmenu with a max-height that extends to the bottom of the browser window at the time the selectmenu is opened. This is especially convenient for users with larger monitors. \ \ 3. Or (preferably), display the selectmenu with a max-height that is the greater of the two options above. This guarantees that the selectmenu displays at least a minimum number of items in small windows and can still display more items when the user has a large window. \ \ Note that I’ve implemented #3 above using the widget’s “open” event handler. I’m happy to share this code if anyone is interested. \ This issue was tested with Chrome 41, Firefox 36, and IE 11. \ \ \ {{{ \ <!DOCTYPE html> \ <html xmlns="http://www.w3.org/1999/xhtml"> \ <head> \ <title>Test SelectMenu</title> \ \ <link type="text/css" href="/testjquery/jquery-ui.css" rel="stylesheet" /> \ <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.js"></script> \ <script type="text/javascript" src="/testjquery/jquery-ui.js"></script> \ \ <style> \ td { \ border: 1px solid black; \ } \ \ /* Fixes the problem, but is not convenient: \ .overflow { \ overflow-y: auto; \ max-height: 200px; \ }*/ \ </style> \ \ <script> \ $(function () { \ $("#Select2").selectmenu().selectmenu("menuWidget").addClass("overflow"); \ }); \ </script> \ </head> \ <body> \ <div style="border: 1px solid blue;"> \ <table> \ <tr> \ <td> \ Standard Select Control<br /> \ <select id="Select1"> \ <option>Item 00</option> \ <option>Item 01</option> \ <option>Item 02</option> \ <option>Item 03</option> \ <option>Item 04</option> \ <option>Item 05</option> \ <option>Item 06</option> \ <option>Item 07</option> \ <option>Item 08</option> \ <option>Item 09</option> \ <option>Item 10</option> \ <option>Item 11</option> \ <option>Item 12</option> \ <option>Item 13</option> \ <option>Item 14</option> \ <option>Item 15</option> \ <option>Item 16</option> \ <option>Item 17</option> \ <option>Item 18</option> \ <option>Item 19</option> \ <option>Item 20</option> \ <option>Item 21</option> \ <option>Item 22</option> \ <option>Item 23</option> \ <option>Item 24</option> \ <option>Item 25</option> \ <option>Item 26</option> \ <option>Item 27</option> \ <option>Item 28</option> \ <option>Item 29</option> \ <option>Item 30</option> \ <option>Item 31</option> \ <option>Item 32</option> \ <option>Item 33</option> \ <option>Item 34</option> \ <option>Item 35</option> \ <option>Item 36</option> \ <option>Item 37</option> \ <option>Item 38</option> \ <option>Item 39</option> \ </select> \ </td> \ <td> \ Selectmenu Control<br /> \ <select id="Select2"> \ <option>Item 00</option> \ <option>Item 01</option> \ <option>Item 02</option> \ <option>Item 03</option> \ <option>Item 04</option> \ <option>Item 05</option> \ <option>Item 06</option> \ <option>Item 07</option> \ <option>Item 08</option> \ <option>Item 09</option> \ <option>Item 10</option> \ <option>Item 11</option> \ <option>Item 12</option> \ <option>Item 13</option> \ <option>Item 14</option> \ <option>Item 15</option> \ <option>Item 16</option> \ <option>Item 17</option> \ <option>Item 18</option> \ <option>Item 19</option> \ <option>Item 20</option> \ <option>Item 21</option> \ <option>Item 22</option> \ <option>Item 23</option> \ <option>Item 24</option> \ <option>Item 25</option> \ <option>Item 26</option> \ <option>Item 27</option> \ <option>Item 28</option> \ <option>Item 29</option> \ <option>Item 30</option> \ <option>Item 31</option> \ <option>Item 32</option> \ <option>Item 33</option> \ <option>Item 34</option> \ <option>Item 35</option> \ <option>Item 36</option> \ <option>Item 37</option> \ <option>Item 38</option> \ <option>Item 39</option> \ </select> \ </td> \ </tr> \ </table> \ <p>To demonstrate the issue, first shrink the browser window's height to, say, five cm (two inches).</p> \ </div> \ </body> \ </html> \ \ }}} \ → If you have a simple <select> control with many items (say, 40 or so), the entire select list cannot fit within a small browser window. Conveniently, the browser will automatically display a portion of the list with a scroll bar. \ \ A selectmenu widget with the same list does not display a scroll bar; the user must scroll the entire browser window instead. This is not consistent with the default behavior of the <select> control in browsers. \ \ A workaround is shown in the widget’s documentation by explicitly setting the selectmenu’s menuWidget height (or better still, max-height). However, this is an extra step for the developer and does not automatically adapt to browser windows of different sizes. \ \ Suggestion: \ \ 1. Display the selectmenu with a default max-height similar to the simple <select> control (about 20 items). \ \ 2. Or, display the selectmenu with a max-height that extends to the bottom of the browser window at the time the selectmenu is opened. This is especially convenient for users with larger monitors. \ \ 3. Or (preferably), display the selectmenu with a max-height that is the greater of the two options above. This guarantees that the selectmenu displays at least a minimum number of items in small windows and can still display more items when the user has a large window. \ \ Note that I’ve implemented #3 above using the widget’s “open” event handler. I’m happy to share this code if anyone is interested. \ This issue was tested with Chrome 41, Firefox 36, and IE 11. \ \ [ large block of code removed ] |
| summary: | Selectmenu with many items does not scroll like simple <select> control → Selectmenu should have a default max height |
Changed April 08, 2015 04:48PM UTC by comment:2
| status: | new → open |
|---|
Adding a default max height requires adding an icon to indicate when the menu is scrollable to address usability issues on devices like an iPhone where the scrollability isn't obvious. To address this, we'll add a class when the menu is scrollable and insert an arrow icon at the bottom.
Changed March 25, 2016 04:39PM UTC by comment:3
Please check the commit:
https://github.com/obaidnaqvi/jquery-ui/commit/a42c825f4231f22021accfd114b34241687ada35