How to make Label and Button control Responsive using CSS in ASP.Net

power
 
on Jun 26, 2017 01:22 AM
6706 Views

Hello there,

I was wondering if anyone would give me simple example about making asp controls responsive. I am using bootstrap in my asp master page. I created a webform called Default.aspx. Then I added asp label and asp button into the default page. when I run the app everything gets responsive but the label and the button haven't changed thier sizes (the two controls kept thier original size they had when the screen was big). What I want is how do I set up the size of my asp controls so that when the screen size/resolution changes, the controls automatically resize or scale down or up? Could you please give me a working example that has a asp:label and asp: button?  

Thank you.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 26, 2017 01:23 AM

Please share your html. Let me see how you are applying css.

Sulabh
 
on Jun 26, 2017 02:08 AM

HI Power , 

try following script to make responsive and add CssClass="form-control" in their ASP controls, which would you like to use ... example in button.

 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

 

 <asp:Button ID="Button1" runat="server" Font-Bold="true" ForeColor="White" CssClass="form-control" BackColor="#428bca" 
                                    Width="30px" Text="button" ></asp:Button>

 

dharmendr
 
on Jun 26, 2017 05:41 PM

Check you have not added&nbsp CssClass="form-control" for button and label.

power
 
on Jul 03, 2017 07:42 AM

I ended up adding the following css and it works for me. I am sharing this incase it helps others. Thank you.

@media all and (max-width: 768px) {
    .responsive-width {
        font-size: 1.75vw;
    }
}   

@media all and (max-width: 600px) {
    .responsive-width {
        font-size: 2vw;
    }
}   

@media all and (max-width: 480px) {
    .responsive-width {
        font-size: 2.25vw;
    }
}