Reputation: 394
I am developing a web application which has Chart Controls. I have developed a common chart User Control to use across the application.
I am looking for an elegent way to set the Chart control's along with other control's width, height based on the screen(browser size).
Please help me Thanks Shaik
Upvotes: 8
Views: 29970
Reputation: 61233
a hidden div set to 100% by 100% can be used to tell you the browser window client area size; i don't think there is a way to measure the screen without a postback/callback
see How to implement a web page that scales when the browser window is resized for additional info
Upvotes: 0
Reputation: 5787
A product from Cyscape called "Browserhawk" http://www.cyscape.com/showbrow.aspx will provide you with the information you need to make the correct rendering decisions on the server side.
Upvotes: 1
Reputation: 25137
Sounds like you want to resize a server-side dynamic image based on a client-side value. You would first need to load the page once, use Javascript to get the screen size. (Google for that. You can get the full cross browser technical list of which Javascript elements to use at Quirksmode.org, but you'll still need to figure out how to write the script yourself.) Then, post that size back to the server, set the control with this new size, then render it to the client as usual. Keep in mind, if the user resizes the browser window at all it won't "fit" anymore. And you can always use percentage sizes with CSS like Aaron mentioned, but then of course the browser will resize the image, which never looks that good.
Another alternative would be to put it in a Flash control. Those resize dynamically better usually, as long as the chart is rendered with vector elements by Flash.
Either way, you'll want to make sure that this makes sense for your web design. Some times its good to make it dynamic, other times a certain amount of static size makes sense--all depends on lots of stuff, including whether or not its worth it to go to all that trouble.
Upvotes: 3
Reputation: 8266
Generally speaking, the easiest way to size an element relative to the client screen is to give it a width specified as a percentage (e.g. 25%). You can also size an object relative to the font size by specifying the width in terms of ems (e.g. 10em).
If percentages won't work, then the alternative is to use JavaScript to resize the object dynamically in the client's browser. The downside to this is that JavaScript has to interact with the HTML elements that make up the control, rather than acting on the control directly.
Upvotes: 4