blob: a91d42dacee9c18214f34d0c9408866c215202de (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Thanks to Rob Lifford ( http://www.lifford.org/ ) for the test case -->
<meta charset="utf-8">
<title>jScrollPane 2 reinit bug?</title>
<style type="text/css">
body, html {
margin: 0;
padding: 20px;
font-family: Verdana, sans-serif;
font-size: 85%;
line-height: 1.5;
}
.float {
float: left;
}
.clear {
clear: both;
}
.scroll-container {
width: 400px;
height: 200px;
overflow: auto;
margin: 0 2em 1.5em 0;
}
.fluid-width {
width: 100%;
}
.padded {
padding: 5px;
}
ul {
margin: 0;
padding: 0;
line-height: 1;
list-style: none;
border-bottom: solid 1px #ccc;
}
li {
margin: 0;
padding: 10px 5px;
border-top: solid 1px #ccc;
}
</style>
<link rel="stylesheet" type="text/css" href="../../style/jquery.jscrollpane.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../../script/jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(function()
{
var element = $('.scroll-container').jScrollPane();
var api = element.data('jsp');
$('#jsp').click(function() {
elem = $('.scroll-container').jScrollPane();
});
$('#api').click(function() {
api.reinitialise();
});
});
</script>
</head>
<body>
<div class="scroll-container float">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<div class="scroll-container float">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
</ul>
</div>
<div class="scroll-container padded clear">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<div class="scroll-container fluid-width clear">
<ul>
<li><strong>scrollable list box</strong></li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
<li>the next list item</li>
<li>list item</li>
<li>another list item</li>
<li>the next list item</li>
</ul>
</div>
<p class="clear"><button id="api">reinit via API</button> <button id="jsp">Reinit by re-calling .jScrollPane</button> </p>
<p>In the above testcase: reinitialising jScrollPane (either via the api or simply by re-calling .jScrollPane() on the original element) strips out the width of the div.jspPane and causes a rendering issue: the absolutely-positioned div renders only as wide as its text content. The expected behavior is that it'll fill the available width, as it does on page load after the first call to .jScrollPane().</p>
<p><strong>UPDATE:</strong> this is fixed for scrollable content in v2b2, but when the content is not scrollable there's still undesired rendering on first load.</p>
<p>Additionally, padding calculations might need some tweaks. The third list box here is identical to the first two except for an added 5px of padding all the way around: note how the jspVerticalBar is partially pushed out of view.</p>
</body>
</html>
|
