Deepan Murugan
Reputation: 771
Bootstrap Asp.net web form page is not responsive when the screen resolution size reduces
I'm trying to create an responsive asp.net web page using the bootstrap frame. while reducing the the screen size my design is not looking as it is in the higher screen resolution.
code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreateResume.aspx.cs" Inherits="Login_Page.SucessPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Resume Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.2.1.js"></script>
<script src="Scripts/jquery-2.2.1.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<style type="text/css">
.titleAlignment {
text-align:center;
}
.subTitleAlignment {
margin-left:160px !important;
}
.RegDetailsPortion {
width:50%;
float:left;
}
.GraduationDetailsPortion {
width:50%;
float:left;
}
#GraduationDetailsImg {
margin-left:100px;
margin-top:100px;
width:300px;
height:300px;
}
.disableHyperLinkDecoration {
text-decoration:none !important;
}
.disableHyperLinkDecoration:hover {
color: #33CC33;
}
.panel-title {
text-align:center;
}
#btnCreateResume {
margin-left:525px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server" class="form-horizontal" >
<div class="container">
<h3 class="titleAlignment">RESUME CREATION</h3>
<div class="panel-group" id="accordion">
<!-- Graduation Region Start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="disableHyperLinkDecoration" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">GRADUATION:</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-lg-6 col-m-6" >
<div class="RegDetailsPortion">
<div class="form-group">
<asp:Label ID="lblDegree" runat="server" CssClass="control-label col-sm-4" Text="Degree:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtDegree" runat="server" class="form-control" TextMode="MultiLine" Columns="20" Rows="3" placeholder="Degree" MaxLength="100" ValidationGroup="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRCDegree" runat="server" ControlToValidate="txtDegree" ErrorMessage="Please enter the Degree" ForeColor="red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regEXRCDegree" runat="server" ControlToValidate="txtDegree"
ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" />
</div>
</div>
<div class="form-group">
<asp:Label ID="lblUnivNAme" runat="server" CssClass="control-label col-sm-4" Text="Name of Univ/College:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtUnivName" runat="server" class="form-control" TextMode="MultiLine" Columns="20" Rows="3" placeholder="University/College Name" ResumeCreation="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRCUniversityName" runat="server" ControlToValidate="txtUnivName" ErrorMessage="Please enter the University/College Name" ForeColor="red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regEXRCUniversity" runat="server" ControlToValidate="txtUnivName"
ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" />
</div>
</div>
<div class="form-group">
<asp:Label ID="lblCity" runat="server" CssClass="control-label col-sm-4" Text="City/Town:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtCity" runat="server" class="form-control" placeholder="city" MaxLength="100" ValidationGroup="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUnivName" ErrorMessage="Please enter the University/College Name" ForeColor="red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtUnivName"
ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" />
</div>
</div>
<div class="form-group">
<asp:Label ID="lblYearOfPassing" runat="server" CssClass="control-label col-sm-4" Text="Year of Passing:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:DropDownList ID="drpListYearOfPassing" runat="server" Width="360px" Height="30px">
<asp:ListItem Text="Select Year" Value="0"></asp:ListItem>
<asp:ListItem Text="2016" Value="1"></asp:ListItem>
<asp:ListItem Text="2015" Value="2"></asp:ListItem>
<asp:ListItem Text="2014" Value="3"></asp:ListItem>
<asp:ListItem Text="2013" Value="4"></asp:ListItem>
<asp:ListItem Text="2012" Value="5"></asp:ListItem>
<asp:ListItem Text="2011" Value="6"></asp:ListItem>
<asp:ListItem Text="2010" Value="7"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvRCYearOfPassing" runat="server" ErrorMessage="Please Select the Year" ControlToValidate="drpListYearOfPassing" ForeColor="Red" InitialValue="0"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group">
<asp:Label ID="lblGraduationStatus" runat="server" CssClass="control-label col-sm-4" Text="Graduation Status:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:DropDownList ID="drpListGraduationStatus" runat="server" Width="360px" Height="30px">
<asp:ListItem Text="Select Status" Value="0"></asp:ListItem>
<asp:ListItem Text="Completed" Value="1"></asp:ListItem>
<asp:ListItem Text="Pursuing" Value="2"></asp:ListItem>
<asp:ListItem Text="Withdrawn" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvRCGraduationStatus" runat="server" ErrorMessage="Please Select the Status" ControlToValidate="drpListGraduationStatus" ForeColor="Red" InitialValue="0"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group">
<asp:Label ID="lblMarksObtained" runat="server" CssClass="control-label col-sm-4" Text="Marks/Grade Optained:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtMarksObtained" runat="server" class="form-control" placeholder="Marks/Grade" MaxLength="4" ValidationGroup="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRCMarks" runat="server" ControlToValidate="txtMarksObtained" ErrorMessage="Please enter the Marks/Grade" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExRCMarks" runat="server" ControlToValidate="txtMarksObtained" ValidationExpression="^[a-zA-Z0-9]+$" ErrorMessage="please enter Marks or Grade only" ForeColor="Red"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<asp:Label ID="lblPerMarks" runat="server" CssClass="control-label col-sm-4" Text="%age Marks:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtPerMarks" runat="server" class="form-control" placeholder="% of Marks" MaxLength="3" ValidationGroup="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRCPercentage" runat="server" ControlToValidate="txtPerMarks" ErrorMessage="Please enter the Marks Percentage" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regEXRCPercentage" runat="server" ControlToValidate="txtPerMarks" ValidationExpression="(100)|(0*\d{1,2})" ErrorMessage="Please enter the numbers only" ForeColor="Red"></asp:RegularExpressionValidator>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-m-6">
<div class="GraduationDetailsImgPortion">
<img src="Images/Graduation.gif" alt="Graduation" id="GraduationDetailsImg" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-group">
<asp:Button ID="btnCreateResume" runat="server" Text="Create" CssClass="btn-primary btn-md" OnClick="btnCreateResume_Click" />
<asp:Button ID="btnCancelResume" runat="server" Text="Cancel" CssClass="btn-primary btn-md" OnClick="btnCancelResume_Click1" CausesValidation="false" />
</div>
</div>
</form>
</body>
</html>
My web is looking as expected in the higher screen resolution
but its design is miss aligned in lower screen resolution
How to convert my web page to responsive web page.Could anyone help me to understand the concept of creating the responsive webpage.
Upvotes: 2
Views: 3129
Answers (2)
Ziv Rozenberg
Reputation: 51
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Resume Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.titleAlignment {
text-align:center;
}
.subTitleAlignment {
margin-left:160px !important;
}
.RegDetailsPortion {
width:50%;
float:left;
}
.GraduationDetailsPortion {
width:50%;
float:left;
}
#GraduationDetailsImg {
margin-left:100px;
margin-top:100px;
width:300px;
height:300px;
}
.disableHyperLinkDecoration {
text-decoration:none !important;
}
.disableHyperLinkDecoration:hover {
color: #33CC33;
}
.panel-title {
text-align:center;
}
#btnCreateResume {
margin-left:525px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server" class="form-horizontal" >
<div class="container">
<h3 class="titleAlignment">RESUME CREATION</h3>
<div class="panel-group" id="accordion">
<!-- Graduation Region Start -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="disableHyperLinkDecoration" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">GRADUATION:</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-lg-6 col-m-6" >
<div class="RegDetailsPortion">
<div class="form-group">
<asp:Label ID="lblDegree" runat="server" CssClass="control-label col-sm-4" Text="Degree:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtDegree" runat="server" class="form-control" TextMode="MultiLine" Columns="20" Rows="3" placeholder="Degree" MaxLength="100" ValidationGroup="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRCDegree" runat="server" ControlToValidate="txtDegree" ErrorMessage="Please enter the Degree" ForeColor="red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regEXRCDegree" runat="server" ControlToValidate="txtDegree"
ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" />
</div>
</div>
<div class="form-group">
<asp:Label ID="lblUnivNAme" runat="server" CssClass="control-label col-sm-4" Text="Name of Univ/College:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtUnivName" runat="server" class="form-control" TextMode="MultiLine" Columns="20" Rows="3" placeholder="University/College Name" ResumeCreation="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRCUniversityName" runat="server" ControlToValidate="txtUnivName" ErrorMessage="Please enter the University/College Name" ForeColor="red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regEXRCUniversity" runat="server" ControlToValidate="txtUnivName"
ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" />
</div>
</div>
<div class="form-group">
<asp:Label ID="lblCity" runat="server" CssClass="control-label col-sm-4" Text="City/Town:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtCity" runat="server" class="form-control" placeholder="city" MaxLength="100" ValidationGroup="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUnivName" ErrorMessage="Please enter the University/College Name" ForeColor="red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtUnivName"
ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" />
</div>
</div>
<div class="form-group">
<asp:Label ID="lblYearOfPassing" runat="server" CssClass="control-label col-sm-4" Text="Year of Passing:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:DropDownList ID="drpListYearOfPassing" runat="server" Width="360px" Height="30px">
<asp:ListItem Text="Select Year" Value="0"></asp:ListItem>
<asp:ListItem Text="2016" Value="1"></asp:ListItem>
<asp:ListItem Text="2015" Value="2"></asp:ListItem>
<asp:ListItem Text="2014" Value="3"></asp:ListItem>
<asp:ListItem Text="2013" Value="4"></asp:ListItem>
<asp:ListItem Text="2012" Value="5"></asp:ListItem>
<asp:ListItem Text="2011" Value="6"></asp:ListItem>
<asp:ListItem Text="2010" Value="7"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvRCYearOfPassing" runat="server" ErrorMessage="Please Select the Year" ControlToValidate="drpListYearOfPassing" ForeColor="Red" InitialValue="0"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group">
<asp:Label ID="lblGraduationStatus" runat="server" CssClass="control-label col-sm-4" Text="Graduation Status:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:DropDownList ID="drpListGraduationStatus" runat="server" Width="360px" Height="30px">
<asp:ListItem Text="Select Status" Value="0"></asp:ListItem>
<asp:ListItem Text="Completed" Value="1"></asp:ListItem>
<asp:ListItem Text="Pursuing" Value="2"></asp:ListItem>
<asp:ListItem Text="Withdrawn" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvRCGraduationStatus" runat="server" ErrorMessage="Please Select the Status" ControlToValidate="drpListGraduationStatus" ForeColor="Red" InitialValue="0"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group">
<asp:Label ID="lblMarksObtained" runat="server" CssClass="control-label col-sm-4" Text="Marks/Grade Optained:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtMarksObtained" runat="server" class="form-control" placeholder="Marks/Grade" MaxLength="4" ValidationGroup="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRCMarks" runat="server" ControlToValidate="txtMarksObtained" ErrorMessage="Please enter the Marks/Grade" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExRCMarks" runat="server" ControlToValidate="txtMarksObtained" ValidationExpression="^[a-zA-Z0-9]+$" ErrorMessage="please enter Marks or Grade only" ForeColor="Red"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<asp:Label ID="lblPerMarks" runat="server" CssClass="control-label col-sm-4" Text="%age Marks:" Font-Bold="true"></asp:Label>
<div class="col-sm-8">
<asp:TextBox ID="txtPerMarks" runat="server" class="form-control" placeholder="% of Marks" MaxLength="3" ValidationGroup="ResumeCreation"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRCPercentage" runat="server" ControlToValidate="txtPerMarks" ErrorMessage="Please enter the Marks Percentage" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regEXRCPercentage" runat="server" ControlToValidate="txtPerMarks" ValidationExpression="(100)|(0*\d{1,2})" ErrorMessage="Please enter the numbers only" ForeColor="Red"></asp:RegularExpressionValidator>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-m-6">
<div class="GraduationDetailsImgPortion">
<img src="Images/Graduation.gif" alt="Graduation" id="GraduationDetailsImg" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-group">
<asp:Button ID="btnCreateResume" runat="server" Text="Create" CssClass="btn-primary btn-md" OnClick="btnCreateResume_Click" />
<asp:Button ID="btnCancelResume" runat="server" Text="Cancel" CssClass="btn-primary btn-md" OnClick="btnCancelResume_Click1" CausesValidation="false" />
</div>
</div>
</form>
</body>
</html>
Upvotes: 0
Ziv Rozenberg
Reputation: 51
I think you are missing viewport meta.
<meta name="viewport" content="width=device-width, initial-scale=1">
Upvotes: 1
Related Questions
- Get the size of the screen, current web page and browser window
- CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
- Flushing footer to bottom of the page, twitter bootstrap
- How do I hide an element when printing a web page?
- Prevent html injection on Asp.Net textbox validation
- Does not show dynamic submenus of the Menu control in asp.net
- Problem with ajax hover menu extender control