I have a gridview with a custom css that makes it somewhat of a responsive table so the table columns shrink when the screen is reduced in size.
The problem I have is when shrinking the screen I don't want the columns to reduce so far that you can't see them anymore and would like a minimum-width added to each field.
The issue is specifically when I am using "ControlStyle". When this is set to 100% it seems to disregard my min-width setting.
I am new to this so excuse me if this is a simple problem.
Here is my gridview:
<asp:GridView
ID="GridView1"
runat="server"
AllowPaging="True"
OnRowDeleting="OnRowDeleting"
OnPageIndexChanging="grdData_PageIndexChanging"
borderwidth="0"
OnSorting="TaskGridView_Sorting"
GridLines="None"
CssClass="mGrid"
PagerStyle-CssClass="pgr"
AlternatingRowStyle-CssClass="alt"
AllowSorting="True"
PageSize="<%# Convert.ToInt32(ddlPage.Text) %>"
AutoGenerateColumns="False"
CellPadding="0">
<Columns>
<asp:TemplateField SortExpression="name" HeaderText="Name">
<ItemTemplate>
<asp:TextBox ID="name" CssClass="mlm2" AutoPostBack="True" runat="server" Text='<%# Eval("name") %>' width="125" OnTextChanged="text_change" />
</ItemTemplate>
<ControlStyle width="125" />
</asp:TemplateField>
<asp:TemplateField SortExpression="phone" HeaderText="Phone">
<ItemTemplate>
<asp:TextBox ID="phone" AutoPostBack="True" CssClass="mlm2" runat="server" width="75" Text='<%# Eval("phone") %>'
OnTextChanged="text_change" />
</ItemTemplate>
<ControlStyle Width="100%" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Here is the custom CSS:
.mGrid {
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse:collapse;
}
.mGrid td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
}
.mGrid th {
padding: 4px 2px;
text-align: center;
color: #fff;
background: #e0ebeb url(grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
I have two modal popup in a page. First popup was working as expected. Then I add second popup and it is working but first popup stop responding from code behind mp3.show(). Both popups are independent and second is inside datalist. If I remove second then first work as expected. Below is the code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register TagPrefix="CP" TagName="TitleBar" Src="ucHeaderJobseeker.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Autocomplete - Multiple values</title>
<link href="~/Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
function ShowModalPopup() {
var premium = document.getElementById("hdnPremium");
// if (premium.value == "3") {
$find("mpe").show();
return false;
// }
// else
// { return true; }
}
function HideModalPopup() {
$find("mpe").hide();
return false;
}
</script>
</head>
<body style="margin: 0px 0px 0px 0px;">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="float: right;">
<asp:LinkButton ID="lnkSignIn" runat="server" Text="sign in"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp2" BehaviorID="behaviorIDmp1" runat="server" PopupControlID="Panel2"
TargetControlID="lnkSignIn" CancelControlID="btnSignInCancel" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center" Style="display: none;
height: 230px; width: 300px;" DefaultButton="btnSignIn">
<h1 style="font-variant: normal; font-family: Comic Sans MS; font-size: 1em; margin-left: 0px;
margin-top: 0px; color: Gray;">
Sign In</h1>
<asp:Button ID="btnSignIn" Width="100px" Height="25px" runat="server" Text="OK" CausesValidation="false"
Style="float: left;" />
<asp:HyperLink ID="btnSignInCancel" runat="server" Text="Cancel" CssClass="btnClosePopup">Close</asp:HyperLink>
</asp:Panel>
<div style="float: right; margin-right: 20px; margin-top: 0px;">
<div>
<asp:HiddenField ID="hdnPremium" runat="server" Value="0" />
<asp:Label ID="lblUsername" runat="server" Visible="false" ForeColor="BLUE" Style="margin-top: 0px;
float: right; margin-right: 10px;"></asp:Label></div>
<asp:Label ID="lblPoints" runat="server" ForeColor="#CC0066" Style="float: left;"></asp:Label>
</div>
</div>
<div style="float: right; display: block; margin-top: 10px; margin-right: 20px;">
<asp:LinkButton ID="lnkReferSelected" Text="Refer Me in Selected Jobs" Visible="true"
runat="server" OnClick="ReferMultiple" Style="background: #4E9CAF; padding: 5px 15px 5px 15px;
text-align: center; border-radius: 5px; color: white; font-weight: bold; text-decoration: none;
margin-left: 10px;"></asp:LinkButton>
<%--<div class="divSignUp" id="divFakeReferSelected" runat="server" text="Refer Me in Selected Jobs"
visible="true" style="background: #4E9CAF; padding: 5px 15px 5px 15px; text-align: center;
border-radius: 5px; color: white; font-weight: bold; text-decoration: none; margin-left: 10px; cursor: pointer;">
Refer Me in Selected Jobs</div>--%>
<asp:LinkButton ID="lnkFakePay" runat="server" Style="display: none;"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp3" BehaviorID="behaviorIDmp3" runat="server" PopupControlID="Panel3"
TargetControlID="lnkFakePay" CancelControlID="hplCancelPay" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel3" runat="server" CssClass="modalPopup" align="center" Style="display: none;
height: 230px; width: 300px;">
<h1 style="font-variant: normal; font-family: Comic Sans MS; font-size: 1em; margin-left: 0px;
margin-top: 30px; color: black; clear: both;">
You are applying to more than</h1>
<div style="text-align: center; margin-top: 30px; margin-bottom: 20px;">
<asp:Button ID="btnPaymetConfirm" Width="100px" Height="25px" runat="server" Text="OK"
OnClick="btnPaymetConfirm_Click" CausesValidation="false" Style="float: left;" />
<asp:HyperLink ID="hplCancelPay" runat="server" Text="Cancel" CssClass="btnClosePopup">Cancel</asp:HyperLink>
</div>
</asp:Panel>
</div>
<div style="width: 100%;">
<asp:DataList ID="dlJobs" runat="server" RepeatDirection="Horizontal" RepeatColumns="1"
DataKeyField="Job_Id" CellPadding="10" ItemStyle-VerticalAlign="Top" Width="100%"
OnItemCommand="dlJobs_ItemCommand">
<ItemTemplate>
<div style="margin-top: 0px; padding-top: 10px; padding-bottom: 10px; background-color: White;
border: 1px solid #a6a6a6; width: 100%;">
<div style="float: left; margin-top: 10px; margin-left: 10px;">
<asp:CheckBox runat="server" ID="chkJob" />
</div>
<div style="float: left; margin-top: 10px; margin-left: 10px;">
<img alt="NoImage" src="Images/CompanyBlank.png" width="50px" height="50px" />
</div>
<div style="float: left; margin-top: 20px; margin-left: 10px;">
<asp:Label ID="lblCompany" Font-Bold="true" ForeColor="#004080" runat="server" Text='<%# Eval("Emp_Company").ToString() %>'></asp:Label>
</div>
<div style="margin-top: 20px; float: right; margin-right: 30px;">
<div style="color: #8b99a7; display: inline;">
Posted On:
</div>
<div style="display: inline;">
<asp:Label ID="lblPostDate" runat="server" Text='<%# Eval("Job_PostDate", "{0:dd-MMM-yyyy}") %>'
ForeColor="#21262c"></asp:Label></div>
<%--<div style="font-size: small; margin-left: 300px;">
<a href='Jobs.aspx?Job_Id=<%# Eval("Job_Id") %>'>View Details</a>
</div>--%>
</div>
<%--<div>
<asp:Label ID="lblJobTitle" Font-Bold="true" Font-Size="Small" Style="word-wrap: break-word;
word-break: break-all; cursor: default;" runat="server" Text='<%# Eval("Job_Title") %>'
ForeColor="#ffa366"></asp:Label>
</div>--%>
<div style="margin-top: 67px; margin-left: 40px;">
<div style="float: left; color: #8b99a7;">
IT Skill: </div>
<asp:Label ID="lblSkills" Style="margin-left: 40px;" Font-Bold="false" ForeColor="#21262c"
runat="server" Text='abc'></asp:Label>
</div>
<div style="margin-top: 7px; margin-left: 40px; float: left;">
<div style="float: left; color: #8b99a7;">
Experience: </div>
<asp:Label ID="lblExp" Style="margin-left: 15px;" Font-Bold="false" ForeColor="#21262c"
runat="server" Text='<%# Eval("Min_Exp").ToString() + " - " + Eval("Max_Exp").ToString() + " Years"%>'></asp:Label>
</div>
<div style="float: right;">
<asp:Panel ID="pnlRequestReferral" runat="server">
<div style="font-size: small; float: left;">
<asp:LinkButton ID="lnkReferSingleJob" Text="Refer Me" runat="server" CommandArgument='<%# Eval("Job_Id") %>'
CommandName="ReferSingleJob" Style="background: #4E9CAF; padding: 5px 15px 5px 15px;
text-align: center; border-radius: 5px; color: white; font-weight: bold; text-decoration: none;
margin-left: 10px;" Visible='<%# Convert.ToBoolean(Eval("IsNotReferred")) %>'></asp:LinkButton>
<asp:Label runat="server" ID="lblReferred" Text="Referral Request Sent" ForeColor="#004080"
Visible='<%# (int)Eval("IsNotReferred") == 1 ? false : true %>'></asp:Label>
<%--<div class="divSignUp" id="divReferMe" runat="server" style="background: #4E9CAF;
padding: 5px 15px 5px 15px; text-align: center; border-radius: 5px; color: white;
font-weight: bold; text-decoration: none; margin-left: 10px; cursor: pointer;">
Refer Me</div>--%>
</div>
<div style="font-size: small; float: right; margin-left: 20px;">
<asp:LinkButton ID="lnkContactReferrer" Text="Contact Referrer" OnClientClick="return ShowModalPopup()"
runat="server" CommandArgument='<%# Eval("Job_Id") %>' CommandName="ContactReferrer"
Style="background: #4E9CAF; padding: 5px 10px 5px 10px; text-align: center; border-radius: 5px;
color: white; font-weight: bold; text-decoration: none; margin-left: 5px; margin-right: 5px;"></asp:LinkButton>
<asp:LinkButton ID="lnkDummy" runat="server" Style="display: none;"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp4" BehaviorID="mpe" runat="server" PopupControlID="pnlPopup"
TargetControlID="lnkDummy" CancelControlID="btnHide" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" HorizontalAlign="Center" runat="server" CssClass="modalPopup"
Style="display: none; height: 230px; width: 300px;">
<div style="float: left;">
Name :</div>
<div style="color: Black;">
<%# Eval("First_Name")%></div>
<br />
<div style="float: left;">
Email :</div>
<div style="color: Black;">
<%# Eval("EmpEmail_Id")%></div>
<br />
<div style="float: left;">
Contact :</div>
<div style="color: Black;">
<%# Eval("Contact_Number")%></div>
<br />
<br />
<asp:Button ID="btnHide" runat="server" Text="Close" OnClientClick="return HideModalPopup()" />
</asp:Panel>
</div>
</asp:Panel>
<asp:Panel ID="pnlReferred" runat="server" Visible='<%# Convert.ToBoolean(Eval("IsNotReferred")) %>'>
<div style="font-size: small; float: left;">
<asp:Label ID="lblRefRequest" Text="Referral Request Sent" Visible="false" runat="server"
Style="background: #4E9CAF; padding: 5px 15px 5px 15px; text-align: center; border-radius: 5px;
color: white; font-weight: bold; text-decoration: none; margin-left: 10px;"></asp:Label>
</div>
<div style="font-size: small; float: right; margin-left: 20px;">
<asp:Label ID="lblRefContact" Visible="false" runat="server" Style="background: #4E9CAF;
padding: 5px 15px 5px 15px; text-align: center; border-radius: 5px; color: white;
font-weight: bold; text-decoration: none; margin-left: 10px;"></asp:Label>
</div>
</asp:Panel>
</div>
<div style="margin-top: 7px; margin-left: 40px; float: left; clear: both;">
<div style="float: left; color: #8b99a7;">
Location: </div>
<asp:Label ID="lblLocation" Style="margin-left: 25px;" Font-Bold="false" ForeColor="#21262c"
runat="server" Text='<%# Eval("Job_Location").ToString() %>'></asp:Label>
</div>
<%--<div style="margin-top: 10px; margin-left: 40px; margin-bottom: 20px;">
<div style="float: left; color: #8b99a7;">
Note: </div>
<asp:Label ID="lblNotice" style="margin-left: 50px;" Font-Bold="false" ForeColor="#21262c" runat="server"
Text='<%# Eval("Notice").ToString() %>'></asp:Label>
</div>--%>
<div style="margin-top: 60px; margin-left: 40px; margin-bottom: 20px; clear: both;">
<div style="float: left; color: #8b99a7; display: inline;">
About Company: </div>
<asp:Label ID="lblAbtCompany" Style="margin-left: 10px; display: inline; margin-top: 20px;"
Font-Bold="false" ForeColor="#21262c" runat="server" Text='<%# Eval("About_Company").ToString() %>'></asp:Label>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
and this is the code behind
protected void Page_Load(object sender, EventArgs e)
{
string keySkills = "java";
string location = string.Empty;
int recordcount = 0;
DataTable dtJobList;
DataTable dtCompanyList;
DataSet dsJobs = GetSearchResult(keySkills, location, 1, ref recordcount, Session["UserName"], 0);
dtJobList = dsJobs.Tables[0];
dtCompanyList = dsJobs.Tables[2];
dlJobs.DataSource = dtJobList;
dlJobs.DataBind();
}
protected void ReferMultiple(object sender, EventArgs e)
{
mp3.Show();
}
protected void btnPaymetConfirm_Click(object sender, EventArgs e)
{ }
protected void dlJobs_ItemCommand(Object sender, DataListCommandEventArgs e)
{
}
This is the complete code if I remove mp4 modal popup then mp3 will work fine.
Hi I create the app which has two div display side by side. I searched the web and find example, but I don't know why my right column start and the end of left column bottom. Would someone tell me how to correct it. I want the "rightcolumn" is the same level of the "File Location" line.
My output:
there is my asp page
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title> Application</title>
<link href="StyleSheet.css" type="text/css" rel="stylesheet" />
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="column1-wrap" class="title " >
<div id="column1"> Applicaton</div>
</div>
<div id="column2">
<asp:Label ID="lblName" Text="Guest" runat="server" /><br/>
<asp:Label ID="lblUserGroup" Text="Group" runat="server" />
</div>
<div id="clear"></div>
<div >
<asp:Panel ID="pnlGroup" runat="server" Visible="true" >
<span class="sub-title modified"> Select:</span>
<asp:RadioButton ID="rd1" runat="server" AutoPostBack="true" Text="Frist" />
<asp:RadioButton ID="rd2" runat="server" AutoPostBack="true" Text="Second" />
</asp:Panel>
</div>
<%--Folder panel --%>
<div id="leftcolumn">
<asp:Panel ID="pnlFolder" runat="server" Visible="true" >
<br /><asp:Label ID="Label4" Text="File Location:" runat="server" class="sub-title modified"/>
<asp:FileUpload ID="fileUploadSingle" runat="server" class="multi" maxlength="1" Visible="true"/>
<asp:Button id="btnSubmit" runat="server" text="Sumit" CssClass="button " />
</asp:Panel>
</div>
<%--end leftcolumn --%>
<div id="rightcolumn">
<asp:Button id="Button1" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button2" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button3" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button4" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button5" runat="server" text="rightcolumn" CssClass="button " /><br />
<asp:Button id="Button6" runat="server" text="rightcolumn" CssClass="button " /><br />
</div>
</div>
</form>
</body>
</html>
There is my stylesheet:
body, html {
margin:0px;
padding:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000;
background-color:#ccc;
background-image:url(/images/body-bkg.png);
background-repeat:repeat-x;
}
#wrap {
margin:auto;
width:975px;
border-top:10px solid #000;
background-color:#FFFFFF;
height:auto;
}
a:link {
text-decoration:none;
font-weight:bold;
color:#000;
}
#header {
width:975px;
height:85px;
background-color:#333;
}
.title {
font-size:16px;
font-weight:bold;
}
.sub-title {
font-size:14px;
font-weight:bold;
}
.sub-sub-title {
font-size:12px;
font-weight:bold;
}
.right{
float:right;
}
.modified {
margin-left:20px;
float:left;
}
#column1-wrap {
float: left;
width: 100%;
}
#column1 {
background-color: cyan;
}
#column2 {
background-color: lime;
float: left;
width: 200px;
margin-left: -200px;
text-align:right;
}
#clear, #Div1 {
clear: both;
}
.left
{
position:relative;
background-color:Green;
}
.button {
font-size:14px;
font-weight:bold;
margin-left:20px;
}
#leftcolumn { width: 50%; border: 1px solid red; float: left; background-color:Blue;}
#rightcolumn { width: 50%; border: 1px solid red; float: right}
please add this to your css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
example
Earlier combobox was working correctly. But after applying css to web page combobox itemlist is droping at some other place on page. It happen exactly applying css to page. Image of web page is shown below:
i have used following css.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body {
font-size: .813em;
max-width: 1244px;
padding-left: 12px;
padding-right: 12px;
margin: 0;
margin-left: auto;
margin-right: auto;
font: .875em/1.35 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
background-color:white;
color: #2a2a2a;
line-height: 1.538;
height: 100%;
display: block;
}
#Container {
/*max-width:90%;*/
clear:right;
margin-right:auto;
margin-left:auto;
min-width: inherit;
position: relative;
width:inherit;
}
#ux-header {
padding: 20px 0 0;
clear: right;
font-size: .813em;
line-height: 1.538;
font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
color: #959595;
position: relative;
z-index: 9998;
background-color:#eee;
}
#ux-header .BrandLogo {
margin: 0;
float: left;
height: 40px;
overflow: hidden;
}
#ux-header .GlobalBar {
margin: 0;
overflow: hidden;
width: 330px;
width: auto;
float: right;
line-height: 1.25;
font-size: 12px;
}
#ux-header .internav {
padding: 5px 0 12px;
margin: 0;
line-height: 1.75;
font: 14px 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
border-bottom: solid 1px #ccc;
clear: both;
}
div#body {
padding-top: 35px;
clear: both;
min-width:inherit;
max-height:100%;
width:auto;
}
div#form {
margin: 0;
position:relative;
max-width:initial;
width:auto;
}
div#leftNav {
width: auto;
margin: 0 -1px 0 0;
border-right: 1px solid #b6b6b6;
float: left;
position: relative;
}
div#leftNav.leftNavResize1 {
width:750px;
}
div#Content1.leftform {
float:left;
margin:10px 0px 10px 20px;
}
div#Content2.rightImage {
float:left;
margin:10px 60px 10px 0px;
width:auto;
text-align:center;
}
div#form {
width:60%;
float:left;
}
div#content {
border-left: 1px solid #b6b6b6;
padding-left: 20px;
margin: 0;
overflow-x: auto!important;
min-height: 300px;
word-wrap: break-word;
width:auto;
}
.topic .title {
font-family: Segoe UI,Verdana,Arial;
}
h1, h1.heading {
font-size: 3em;
color: #707070;
}
h1 {
color: #707070;
font: 100 2.571em/1.167 'Segoe UI Light','Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
margin-top: 0;
display: block;
font-size: 2em;
/*-webkit-margin-before: 0.67em;*/
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
/*font-weight: bold;*/
}
input[type="text"] {
border-radius: 5px;
border: 1px solid #999;
font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
width:197px;
padding:3px;
border-spacing:3px;
margin-left:0px;
margin-right:auto;
}
input[type="text"]:focus {
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border: 1px solid #5AB0DB;
border-radius: 5px;
font-family:inherit;
}
input[type="text"]:hover {
border: 1px solid #999;
border-radius: 5px;
box-shadow: 0px 0px 5px #61C5FA;
font-family:inherit;
}
input[type="text"]:focus:hover {
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border: 1px solid #5AB0DB;
border-radius: 5px;
font-family:inherit;
}
select {
border-radius: 5px;
border: 1px solid #999;
font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
width:204px;
padding:3px;
border-spacing:3px;
margin-left:0px;
margin-right:auto;
}
select:focus {
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border: 1px solid #5AB0DB;
border-radius: 5px;
font-family:inherit;
}
select:hover {
border: 1px solid #999;
border-radius: 5px;
box-shadow: 0px 0px 5px #61C5FA;
font-family:inherit;
}
select:focus:hover {
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border: 1px solid #5AB0DB;
border-radius: 5px;
font-family:inherit;
}
textarea {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #999;
font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
width: 200px;
height:45px;
border-spacing:3px;
margin-left:0px;
margin-right:auto;
}
textarea:focus {
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border: 1px solid #5AB0DB;
border-radius: 5px;
font-family:inherit;
}
textarea:hover {
border: 1px solid #999;
border-radius: 5px;
box-shadow: 0px 0px 5px #61C5FA;
font-family:inherit;
}
textarea:focus:hover {
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border: 1px solid #5AB0DB;
border-radius: 5px;
font-family:inherit;
}
table {
border-spacing:2.5px;
column-width:auto;
margin:auto;
vertical-align:middle;
}
html code
<body class="body">
<form id="form1" runat="server">
<div id="Container">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<div id="ux-header" class="Chrome ltr">
<div class="BrandLogo">
<a href="http://msdn.microsoft.com/en-us">
<span class="BrandLogoImage msdn" title="MSDN"></span>
</a>
</div>
<div class="GlobalBar">
</div>
<div class="internav">
</div>
</div>
<div id="body">
<div id="leftNav" class="leftNavResize1">
<div class="topic" xmlns="http://www.w3.org/1999/xhtml">
<h1 class="title">Pest Master</h1>
</div>
<div id="form">
<table style="width:auto;float:left">
<tr>
<td style="width:25%">
<asp:Label ID="Label1" runat="server" Text="Pest Classification"></asp:Label>
</td>
<td style="width:45%">
<asp:DropDownList ID="ComboBox1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged"></asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Pest Name"></asp:Label>
</td>
<td>
<asp:ComboBox ID="ComboBox2" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ComboBox2_SelectedIndexChanged" Width="172px"></asp:ComboBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" ForeColor="" Text="Measurement Unit"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="Pest Description"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Pest Function"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label6" runat="server" Text="Function Description"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<%-- <tr>
<td >
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/cl.png" AlternateText="abc" Width="150px" Height="40px" OnClick="ImageButton1_Click"/>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" TextMode="MultiLine" Width="175px"></asp:TextBox>
</td>
</tr>--%>
</table>
<div style="width:22%;float:left;margin-top:5px;margin-left:70px">
<asp:Button ID="Button1" runat="server" CssClass="pivot-switch" Text="Save" ValidationGroup="validate" OnClick="Button1_Click" />
</div>
<div style="width:22%;float:left;margin-top:5px;margin-left:0px">
<asp:Button ID="Button4" runat="server" CssClass="pivot-switch" Text="Delete" OnClick="Button4_Click" />
</div>
</div>
<div id="Content2" class="rightImage">
<asp:Image ID="Image1" ImageUrl="~/Images/pest2.jpg" Width="160px" runat="server" />
</div>
</div>
<div id="content" class="content">
<div>
<asp:GridView ID="GridView1" AutoGenerateColumns="false" CssClass="mGrid" runat="server" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:TemplateField HeaderText="Sno" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<%# ((GridViewRow)Container).RowIndex +1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Pest Classification">
<ItemTemplate>
<asp:Label ID="Label8" runat="server" Text='<%#Eval("PestClassification") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="Pest Name">
<ItemTemplate>
<asp:Label ID="Label9" runat="server" Text='<%#Eval("PestName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="Label10" runat="server" Text='<%#Eval("PID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="Label12" runat="server" Text='<%#Eval("FunctionDescription") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="Label13" runat="server" Text='<%#Eval("MeasurementUnit") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="Label14" runat="server" Text='<%#Eval("CID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="Label15" runat="server" Text='<%#Eval("GroupID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="Label16" runat="server" Text='<%#Eval("PestDescription") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
<!-- ModalPopupExtender -->
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="Panel2" TargetControlID="HiddenField1"
CancelControlID="btnClose" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center" style = "display:none">
record successfully updated<br />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
<!-- ModalPopupExtender -->
<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
PopupControlID="Panel1" TargetControlID="Button3"
CancelControlID="btnClose" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
<table>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="abc"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox5" runat="server" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Button ID="Button3" runat="server" Text="Save" /></td>
<td><asp:Button ID="Button2" runat="server" Text="Close" /> </td>
</tr>
</table>
</asp:Panel>
<!-- ModalPopupExtender -->
<!--confirmbuttonextender-->
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID="Button4" ConfirmText="do u want to delete" runat="server"></asp:ConfirmButtonExtender>
<!--confirmbuttonextender-->
<asp:Panel ID="Panel3" runat="server">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="validate" ControlToValidate="ComboBox1" SetFocusOnError="true" InitialValue="0" Display="None" ErrorMessage="Select One Option"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" runat="server"></asp:ValidatorCalloutExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ValidationGroup="validate" ControlToValidate="ComboBox2" SetFocusOnError="true" InitialValue="-1" Display="None" ErrorMessage="Select One Option or enter pest name"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" TargetControlID="RequiredFieldValidator2" runat="server"></asp:ValidatorCalloutExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ValidationGroup="validate" ControlToValidate="TextBox1" SetFocusOnError="true" Display="None" ErrorMessage="enter measurement unit"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" TargetControlID="RequiredFieldValidator3" runat="server"></asp:ValidatorCalloutExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ValidationGroup="validate" ControlToValidate="TextBox2" SetFocusOnError="true" Display="None" ErrorMessage="enter pest description"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender4" TargetControlID="RequiredFieldValidator4" runat="server"></asp:ValidatorCalloutExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ValidationGroup="validate" ControlToValidate="DropDownList1" SetFocusOnError="true" InitialValue="0" Display="None" ErrorMessage="Select One Option"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender5" TargetControlID="RequiredFieldValidator5" runat="server"></asp:ValidatorCalloutExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ValidationGroup="validate" ControlToValidate="TextBox3" SetFocusOnError="true" Display="None" ErrorMessage="enter functional description"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender6" TargetControlID="RequiredFieldValidator6" runat="server"></asp:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ValidationGroup="validate" ValidationExpression="^[a-zA-Z0-9\s\.]*$" Display="None" SetFocusOnError="true" ControlToValidate="ComboBox2" ErrorMessage="invalid input"></asp:RegularExpressionValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender10" TargetControlID="RegularExpressionValidator4" runat="server"></asp:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationGroup="validate" ValidationExpression="^[a-zA-Z0-9\s\.]*$" Display="None" SetFocusOnError="true" ControlToValidate="TextBox1" ErrorMessage="invalid input"></asp:RegularExpressionValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" TargetControlID="RegularExpressionValidator1" runat="server"></asp:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ValidationGroup="validate" ValidationExpression="^[a-zA-Z0-9\s\.]*$" Display="None" SetFocusOnError="true" ControlToValidate="TextBox2" ErrorMessage="invalid input"></asp:RegularExpressionValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender8" TargetControlID="RegularExpressionValidator2" runat="server"></asp:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ValidationGroup="validate" ValidationExpression="^[a-zA-Z0-9\s\.]*$" Display="None" SetFocusOnError="true" ControlToValidate="TextBox3" ErrorMessage="invalid input"></asp:RegularExpressionValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender9" TargetControlID="RegularExpressionValidator3" runat="server"></asp:ValidatorCalloutExtender>
</asp:Panel>
</div>
</form>
</body>
please suggest something.
The issue I'm having is that my Css is been used by my controls. Here's my code
ASP.NET
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="LoginBtn"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center"Style="display: none">
This is an ASP.Net AJAX ModalPopupExtender Example
<br />
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
CSS
.modalBackground {
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.modalPopup {
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 300px;
height: 140px;
}
I tried numerous things like copy pasting from examples and i can't get it right what am i doing wrong ?