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.
Related
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
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;**
}
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 ?
I am having styling issue with products loaded in datalist control in Chrome.
While everything looks ok in FF, Chrome gives me weird styling.
Here are the screenshots:
FF: http://gyazo.com/214fcfafbfb91e17ea1f084af84e61e4.png?1341955023
Chrome: http://gyazo.com/4459dc38dc01a18f62780392d8fb3625.png?1341955739
Here is the html markup:
<div class="product-grid">
<asp:DataList ID="dlCatalog" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
RepeatLayout="Table" ItemStyle-CssClass="item-box">
<ItemTemplate>
<nopCommerce:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>'
runat="server" />
</ItemTemplate>
</asp:DataList>
</div>
Here is the CSS:
.product-grid { margin-bottom: 15px; width: 586px; text-align: center; margin-left: -10px; }
.product-grid .item-box { text-align: center; vertical-align: top; padding: 10px 11px 60px 11px; }
.product-grid .product-item { text-align: center; margin: 10px 5px 10px 5px; width: 250px; background: url('images/prod_grid_box_bg.gif') no-repeat 0 100%; }
.product-grid .product-item .product-title { font-weight: bold; font-size: 12px; background: url('images/deal_box_hl.gif') no-repeat 0 0; padding-left: 10px; }
.product-grid .product-item .product-title a { background: url('images/deal_box_hr.gif') no-repeat 100% 0; display: block; height: 2em; line-height: 1.3em; overflow: hidden hidden; padding: 4px 10px 8px 0px; }
.product-grid .product-item .picture { text-align: center; margin-top: 10px; }
.product-grid .product-item .description { margin: 5px 5px 0 5px; text-align: center; padding: 10px 5px 10px 5px; border-top: solid 1px #e3e3e3; color: #555; height: 50px; }
.product-grid .product-item .add-info { vertical-align: bottom; text-align: right; width: 250px; height: 85px; position: relative; }
.product-grid .product-item .add-info .prices { text-align: right; vertical-align: middle; position: absolute; bottom: 15px; right: 10px; }
.product-grid .product-item .add-info .buttons { vertical-align: middle; position: absolute; bottom: 15px; left: 10px; text-align: left; }
.product-grid .product-item .add-info .prices .productPrice { color: green; }
.product-grid .product-item .add-info .prices .oldproductPrice { color: Red; text-decoration: line-through; }
PRODUCT BOX CODE ADDED:
<%# Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.ProductBox1Control"
CodeBehind="ProductBox1.ascx.cs" %>
<%# Register TagPrefix="nopCommerce" TagName="ProductPrice2" Src="~/Modules/ProductPrice2.ascx" %>
<script type="text/javascript" language="javascript" src="../Scripts/jquery.expander.js"></script>
<script type="text/javascript">
// you can override default options globally, so they apply to every .expander() call
//$.expander.defaults.slicePoint = 50;
$(document).ready(function () {
// simple example, using all default options unless overridden globally
//$('div.expandable h3').expander();
// *** OR ***
// override default options (also overrides global overrides)
$('div.expandable h3').expander({
slicePoint: 50, // default is 100
expandPrefix: '.....', // default is '... '
expandText: '>>', // default is 'read more'
collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
userCollapseText: '<<' // default is 'read less'
});
});
</script>
<%--<div class="product-item">
<h2 class="product-title">
<asp:HyperLink ID="hlProduct" runat="server" />
</h2>
<div class="picture">
<asp:HyperLink ID="hlImageLink" runat="server" />
</div>
<div class="description">
<asp:Literal runat="server" ID="lShortDescription"></asp:Literal>
</div>
<div class="add-info">
<div class="prices">
<nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' />
</div>
<div class="buttons">
<asp:Button runat="server" ID="btnProductDetails" OnCommand="btnProductDetails_Click"
Text="<% $NopResources:Products.ProductDetails %>" ValidationGroup="ProductDetails"
CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridproductdetailbutton" /><br />
<asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="<% $NopResources:Products.AddToCart %>"
ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridaddtocartbutton" />
</div>
</div>
</div>--%>
<div class="pblock">
<div class="borderProd">
<div class="expandable">
<h3>
<asp:HyperLink ID="hlProduct" runat="server" />
</h3>
</div>
<asp:Literal runat="server" ID="lShortDescription" Visible="false"></asp:Literal>
</div>
<div class="img">
<a id="hlImageLink" runat="server">
<img id="hlImage" runat="server" style="max-width:170px;max-height:120px"/>
</a>
<div class="body">
</div>
<div class="body">
<nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' />
</div>
<asp:Label ID="labUniversal" runat="server" ForeColor="Blue" Text=""></asp:Label>
</div>
</div>
I fixed the problem by setting the height of the item-box to 275px.
Thanks everyone for your help.