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
Regular Contributor
Posts: 60
Registered: ‎03-07-2011
My Device: Not Specified

Viewport dragging and div scrolling - PlayBook

With respect to all those who have already contributed to this discussion, we somehow need to get to the final word(s) on these two (seemingly related) topics.

 

In short, developers still post here, and elsewhere, looking for a solution to a webworks app being dragged around the screen.  Most posts talk about setting the viewport and ensuring there is not anything in the body or div which will go outside the screen width/height, as that will certainly allow the app to be "dragged".  Unfortunately, it still seems to be hit or miss on this topic, as some suggestions work in some cases, but not others.

 

As for the scrolling, this is another issue which has seen several posts over the last 12-18 months with a similar result to the "dragging app" issue.  That is to say, no definitive answer which works in all cases.

 

I know this is CSS and there are a seemingly infinite number of possibilities, but there should be something that works for very basic code, such as that which I will include below.  Note, this code scrolls the long list of test <li> elements really, really well.  But the app screen itself is still "draggable". 

 

Again, my suggestions are meant with great respect for those who have contributed.  I also have two other apps which I have been able to control the app dragging on, usually with help from the suggestions in these posts, but it always requires an inordinate amount of fiddling, and I am still unable to replicate the result in the simple code below.

 

I believe in BlackBerry and I believe in WebWorks.  Long live the PlayBook.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link type="text/css" href="listscrollonediv.css" />

<!--stop app from being dragged around the Playbook screen  -->
<meta name="viewport" id="viewport" content="width=1024, height=600, initial-scale=1.0,user-scalable=no, maximum-scale=1.0" />

</head>

<body>
<div id="mainpage">
<div id="listtester">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</body>
</html>

 CSS

@charset "utf-8";
/* CSS Document */

#mainpage
{
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0;
}

#listtester
{
	width:100%;
	height:auto;
}

 

Config.xml

 

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns=" http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="1.0.0.0">

  <name>Tester</name>

  <description>
    Tester
  </description>
  
  <rim:orientation mode="landscape"/>
  <rim:loadingScreen  onFirstLaunch="true" >
  </rim:loadingScreen>
  
  <author>****edited for Privacy****</author>



  <icon src="bdicon.png"/>

  <content src="index.html"/>
  <feature id="blackberry.app" required="true" version="1.0.0.0"/>
  <feature id="blackberry.ui.dialog" required="true" version="1.0.0.0"/>

</widget>

 

blackberry-tablet.xml

 

<?xml version="1.0" encoding="utf-8"?>

<qnx>
<icon>
 <image></image> 
</icon>
<author>***edited for privacy****</author>
<authorId>***edited for privacy****</authorId>
<platformVersion>1.0.0.0</platformVersion>

</qnx>

 

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Viewport dragging and div scrolling - PlayBook

Good post.

 

Thank you for sharing.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Highlighted
Regular Contributor
Posts: 60
Registered: ‎03-07-2011
My Device: Not Specified

Re: Viewport dragging and div scrolling - PlayBook

Thanks to you as well Adam.  Your responses, and those of the other team members, show how hard you all work for the developers and I appreciate it, as I'm sure many others do as well.