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.
Related
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.
I am attempting to apply styles to a GridView in an AJAX TabControl. The styles are applied in the designer, but when viewed in a browser the control is rendered without any styles. If I remove the GridView from the TabControl the styles are applied.
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html
{
font-family:Arial;
}
#grid
{
border:none;
}
#grid th
{
background:linear-gradient(#FAFAFA, #D8D8D8);
padding:5px;
border-bottom:1px solid gray;
border-top: 1px solid gray;
border-left:none;
border-right:none;
font-style:normal;
font-weight: normal;
}
#grid td
{
padding:5px;
border-bottom:1px solid gray;
border-top: 1px solid gray;
border-left:none;
border-right:none;
width:100px;
}
.select
{
text-decoration: none;
}
.select:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TabContainer ID="TabContainer1" runat="server">
<asp:TabPanel ID="pnl1" runat="server" HeaderText="My Tab">
<ContentTemplate>
<asp:GridView ID="grid" runat="server"
onselectedindexchanged="grid_SelectedIndexChanged">
<Columns>
<asp:TemplateField>
<EditItemTemplate >
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
<ItemStyle Width="30px" />
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Select" Text="Select"></asp:LinkButton>
</ItemTemplate>
<ControlStyle CssClass="select" />
<ItemStyle Width="60px" CssClass="select" />
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Left" />
<RowStyle HorizontalAlign="Left" />
</asp:GridView>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>
Why are the styles not being applied to the GridView?
The id of the GridView will no longer be just grid when inside the TabControl. So the css style of #grid will no longer work.
The id of your grid would be something like TabContainer1_pnl1_grid.
One way to get your styles to work is to assign a CssClass of grid(or whatever you want to call it) on your GridView.
<asp:GridView ID="grid" runat="server" CssClass="grid">
and change your styles to use .grid instead of #grid.
.grid
{
border: none;
}
.grid th
{
background: linear-gradient(#FAFAFA, #D8D8D8);
padding: 5px;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
border-left: none;
border-right: none;
font-style: normal;
font-weight: normal;
}
.grid td
{
padding: 5px;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
border-left: none;
border-right: none;
width: 100px;
}
I'm trying to make a log in form similar to Google Gmail where the email and password textboxes have exactly the same width but when I can't get it right especially with the button. Both have the same style yet the button appears shorter and has a margin-left.
ASP.Net Markup
<div class="loginWindow">
<asp:Login ID="Login1" runat="server" RenderOuterTable="False">
<LayoutTemplate>
<asp:TextBox ID="UserName" placeholder="Username" runat="server" CssClass="Logintextbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1" ForeColor="White">*</asp:RequiredFieldValidator>
<asp:TextBox ID="Password" placeholder="Password" runat="server" TextMode="Password" CssClass="Logintextbox"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1" ForeColor="White">*</asp:RequiredFieldValidator>
<asp:Button ID="LoginButton" CssClass="Loginbutton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1" />
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
<asp:ValidationSummary ID="ValidationSummary1" CssClass="ValidationSummary" runat="server" ValidationGroup="Login1"></asp:ValidationSummary>
</LayoutTemplate>
</asp:Login>
</div>
CSS:
.loginWindow {
height: 340px;
width: 300px;
outline: 1px solid #e2e2e2;
border: none;
padding: 15px 25px 15px 25px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
.Logintextbox {
border: 1px solid #e2e2e2;
display: inline;
padding: 5px 10px 5px 10px;
margin:0;
width: 220px;
height:30px;
}
.Loginbutton {
border: 1px solid #e2e2e2;
display: inline;
padding: 5px 10px 5px 10px;
margin:0;
width: 220px;
height:30px;
}
try applying:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
to all your elements. It makes it so the element's padding and border are added without causing an increase in overall width. inputs are usually rendered this way by default but there may be something different with the ASP rendered inputs. Try to rule this out at least.
http://css-tricks.com/box-sizing/
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
check out the difference between box-sizing and non box-sizing
http://jsfiddle.net/Davidicus/f5r3R/
i have text box and i want it when i start typing the autocomplete will show the suggestion. this is my html code
<tr>
<td valign="top" align="right">
<asp:Label ID="labelPayableAccount" runat="server" CssClass="ItemTitle" Text="Payable Account"></asp:Label>
</td>
<td valign="top" align="center" class="style2">
<asp:Label ID="labelPayableAccountColon" runat="server" CssClass="ItemTitle" Text=":"></asp:Label>
</td>
<td valign="top" align="left">
<asp:TextBox ID="txtPayableAccount" runat="server" Width="400px" CssClass="textBoxString"></asp:TextBox>
<div id="divwidth1">
</div>
<ajaxToolkit:AutoCompleteExtender ID="autoComplete1" runat="server" EnableCaching="true"
BehaviorID="AutoCompleteEx" MinimumPrefixLength="1" TargetControlID="txtPayableAccount"
CompletionListElementID="divwidth1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight" ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionListPayableAccount" CompletionSetCount="20" CompletionInterval="1"
DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="false">
</ajaxToolkit:AutoCompleteExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidatortxtPayableAccount" runat="server"
ErrorMessage="Required !" ControlToValidate="txtSupplierType">
</asp:RequiredFieldValidator>
</td>
</tr>
and this is the css code for the autocomplete layout
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
border: solid 1px #006699;
line-height: 20px;
padding: 10px;
background-color: White;
margin-left: 10px;
max-height:180px;
}
.AutoExtenderList
{
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
#divwidth1
{
width: auto !important;
height:180px !important;
}
#divwidth1 div
{
width: auto !important;
}
i have design the layout so that the height of autocomplete frame is 180px, but the list wouldn't do the same, here is the snapshot
can anybody help me?
Perhaps try adding the overflow css property?
#divwidth1
{
width: auto !important;
height:180px !important;
**overflow: hidden;**
}