Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 5
Registered: ‎10-03-2012
My Device: Playbook
My Carrier: Rogers

PlayBook sluggish scrolling with overflow-x

I've recently developed a mobile web app (not WebWorks) with jQuery Mobile. I needed to create a table that, based on user settings, would have several columns and several rows. I wrapped the table in a div with with an overflow-x:scroll style and found the PlayBook to be sluggish while scrolling left and right. I tested the app on an iPhone and the performance was fine. Anybody have any thoughts on this?

Developer
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: PlayBook sluggish scrolling with overflow-x

 Post  both html5 and CSS3 code  so a solution can be rendered.

New Contributor
Posts: 5
Registered: ‎10-03-2012
My Device: Playbook
My Carrier: Rogers

Re: PlayBook sluggish scrolling with overflow-x

Here is some sample code to demonstrate the issue. The scrolling is not exactly terrible, but I would hope for some improvement.

 

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Overflow-X Example</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
		<style type="text/css">
			.scrollcontainer {
				display:block;
				width:100%;
				height:100%;
				overflow-x:scroll;
				border:solid 1px #c0c0c0;
			}
			table {
				width:100%;
				height:100%;
			}
			th, td {
				min-width:64px;
				border:solid 1px #c0c0c0;
			}
		</style>
		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script type="text/javascript">
			$(document).bind("mobileinit", function() {
				$("#main-page").live("pagecreate", function() {
					var table = "<table>";
					
					for (var r = 0; r < 50; r++) {
						table += "<tr>";
						for (var c = 0; c < 25; c++) {
							if (r == 0) {
								table += "<th class=\"ui-bar-b\">C" + c + "</th>";
							} else {
								table += "<td>" + c * r + "</td>";
							}
						}
						table +="</tr>";
					}
					
					table += "</table>";
					
					$(table).appendTo(".scrollcontainer");
				});
			});
		</script>
		<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	</head>
	<body>
		<div id="main-page" data-role="page">
			<div data-role="header">
				<h1>Scroll Container</h1>
			</div>
			<div data-role="content">
				<p>The table below is wrapped in a container with overflow-x:scroll style applied</p>
				<div class="scrollcontainer">
				</div>
			</div>
		</div>
	</body>
</html>

 I've posted this example at the following url: http://www.smalltowncoder.com/stc/samples/jqm/overflow/

Developer
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: PlayBook sluggish scrolling with overflow-x

have you built any apps with jqm css& javascripts local?

rather than calling from their server?

Developer
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: PlayBook sluggish scrolling with overflow-x

nice table - btw
Highlighted
New Contributor
Posts: 5
Registered: ‎10-03-2012
My Device: Playbook
My Carrier: Rogers

Re: PlayBook sluggish scrolling with overflow-x

Thank you!

 

Yes, I do include local copies of the jQM scripts and css in real projects. This is just a quick sample to demonstrate the issue.

 

I would be interested to know how other devices perform with this example.