I have been using the same Ajax Combobox everywhere in my project but as soon as I use Ajax Combobox under the jquery tab controls, the list shifts to the right and UI appears vague.
I don't want to shift from ajax to jquery combobox and autocomplete, as I just want this issue to be resolved.
Below is my code:
<ajax:ComboBox ID="LenCompDpd" runat="server" Width="133px" CssClass="AquaStyle textfont"
OnSelectedIndexChanged="LenCompDpd_SelectedIndexChanged" AutoPostBack="true"
DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend" CaseSensitive="false"
ItemInsertLocation="OrdinalText" />
This is because the css settings for the jQuery UI messes with the css settings for the Ajax ComboBox, here is a simple example where I had to set the styles for the ComboBox in the page to adjust for the css from jQuery to make it look normal:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Tabs.aspx.cs" Inherits="WebApplication1.Tabs" %>
<!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 runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function () { $("#tabs").tabs(); });
</script>
<style type="text/css">
.ajax__combobox_itemlist
{
left: 28px !important;
top: 103px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
</ul>
<div id="tabs-1">
<ajaxToolkit:ComboBox ID="ComboBox1" runat="server"
AutoPostBack="False"
DropDownStyle="DropDownList">
<asp:ListItem Text="One"></asp:ListItem>
<asp:ListItem Text="Two" />
<asp:ListItem Text="Three" />
</ajaxToolkit:ComboBox>
</div>
<div id="tabs-2">
</div>
</div>
</form>
</body>
</html>
The trick is to use the css classes for the ComboBox, like .ajax__combobox_itemlist to adjust the style so it works with the jQuery stuff.
Related
So I put the Google Analytics script into a separate .js file (obviously without the tags should someone ask) and included it on the Master Page but Google keeps telling me "Tracking not installed". The script does show up when running the page inspector.
Here is a link to the code of my Master Page:
http://pastebin.com/mJ8WRWYP
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Dictionary.master.cs" Inherits="Dictionary" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="shortcut icon" href="~/Resources/favicon.ico"/>
<title>Dictionary</title>
<script src="Resources/GoogleAnalytics.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="WordCount"></asp:Label>
<br />
<asp:ContentPlaceHolder id="Content" runat="server">
</asp:ContentPlaceHolder>
</div>
<footer>
<asp:HyperLink ID="LoginHPL" NavigateUrl="~/LoginPage.aspx" runat="server">Login</asp:HyperLink>
<asp:HyperLink ID="AddWordsHPL" NavigateUrl="~/AddWords.aspx" Visible="false" runat="server">Add Words</asp:HyperLink>
<asp:HyperLink ID="ApproveHPL" NavigateUrl="~/ApprovePage.aspx" Visible="false" runat="server">Approve Words</asp:HyperLink>
<asp:Button ID="LogoutBtn" Visible="false" Style="position: absolute; right: 50px;" runat="server" Text="Logout" OnClick="LogoutBtn_Click" />
</footer>
</form>
</body>
</html>
I'd be very grateful for some help.
I am having trouble using a Colorbox with an ASP.NET WebForm inside. What I am trying to do is:
User clicks a link, and the colorbox pops up
Inside colorbox, user enters a term in a textbox and clicks submit button
On submit, the page hits the DB and then shows results (still inside the colorbox)
Right now, I have steps #1 & #2 working, but #3 isn't. If I click the submit button, the browser navigates to the page that was loaded inside the colorbox (FAQ.aspx).
Test.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test Page</title>
<link href="css/colorbox.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="cbox">FAQs</a>
</div>
</form>
<script>
$(document).ready(function () {
var colorbox = $("#colorbox");
$('form#Form1').prepend(colorbox);
});
$('a.cbox').colorbox({ href: "FAQ.aspx" });
</script>
</body>
</html>
FAQ.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Frequently Asked Questions</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Search: <asp:TextBox runat="server" ID="txtSearch" /> <asp:Button runat="server" ID="btnSubmitSearch" Text="Submit" OnClick="btnSubmitSearch_Click"/>
<br />
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Literal ID="litOutput" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmitSearch" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<br />
</div>
</form>
</body>
</html>
Can anyone help me figure out what I'm doing wrong?
You have to load the colorbox content inside an iframe:
$('a.cbox').colorbox({ href: "FAQ.aspx", iframe: true, width: 456, height: 100 });
I've read some similar issues here, but no answer they provided could help me.
I have a small asp.net page for study porpuses:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="Site.Default" %>
<!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 runat="server">
<title></title>
<link rel="Stylesheet" type="text/css" href="/css/Landing.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="loginHeader" class="aaa">
<div>
<asp:TextBox ID="txtUsername" runat="server"/>
<asp:TextBox ID="txtPassword" runat="server"/>
<asp:Button ID="Button1" runat="server" Text="Login" OnClick="btnLogin_Click" />
<asp:Button ID="Button2" runat="server" Text="Register" OnClick="btnRegister_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text="Password not valid" Visible="False"/>
</div>
</div>
</form>
</body>
</html>
As you can see, the css/landing CSS file is being added.
Here is this css file:
#loginHeader
{
display:block;
background-color:Blue;
}
.aaa
{
display:block;
background-color:Red;
}
If I open the page, no style is applied. Firebug shows that the css is being downloaded.
If I move the css markup to the page, inside a tag, it works, if I change back to the css file, it stops working.
Do you see any reason for this behavior?
Thanks,
Oscar
I Just found it out: there was an error on my config file, which defined that the user should be logged in to access the css files...
solved, thanks :)
You have written the link tag this way.
<link rel="Stylesheet" type="text/css" href="/css/Landing.css" />
Make it
<link rel="Stylesheet" type="text/css" href="css/Landing.css" />
This will instruct the browser to look for the "Landing.css" file inside the css directory.
I want to use ajax ModelpopupExtender control in my .aspx page in visual studio 2010. When user clicks any button,It should open popup like facebook opens popup to show photos. That means pop up should get opened in such a way that it should disable the background until closed button is clicked of that popup. How to open page or panel or any other thing in that popup. Please mention clear steps. I dont have even bit of idea how to do this?
Thanks in advance...
<%# Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 runat="server">
<title>Ajax Model PopUp Extender With MouseOver Example</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function MouseHover()
{
$find("modelPopupExtender1").show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="toolKitScriptManager1"
runat="server">
</ajaxToolkit:ToolkitScriptManager>
<p style="background-color: #9999FF; width: 95%;">
Example of using a ModalPopupExtender with with Mouse Over
<br/></p><br/>
Hover over the hyperlink
<asp:HyperLink ID="HyperLink1" runat="server"
onmouseover="MouseHover();"
Font-Underline="True" ForeColor="Blue">
<b>Mouse Over Here to Open PopUp</b>
</asp:HyperLink> to open pop up
<ajaxToolkit:ModalPopupExtender runat="server"
BehaviorID="modelPopupExtender1"
TargetControlID="HyperLink1"
PopupControlID="popUpPanel"
OkControlID="btnOk"
BackgroundCssClass="modalBackground" >
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="popUpPanel" runat="server"
CssClass="confirm-dialog">
<div class="inner">
<h2>
Thanks For Visiting This Site</h2>
<div class="base">
<asp:Button ID="btnOk" runat="server" Text="Ok"/>
<asp:LinkButton ID="LinkButton1" runat="server"
CssClass="close"
OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
</div></div>
</asp:Panel>
</div>
</form>
</body>
</html>
BackgroundCssClass="modalBackground" did you notice this line this is where you define the css for the background.
I think this should work.
Reference
In the code below, I am trying to apply a Dijit theme to the controls in my .aspx page. However, the controls persist in their normal, unthemed appearance.
Anybody know why?
Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebJournalEntryClient.Main" %>
<!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 runat="server">
<title>My Web Application</title>
<link rel="stylesheet" href="dojoroot/dijit/themes/tundra/tundra.css" />
<script type="text/javascript" src="dojoroot/dojo/dojo.js"/>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ComboBox");
</script>
</head>
<body class = "tundra">
<form id="form1" runat="server">
<div>
<div>
This is potentially space for a header bar.
</div>
<table>
<tr>
<td>
Maybe <br /> a <br /> Side <br /> bar.
</td>
<td>
<asp:ContentPlaceHolder ID="CenterPlaceHolder" runat="server"/>
</td>
</tr>
</table>
<div>
This is potentially space for a footer bar.
</div>
</div>
</form>
</body>
</html>
Content Page:
<%# Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="LogIn.aspx.cs" Inherits="WebJournalEntryClient.LogIn" %>
<asp:Content ID="Content" ContentPlaceHolderID="CenterPlaceHolder" runat="server">
<div>
User ID: <asp:TextBox ID = "UserName" dojoType="dijit.form.TextBox" runat="server" /><br />
Password: <asp:TextBox ID = "PassWord" dojoType="dijit.form.TextBox" runat="server" /><br />
<asp:Button ID="LogInButton" Text="Log In" dojoType="dijit.form.Button" runat="server" />
</div>
</asp:Content>
You need to add djConfig="parseOnLoad: true" to you script tag.
<script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"/>
Or
dojo.parser.parse();
Could be the path is wrong. Use Firebug to see if it's reading any css.
I am not sure about what ASP.net is doing with your page.
However in any case can you double check with firebug wheather your body has "tundra" class in the Browser Output ?? I am assuming that the CSS is comming properly (: as you mentioned in above comment)