Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 474
  • Last Modified:

Calculate height/width for a control

Hi,

I have a control on my aspx page, it has a Height and Width property that I want to set on Page_Load. The height and width should correspond to the browser windows size (depending on users resolution) and therefore the control should fill the entire browser window (without the scroll bars appearing when the browser is maximised). How can I calculate the height and width for this control? There should be no whitespace on the page, just the whole control filling the page.

Thank you very much for any help.
0
Programmer_to_be
Asked:
Programmer_to_be
  • 2
1 Solution
 
Göran AnderssonCommented:
The server doesn't know the size of the browser window. If you want that information available to the server, you have to use a Javascript in a page that sends that information back to the server in a request, so that you can use it when you create the next page. Also, this only gives information about the size at the moment when the request is sent, the user can resize the window at any time.

I suggest that you use css to specify the size of the control, so that it will resize automatically according to the window size. Something like:

html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; padding: 0; }
.TheControl { width: 100%; height: 100%; }

The width and height on the html and body tag is needed to make them fill the browser window. The overflow makes sure that there are no scroll bars.

Specifying margin and padding makes sure that there is no space between the control and the window edges.

You use the TheControl class on your control by specifying it as class name. For an html control you use class="TheControl", for a web control you use CssClass="TheControl".

Specifying the size of the control that way makes it the size of it's parent control. If you have a form around the control you may also need:

form { margin: 0; width: 100%; height: 100%; }
0
 
Programmer_to_beAuthor Commented:
A very well explained solution.
0
 
Programmer_to_beAuthor Commented:
Thank you GreenGhost for taking the time out to explain the solution. It worked a charm!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now