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
Contributor
shoaib_perception
Posts: 12
Registered: ‎03-28-2012
My Device: 9650

fixed header and scorlling issue

Hi,

We are currently working on Blackberry webworks for one news application.In our application we need fixed header, fixed footer and scrollable body content.The problem is, "css overflow" is not working. When i set div's overflow property to scroll or auto, it simply not working.Fixed header and footer too not working.There is a problem with "position:fixed;".

I want to simply know, is scrolling(overlflow:scroll) is possible with webworks and same thing for fixed header and footer.

We are working on blackberry os 6.0+ with trackpad and webworks version is 2.3.0.9

Any working code or example is really appreciated.

Thanks

Please use plain text.
Regular Contributor
BertKoor
Posts: 81
Registered: ‎03-09-2012
My Device: PlayBook & Bold 9780

Re: fixed header and scorlling issue

Please use plain text.
Contributor
shoaib_perception
Posts: 12
Registered: ‎03-28-2012
My Device: 9650

Re: fixed header and scorlling issue

Hi,

 

thanks for your quick reply.

 

But we have already checked kitchen fixed toolbars page and scorllable divs pages, with black device and simulator but none of it is working.

 

Is there any other solution?

 

Please reply as early as possible

 

Please use plain text.
Developer
SumiGhosh
Posts: 435
Registered: ‎09-20-2011
My Device: Z10 LE, Playbook, DevAlpha C, 9900, 9380

Re: fixed header and scorlling issue

Just make your html body fixed. Then create 3 divs one for header(set css to fixed), another for your data body(set css to scrollable), and last for you footer(set css to fixed). This is what i do.

Please use plain text.
Contributor
shoaib_perception
Posts: 12
Registered: ‎03-28-2012
My Device: 9650

Re: fixed header and scorlling issue

Hi,

 

Thanks for your reply but still not working with simulator as well as in BlackBerry device.

 

Here is my code, as per your suggestion.

 

<!DOCTYPE html>
<head>
<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0" />

</head>

<body style="position:fixed;margin:0;padding:0;">
    <div style="position:fixed;top:0;height:50px;width:480px;background:red;"><h3>Header Content</h3></div>
    
    <div style="height:260px;width:480px;overflow:scroll;overflow-x:hidden;">
    For the "inset" look only Let's get this party started For the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party started    
    </div>
    <div style="position:fixed;bottom:0;height:50px;width:480px;background:red;"><h3>Footer Content</h3></div>
</body>

</html>

 

Please post working example with code.

 

 

Please use plain text.
Developer
SumiGhosh
Posts: 435
Registered: ‎09-20-2011
My Device: Z10 LE, Playbook, DevAlpha C, 9900, 9380

Re: fixed header and scorlling issue

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="height=device-height,target-densitydpi=device-dpi,width=device-width,targetuser-scalable=no,initial-scale=1.0" />
<style>
body{
background-color:#fff;
margin:0;
padding:0;
margin-left:0px;
margin-right:0px;
width:100%;
height:97%;
position:fixed;
}

::-webkit-scrollbar {
width: 6px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 3px 3px rgba(0,0,0,0.1);
-webkit-border-radius: 4px;
border-radius: 4px;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 4px;
border-radius: 4px;
background: rgba(176,196,222,1);
-webkit-box-shadow:inset 0 0 3px 3px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.9);
}

 


.main{
margin-left:0;
margin-right:0;
width:100%;
height:100%;
}

.maincontainer{
margin-left:0;
margin-right:0;
margin-left:0;
margin-right:0;
position:absolute;
width:100%;
height:100%;
}

.heading{
margin-top:3%;
position:relative;
width:100%;
height:7%;
align:center;
}

.heading p{
text-align:center;
font-size:19pt;
}

.mainbody{
position:relative;
width:98%;
height:80%;
margin-left:5px;
margin-top:7px;
margin-right:5px;
overflow:auto
}

