I have a Button control, and default skin for Button controls.
That default skin has CssClass defined.
However on one page, I have a set of buttons in one column, and I need to acces these buttons with selector. Obvious way to do it is to use class. However CssClass property from skin overrides CssClass (or class attribute) defined on control.
Is there any way to address this issue?
<asp:Button runat="server" ID="Button1" Text="Click Me" SkinID="ButtonSkin" CssClass='<%# Button1.CssClass + " anotherClass" %>' />
Related
I have this html checkbox with css applied to it.
Here is the jsFiddle.
JsFiddle
It works perfectly , the problem is when i am trying to apply the same css to asp.net checkbox, it is not working.
Here is the code for html input control.
<input type="checkbox" name="chkReservaSemanal" id="chkReservaSemanal" class="css-checkbox" runat="server" /><label for="chkReservaSemanal" class="css-label">Week</label>
And here is the code with asp.net.
<asp:CheckBox ID="chkSemanal" runat="server" AutoPostBack="True" OnCheckedChanged="chkSemanal_CheckedChanged1" CssClass="css-checkbox"/>
But when applied to asp.net checkbox it is not working.
The css is on the jsFiddle.
Check the rendered code from ASP.NET. The CssClass that you define is added to a wrapper around the input and label controls.
So you can add css rules to compensate:
input[type=checkbox].css-checkbox,
.css-checkbox input[type=checkbox] { ... }
Or you can use code behind to attach the class names to the label and input controls separately:
chkSemanal.InputAttributes["class"] = "css-checkbox";
chkSemanal.LabelAttributes["class"] = "css-checklabel";
Web controls in the System.Web.UI.WebControls namespace may render differently in different browsers. You can't count on them rendering the same elements always. They may add anything that they think is needed to make it work in the specific browser.
For example, an asp checkbox:
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="myClass" />
May render with a span:
<span class="myClass"><input id="CheckBox1" type="checkbox" /></span>
as you can see it's the span who have the classname and not the input type checkbox.
The best way to render it as you want is to use:
CheckBox1.InputAttributes.Add("class", "myCheckBoxClass")
Just to say:
CheckBox1.CssClass
will render the same way as adding a CssClass attribute and may add spans.
Hope this would be helpful, I faced this problem before and this is one of the ways to solve it.
As the asker didn't mention how he got it working, I'll share the solution suggested by #MALK:
<span class="css-checkbox">
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:Label ID="Label2" runat="server" Text="Click me!" CssClass="css-label" AssociatedControlID="CheckBox1"></asp:Label>
</span>
And to prevent style lost after a PostBack, in the Page.Load event:
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Me.CheckBox1.InputAttributes("class") = "css-checkbox"
Me.CheckBox1.LabelAttributes("class") = "css-checklabel"
End Sub
Best regards.
i want to ask how i can apply style on asp tags by using stylesheet???
For example i want to style a asp button control like following
<asp:Button ID="btnhme" runat="server" Text="Home" Width="145px"
BackColor="#3399FF" />
i know i can style it by using its properties but i want that if i have 10 buttons in my page then same style is apply to all buttons automatically and i have to do it for my all pages buttons and labels controls and i cannot set properties for all separately
is there is a solution by using stylesheet and if not by using stylesheet then what should i do that the style apply to all button controls and textbox,labels controls also
<asp:Label ID="lbllogin" runat="server" Text="LogIn Here"></asp:Label>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
please guide me how i can solve this issue
Thanx :)
Add the CssClass property to the Button control, for example, and add a corresponding class to the CSS file.
aspx
<asp:Button ID="btnhme" runat="server" Text="Home" Width="145px" BackColor="#3399FF" CssClass="my-buttons" />
CSS
.my-buttons { background-color:#3399FF; }
well you could set default css for each element, this would automatically cause every control of this type to take on this css:
input[type=text] {
//styling
color:blue;
}
label {
//styling
color:blue;
}
or you could come up with your own css class and just attach it to the elements you want:
.myTextClass
{
//styling
color:blue;
}
.myLabelClass
{
//styling
color:blue;
}
then attach the class using the CssClass property:
<asp:Label ID="lbllogin" runat="server" Text="LogIn Here" CssClass="myLabelClass"></asp:Label>
<asp:TextBox ID="txtuser" runat="server" CssClass="myTextClass"></asp:TextBox>
You can register default skin for server controls with desired properties responsible for styling.
Look at this article: How to: Apply ASP.NET Themes
If the page theme does not include a control skin that matches the SkinID property, the control uses the default skin for that control type.
In asp.net, if you use a custom attribute, usually it is rendered as-is.
Considering this markup (note: attributes such as id, name and for were removed in all examples as their generated id/names are verbose):
<asp:TextBox runat="server" data-foo="bar" />
Is rendered in asp.net as:
<input type="text" data-foo="bar" />
That is, asp.net keeps data-foo untouched.
Check box are usually rendered like this:
<asp:CheckBox runat="server" Text="Normal" />
Renders as:
<input type="checkbox" />
<label>Normal</label>
But if you add a custom attribute on a checkbox:
<asp:CheckBox runat="server" Text="Custom attribute" data-foo="bar" />
It renders as:
<span data-foo="bar">
<input type="checkbox" />
<label>Custom attribute</label>
</span>
As you can see, a span in rendered to hold the attribute. This also happens if you add the attribute in code behind. This does not happen with any other HtmlControl, AFAIK.
Does anyone know why this span is rendered to hold the attribute?
Is there anyway to render the attribute in the input tag?
I'm not sure why it's rendered with a span, but I suppose you can add the attribute directly to the input element of the CheckBox in code-behid like this:
myCheckBox.InputAttributes.Add(...)
Reference links:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.inputattributes.aspx
http://forums.asp.net/p/541142/541562.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.attributecollection.add.aspx
Update
An additional parent element is used, so that the attributes you apply to a CheckBox can affect both the input and the text. I suppose it's a span (and not a div), because it's an inline element, making it more convenient to use in different scenarios.
Reference links:
http://en.wikipedia.org/wiki/Span_and_div#Differences_and_default_behavior
http://learnwebdesignonline.com/span-div
This is the way that render engine builds the CheckBox control, there isn't very much to do about it.
Something you could do is creating a runat="server" input.
<input id="myInput" runat="server" type="checkbox" data-foo="bar"/>
<label>Custom attribute</label>
Another option is adding the data-foo attribute using jquery on document load
$(function(){
$('span[data-foo]').each(function(){
var $span = $(this);
var value = $span.data('foo');
$span.find('input').data('foo',value);
});
})
Just to add another method that I use when all else fails, you can always use a literal control and make it render whatever you want. You need to do a bit more work when handling the postback, but sometimes this is the only way to get the html you need.
Markup:
<asp:Literal ID="myLiteral" runat="server"/>
Codebeside:
myLiteral.Text = string.Format("<input type=\"checkbox\" data-foo=\"{0}\" /><label>Normal</label>", value)
If you are trying to access that attribute on click event you can do that by casting the control. For example I have a check box and I assign it a custom attribute like you did
<asp:CheckBox runat="server" data-foo="bar" />
Now on OnCheckedChanged I need to get that value and in my method I got a sender object.
protected void chk1_CheckedChanged(object sender, EventArgs e)
{
CheckBox myControl = (CheckBox)sender;
string value = myControl.Attributes["data-foo"].ToString();
}
I hope this help someone
I have the following validator on a textbox inside a modal dialog box.
<asp:RequiredFieldValidator runat = "server"
ErrorMessage = "Role name can not be empty."
ControlToValidate = "tbxRoleName" />
It works like it should, except that the validation triggers on every other buttons OnClick handler on the aspx-page too. Since the dialog is invisible it looks like buttons just dont work on the page. My workaround is to add CausesValidation = "false" on all buttons on the page. But it is a very bad solution and I think there should be a smarter way.
Assign ValidationGroup to each validator and also to the button that should trigger validation (but not the the other button). Something like:
<asp:RequiredFieldValidator ValidationGroup='valGroup1' ... />
<asp:Button ValidationGroup='valGroup1' Text='I trigger validation' ... />
How about setting a ValidationGroup?
http://msdn.microsoft.com/en-us/library/ms227424.aspx
Also you can use 'causesvalidation' to the button. If it is false Button will not response to Validation in aspx page.
Example:
<asp:Button runat="server" Text="Cancel" CausesValidation="false" />
The Button has a property CausesValidation that can disable the validation for that button.
More info here: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.causesvalidation.aspx
I want to set the "name" attribute for HiddenField control of ASP.NET from code behind, but I cannot find the "Attributes" property. Is it not there for a purpose? How do I add the attribute?
thanks
The name attribute is automatically computed from the ID properties of the hidden field and its ancestors in the naming container chain. You don't get to set it yourself. You can only access it through the UniqueID of the control.
A possible solution, without knowing a bit more about your code, is to use a server side Html control rather than an ASP.NET web control by adding the runat="server" attribute to the Html markup:
<input type="hidden" id="myHiddenField" runat="server" />
You can then specify the id dynamically in the code behind at runtime from which the name attribute is inferred from:
myHiddenField.ID = "CodebehindName";
myHiddenField.Value = "myValue";
This will result in the following output:
<input name="CodebehindName" type="hidden" id="CodebehindName" value="myValue" />
Another unorthodox method to deal with it is to set the name attribute client side. This is useful if you are posting to a third party such as PayPal.
jQuery EG:
<script type="text/javascript">
$(function () {
$('#BusinessHid').prop('name', 'business')
$('#CurrencyHid').prop('name', 'currency_code')
$('#InvoiceHid').prop('name', 'invoice')
$('#AmountHid').prop('name', 'amount')
})
</script>
<asp:HiddenField ID="BusinessHid" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="CurrencyHid" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="InvoiceHid" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="AmountHid" runat="server" ClientIDMode="Static" />
Forget about the HiddenField control and use a Label instead, give it a name (an id), make it invisible, and store your text into it:
label = new System.Web.UI.WebControls.Label() {
Text = "Here my hidden text",
};
label.Attributes.Add("id", "MyHiddenFieldID");
label.Attributes.Add("style", "display:none;");
myParentControl.Controls.Add(label);
Get your hidden field in your javascript with:
var myHiddenField = document.getElementById("MyHiddenFieldID");
The way I ended up doing this was to set ClientIDMode="Static" on the HiddenField and then set the ID to what I want my name to be.
I ended up with ugly IDs but this was a small price to pay to get this to work.