18 | | |
19 | | {{{ |
20 | | <!DOCTYPE html> |
21 | | <html xmlns="http://www.w3.org/1999/xhtml"> |
22 | | <head> |
23 | | <title>Test SelectMenu</title> |
24 | | |
25 | | <link type="text/css" href="/testjquery/jquery-ui.css" rel="stylesheet" /> |
26 | | <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.js"></script> |
27 | | <script type="text/javascript" src="/testjquery/jquery-ui.js"></script> |
28 | | |
29 | | <style> |
30 | | td { |
31 | | border: 1px solid black; |
32 | | } |
33 | | |
34 | | /* Fixes the problem, but is not convenient: |
35 | | .overflow { |
36 | | overflow-y: auto; |
37 | | max-height: 200px; |
38 | | }*/ |
39 | | </style> |
40 | | |
41 | | <script> |
42 | | $(function () { |
43 | | $("#Select2").selectmenu().selectmenu("menuWidget").addClass("overflow"); |
44 | | }); |
45 | | </script> |
46 | | </head> |
47 | | <body> |
48 | | <div style="border: 1px solid blue;"> |
49 | | <table> |
50 | | <tr> |
51 | | <td> |
52 | | Standard Select Control<br /> |
53 | | <select id="Select1"> |
54 | | <option>Item 00</option> |
55 | | <option>Item 01</option> |
56 | | <option>Item 02</option> |
57 | | <option>Item 03</option> |
58 | | <option>Item 04</option> |
59 | | <option>Item 05</option> |
60 | | <option>Item 06</option> |
61 | | <option>Item 07</option> |
62 | | <option>Item 08</option> |
63 | | <option>Item 09</option> |
64 | | <option>Item 10</option> |
65 | | <option>Item 11</option> |
66 | | <option>Item 12</option> |
67 | | <option>Item 13</option> |
68 | | <option>Item 14</option> |
69 | | <option>Item 15</option> |
70 | | <option>Item 16</option> |
71 | | <option>Item 17</option> |
72 | | <option>Item 18</option> |
73 | | <option>Item 19</option> |
74 | | <option>Item 20</option> |
75 | | <option>Item 21</option> |
76 | | <option>Item 22</option> |
77 | | <option>Item 23</option> |
78 | | <option>Item 24</option> |
79 | | <option>Item 25</option> |
80 | | <option>Item 26</option> |
81 | | <option>Item 27</option> |
82 | | <option>Item 28</option> |
83 | | <option>Item 29</option> |
84 | | <option>Item 30</option> |
85 | | <option>Item 31</option> |
86 | | <option>Item 32</option> |
87 | | <option>Item 33</option> |
88 | | <option>Item 34</option> |
89 | | <option>Item 35</option> |
90 | | <option>Item 36</option> |
91 | | <option>Item 37</option> |
92 | | <option>Item 38</option> |
93 | | <option>Item 39</option> |
94 | | </select> |
95 | | </td> |
96 | | <td> |
97 | | Selectmenu Control<br /> |
98 | | <select id="Select2"> |
99 | | <option>Item 00</option> |
100 | | <option>Item 01</option> |
101 | | <option>Item 02</option> |
102 | | <option>Item 03</option> |
103 | | <option>Item 04</option> |
104 | | <option>Item 05</option> |
105 | | <option>Item 06</option> |
106 | | <option>Item 07</option> |
107 | | <option>Item 08</option> |
108 | | <option>Item 09</option> |
109 | | <option>Item 10</option> |
110 | | <option>Item 11</option> |
111 | | <option>Item 12</option> |
112 | | <option>Item 13</option> |
113 | | <option>Item 14</option> |
114 | | <option>Item 15</option> |
115 | | <option>Item 16</option> |
116 | | <option>Item 17</option> |
117 | | <option>Item 18</option> |
118 | | <option>Item 19</option> |
119 | | <option>Item 20</option> |
120 | | <option>Item 21</option> |
121 | | <option>Item 22</option> |
122 | | <option>Item 23</option> |
123 | | <option>Item 24</option> |
124 | | <option>Item 25</option> |
125 | | <option>Item 26</option> |
126 | | <option>Item 27</option> |
127 | | <option>Item 28</option> |
128 | | <option>Item 29</option> |
129 | | <option>Item 30</option> |
130 | | <option>Item 31</option> |
131 | | <option>Item 32</option> |
132 | | <option>Item 33</option> |
133 | | <option>Item 34</option> |
134 | | <option>Item 35</option> |
135 | | <option>Item 36</option> |
136 | | <option>Item 37</option> |
137 | | <option>Item 38</option> |
138 | | <option>Item 39</option> |
139 | | </select> |
140 | | </td> |
141 | | </tr> |
142 | | </table> |
143 | | <p>To demonstrate the issue, first shrink the browser window's height to, say, five cm (two inches).</p> |
144 | | </div> |
145 | | </body> |
146 | | </html> |
147 | | |
148 | | }}} |
| 18 | [ large block of code removed ] |