.footer{
position:relative;
width:100%;
height:8%;
padding-top:3%;
text-align:center;
}

</style>
</head>
<body>
<div id="main" class="main">
<div class="maincontainer">
<div class="heading"><p>This is my header</p></div>
<div class="mainbody"><p> For the "inset" look only Let's get this party started For the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party startedFor the "inset" look only Let's get this party started </p></div>
<div id="footer" class="footer">This is my footer</div>
</div>
</div>
</body>
</html>

Please use plain text.
Regular Contributor
BertKoor
Posts: 81
Registered: ‎03-09-2012
My Device: PlayBook & Bold 9780

Re: fixed header and scorlling issue

[ Edited ]

The Kitchen Sink example did work very well. I've stripped it down to the bare essentials, and the true secret is in the JavaScript function setOrientation() which is called by adding it to an event listener for load and orientationchange. It simply calculates and sets the height of header, content and footer.

 

Full code:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0" />
		<meta name="cursor-event-mode" content="native" />
		<meta name="touch-event-mode" content="pure-with-mouse-conversion" />
		<style type="text/css">
#header {		
	background-color: red;
	color: white;
	font-weight: bold;
	text-align: center;
}

#content {
	overflow: auto;
}

#footer {
	background-color: green;
	color: white;
	font-weight: bold;
	text-align: center;
}
		</style>
		<script TYPE="text/javascript">
function setOrientation()
{
    //TODO: Calculate the 'right' header and footer heights for the current orientation/perspective.
    //  use hardcoded values for now.
    var headerHeight = 50, footerHeight = 50;

    //set the height of the header:
    var header = document.getElementById("header");
    if (header)
    {
        header.style.height = headerHeight + "px";
    }       
    //set the height of the content panel
    var content = document.getElementById("content");
    if (content)
    {
        content.style.height = (window.innerHeight - headerHeight - footerHeight) + "px";
    }
    //set the height of the footer:
    var footer = document.getElementById("footer");
    if (footer)
    {
        footer.style.height = footerHeight + "px";
    }           
}

window.addEventListener("orientationchange", setOrientation, false);
window.addEventListener("load", setOrientation, false);
		</script>
</head>
<body>
	<div id="header">This header is supposed to be fixed</div>
	<div id="content">
		<h1>Fixed Toolbars</h1>
		<h2>Scrollable Content</h2>
		<p>This sample demonstrates how to produce the effect of a fixed
position header and footer toolbars without using CSS:fixed (which can
have poor performance).</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum dapibus ante ut sem aliquet ac pharetra lacus dignissim. Nam
ante erat, semper non luctus vel, interdum ac orci. Sed a aliquam nibh.
Pellentesque mauris tortor, interdum eget fringilla sed, tempor ac leo.
Mauris faucibus felis nec arcu pellentesque hendrerit. Praesent nec
dapibus quam. Nulla volutpat fermentum augue a hendrerit. Integer
volutpat libero et nulla pellentesque id lobortis diam eleifend.
Vestibulum hendrerit, justo quis hendrerit laoreet, libero risus blandit
ipsum, non semper ante neque et lectus. Aenean blandit tempor
condimentum.</p>
<p>Etiam at congue nulla. Maecenas nec sapien elit, quis molestie
diam. Nulla auctor pharetra scelerisque. Suspendisse vulputate tincidunt
eleifend. Pellentesque vel consequat turpis. Fusce sit amet augue risus.
Donec et justo urna, et egestas erat. Quisque euismod ipsum at lacus
pharetra quis semper mauris venenatis. Suspendisse consequat, massa sit
amet sodales cursus, elit ligula consequat quam, id faucibus lacus neque
at eros. Nulla vitae libero quis leo accumsan sodales. Duis in euismod
lacus.</p>
<p>Proin imperdiet tincidunt lectus quis facilisis. Donec dolor
elit, commodo et convallis quis, malesuada at urna. Aenean neque felis,
ultrices ac fermentum ut, egestas sit amet nisl. Cras ac tellus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra
facilisis aliquet. Donec congue lobortis venenatis. Nullam laoreet
egestas lectus ut fermentum. Fusce tincidunt porta quam. Proin at lorem
arcu, id iaculis lectus. Mauris suscipit felis et erat mattis iaculis.
Vivamus tempor consequat cursus. Sed nec massa metus. Cras vitae purus
non est dapibus ultrices non sed massa.</p>
<p>Donec ut orci tellus, ac porttitor diam. Proin euismod dui arcu.
Vivamus in tellus non odio suscipit tempor quis a mauris. Praesent
fermentum eros ut libero posuere in ultricies ipsum tempus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. In in purus erat. Mauris ac suscipit lacus. Cras id arcu
nisi. Cras arcu diam, blandit non pellentesque eu, tincidunt at libero.
Sed hendrerit congue nibh, at faucibus purus commodo sit amet. Etiam est
libero, pulvinar eget aliquam vel, blandit sit amet turpis. Morbi mi
massa, ultricies in viverra a, fermentum vel turpis. Quisque eget arcu
non velit tincidunt elementum. Donec nec vestibulum leo. Ut lacinia
faucibus tellus, in cursus magna blandit mollis.</p>

