Monday, 30 May 2011

Setting size of control using Css

Problem:
When you have control placed in an web form where you want to modify its size based on the width and height of your browser. Normally when you place the control on form(like image)it does not occupy the entire width and height of the content area in which you place the control. But what if you want the control to stretch itself and occupy the entire content area at run time.
Impact:
You could solve it by randomly fixing the width and height of control using the fixed value but its not the efficient way of doing and what if you need that for more controls on the form.
Solution:
There has to be generalized way to do it. So I found doing it using CSS.
Firstly, Create a Css Class(here I named it as stylefill)

<style type="text/css">
        .stylefill
        {
            width:auto;
            min-width:100%;
            height:auto;
            min-height:100%;
        }
</style>

Then apply this style to the controls as needed. Below I am apply this style to an image.So my image will occupy entire content area in which image is placed.

<asp:Image ID="Image2" runat="server"  CssClass="stylefill"
                      ImageUrl="~/Images/TopImage.JPG"/>

No comments:

Post a Comment