I have this code, and it renders this HTML. How can I apply CSS to my control if they are named ctrctrctr-00000 or something else like that that is only useful to the VIEWSTATE?
<!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><title>
</title><link href="../global.css" rel="stylesheet" type="text/css" />
Informacion General: Paises
</head>
<body>
<form name="aspnetForm" method="post" action="Pais.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyMDk1NTY2MGRkwAKu2OIV85kXfcUcAefBBNmSuRY=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLSha7NBAKqw7ARAvjQlaIKhJ2HMftmmOoxe/+aE4sG3D32QtA=" />
</div>
<div>
<input name="ctl00$ContentPlaceHolder1$txtPais" type="text" id="ctl00_ContentPlaceHolder1_txtPais" />
<input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id="ctl00_ContentPlaceHolder1_btnSubmit" />
</div>
</form>
</body>
</html>
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Frontend._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>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Prueba de Escritorio</h1>
<asp:TextBox ID="txtPais" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Guardar" onclick="btnSubmit_Click" />
</div>
</form>
</body>
</html>
How can I use a CSS selector to target ALL textboxes on the page regardless of name?
Thank you.
Why wouldn't you do this either:
input[type=text] { /* style */ } (standard)
or
input.text { /* style */ } (not as standard)
???
You can give it a CSS class, like this:
<asp:TextBox ID="txtPais" runat="server" CssClass="textbox" />
Then just use add what you need in your CSS:
.textbox { color: red; }
The CssClass property doesn't get mangled like the ID and name attributes.
you can use jQuery and do it like this:
$('input[id$=_txt]').addClass('yourClassName maybeAnotherClassName');
$(document).ready(function () {
$("input[type=text]").addClass("textBoxCSS");
}
For applying classes to text boxes on a page, you can further customize the selectors and be more specific.
Related
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.
I have a checkboxlist in ASP.net with several choices in it. Is there a way that I can make the physical check able box invisible? I want it so that only the item in question is visible, but the box is invisible. If this is not possible can somebody recommend an alternate ASP control that would behave similarly to the checkboxlist?
For example I have a checkboxlist such as this:
<asp:CheckBoxList ID="Example" runat="server" AutoPostBack="false" RepeatColumns="2" RepeatDirection="Horizontal">
<asp:ListItem> 1 </asp:ListItem>
<asp:ListItem> 2 </asp:ListItem>
<asp:ListItem> 3 </asp:ListItem>
<asp:ListItem> 4 </asp:ListItem>
<asp:ListItem> 5 </asp:ListItem>
</asp:CheckBoxList>
Now I want only the number to be visible and selectable, but I want to the checkbox to be invisible. Much like the way a button works but I feel as though creating x amount of buttons may be more tedious.
As per the answer I have tried the demo Jquery and came out with this:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Testjq.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 runat="server">
<script type = "text/javascript" src ="Scripts/jquery-1.7.1.min.js"></script>
<script type = "text/javascript" src ="Scripts/jquery-ui-1.8.18.custom.min.js"></script>
<script>
$(function () {
$("#check").button();
$("#format").buttonset();
});
</script>
<style>
#format { margin-top: 2em; }
</style>
<title></title>
</head>
<body>
<div class="demo">
<input type="checkbox" id="check" /><label for="check">Toggle</label>
<div id="format">
<input type="checkbox" id="check1" /><label for="check1">B</label>
<input type="checkbox" id="check2" /><label for="check2">I</label>
<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>
</div><!-- End demo -->
</body>
</html>
Unfortunatley I still cannot get it to work. Any additional help would be much appreciated.
Did you check the jQueryUI?
Take a look at the demo page: http://jqueryui.com/demos/button/#checkbox
If I understood well they have exactly what you are looking for.
For some reason when I deploy my app on IIS sever the menu item appears to be ignoring or picking up incorrect css.
This is the html when deployed to IIS6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTYxMDM2MDYPZBYCZg9kFgICAw9kFgICBQ9kFgYCAQ8PFgYeBFRleHQFHEdEUyBUcmFkZSBmZWVkIGZpbGUgZGV0ZWN0ZWQeCUZvcmVDb2xvcgolHgRfIVNCAgRkZAIDDzwrABECAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudAIBZAEQFgAWABYAFgJmD2QWBAIBD2QWBmYPDxYCHwAFDEVVUl9DTVNSQUNDM2RkAgEPDxYCHwAFDEVVUl9DTVNSQUNDM2RkAgIPDxYCHwAFEzIzLzAzLzIwMTIgMTA6MzA6MzVkZAICDw8WAh4HVmlzaWJsZWhkZAIHDzwrABECAA8WBB8DZx8EAgJkARAWABYAFgAWAmYPZBYGAgEPZBYGZg8PFgIfAAUIQmVybSBHQlBkZAIBDw8WAh8ABQZnZHNsZG5kZAICDw8WAh8ABQhCZXJtIEdCUGRkAgIPZBYGZg8PFgIfAAUMR0JQIEVYTyBCQVNFZGQCAQ8PFgIfAAUGZ2RzbGRuZGQCAg8PFgIfAAUMR0JQIEVYTyBCQVNFZGQCAw8PFgIfBWhkZBgEBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUpY3RsMDAkSGVhZExvZ2luVmlldyRIZWFkTG9naW5TdGF0dXMkY3RsMDEFKWN0bDAwJEhlYWRMb2dpblZpZXckSGVhZExvZ2luU3RhdHVzJGN0bDAzBSFjdGwwMCRNYWluQ29udGVudCRHRFNfQktfR3JpZHZpZXcPPCsADAEIAgFkBR1jdGwwMCRNYWluQ29udGVudCRDQUZfQktfR3JpZA88KwAMAQgCAWQFE2N0bDAwJEhlYWRMb2dpblZpZXcPD2QCAWQXvkqySzPs02Fx8dSg92SF1P6wakC6uTViBjZnDE5UKA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
and this is on localhost
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ctl00_NavigationMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_NavigationMenu_1 { text-decoration:none; }
.ctl00_NavigationMenu_2 { }
.ctl00_NavigationMenu_3 { border-style:none; }
.ctl00_NavigationMenu_4 { }
</style></head>
<body>
<form name="aspnetForm" method="post" action="Login.aspx?ReturnUrl=%2fDefault.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMTgxOTUzNzlkZCNjjPhsCt06uFnsECs0BUpSQWBv" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
Any ideas why this is causing an issue when deployed? Site is using a master page and forms authentication although the title and otehr layout features are working fine from the css sheet.
Note, I have just moved from apache web server to iis and was working fine on Apache.
Any help much appreciated.
This is the code from master page, anything obvious here?
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="FoundryStatusReport.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1 style="font-family: Tahoma; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none;">
Report <br />
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Login.aspx"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="false" Orientation="Horizontal"
StaticMenuItemStyle-CssClass="MenuItemCSS">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
<asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Tahoma"
Font-Size="Medium" ForeColor="Red" NavigateUrl="~/Default.aspx">London Checks</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" Font-Names="Tahoma"
Font-Size="Medium" ForeColor="#006600" NavigateUrl="~/Pages/HKG_Exotics.aspx">Asia Checks</asp:HyperLink>
</div>
</form>
</body>
</html>
Ok, this actually ended up being due to a different ASP.NET version specified in the webserver. Specified version was 4 instead of 2.x.
See http://abhijitjana.net/2010/05/18/css-friendly-menu-control-in-asp-net-4-0/
Thanks all
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.
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)