<p>Nullam a vestibulum sapien. Etiam porttitor, tellus in molestie
blandit, purus metus mattis lectus, sed dictum ligula justo eget arcu.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aenean volutpat iaculis lectus nec gravida.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Donec ultrices consectetur cursus. Etiam fringilla
dictum turpis sit amet dapibus. Morbi lorem ante, varius sit amet
facilisis eget, consectetur faucibus magna. Mauris ac leo quis elit
ullamcorper luctus vitae in magna. Mauris ut odio at magna mollis
posuere. Morbi lacinia eros id est imperdiet a tristique sapien
placerat. Quisque et nisl viverra dui volutpat lobortis id ut tellus.
Quisque in nibh a libero ullamcorper feugiat. In non odio velit. Morbi
dictum turpis quis risus scelerisque pulvinar a eget sapien. Ut at
ligula vitae nulla tristique dignissim. Suspendisse sagittis semper ante
imperdiet consectetur. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In ut velit mauris. Donec viverra rhoncus odio vel
luctus.</p>
		</div>
		<div id="footer">This footer is supposed to be fixed</div>
	</body>
</html>

 

Please use plain text.
Contributor
shoaib_perception
Posts: 12
Registered: ‎03-28-2012
My Device: 9650

Re: fixed header and scorlling issue

Hi,

 

Thanks for your reply.

 

I have tried sample code given by you, it displayed scroll bar but scrolling isn't working.I have checked with simulator and device but it is not working with both.

 

If you checked with simulator or device and it is working, then let me know.

 

Please use plain text.
Developer
SumiGhosh
Posts: 435
Registered: ‎09-20-2011
My Device: Z10 LE, Playbook, DevAlpha C, 9900, 9380

Re: fixed header and scorlling issue

Name your simulator or device. I checked on 9800 simulator................ 

 

Please use plain text.
Regular Contributor
BertKoor
Posts: 81
Registered: ‎03-09-2012
My Device: PlayBook & Bold 9780

Re: fixed header and scorlling issue

I checked both solutions on a 9800 simulator. Both work, but only using the mouse as finger to scroll. Using the arrow keys does nothing indeed. Maybe that's just an issue with the navigation mode specified in the config.xml I used:

 

<?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" rim:header="HelloWebWorks">
	<name>HelloWebKit!</name>
	<description>Hello WebKit!</description>
	<icon src="icon.png" />
	<content src="index.html" />
	<rim:navigation mode="focus" />
	<feature id="blackberry.ui.dialog" />
</widget>

 

Please use plain text.