Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

How to make your widget to stretch to full screen

From Wiki
Jump to: navigation, search
Article Metadata
CompatibilityArticle
Created: isalento (13 Nov 2009)
Last edited: hamishwillee (01 Aug 2012)

How to make your widget to stretch to full screen

Initially body-element has some predefined margin and padding values. To make your widget to cover full screen you will need to reset those by setting margin:0 and padding:0 in CSS. If you don’t override default values and set body width:100% you will experience some horizontal movement.

body{
width:100%;
height: 100%;
background-color:#f3f3d1;
 
/*set this to get rid of the small horizontal movement*/
margin: 0;
padding: 0;
}

The next step is to make a wrapper div that contains all your content. You will have to use absolute positioning and place the div to start from the left upper corner by setting left:0; and top:0; in css:

/*absolute positioning is needed to cover full screen*/
#fsWrapper{
width: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
}

Example Widget

<!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>
<title>FS sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css">
<style>
body{
width:100%;
height: 100%;
background-color:#f3f3d1;
 
/*set this to get rid of the small horizontal movement*/
margin: 0;
padding: 0;
}
 
/*absolute positioning is needed to cover full screen*/
#fsWrapper{
width: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="fsWrapper">
<!-- your widget content -->
</div>
</body>
</html>
This page was last modified on 1 August 2012, at 04:40.
70 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×