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.
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 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" %>' />
is there a way to scroll-down to a particular div when the page loads? i have 100+ rows so when the page loads i am highlighting the div background based on certain conditions so same way is that possible to position to the particular div?
i am using a repeater with
<asp:Repeater EnableViewState="true" ID="rpt" runat="server" OnItemDataBound="rpt_ItemDataBound">
<ItemTemplate>
<div style='padding: 10px;' id="mydiv" runat="server">
<div>
<asp:Label runat="server" ID="lblName" Text='<%# Eval("Name") %>'> </asp:Label>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
protected void rpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (......)
mydiv.Attributes.Add("class", "selected_div");
}
Use tabindex property of div. set the focus of div using tab-index.
check this link : Set keyboard focus to a <div>
If you are using jquery, you could use the scrollTo plugin, on the page's ready function, using your "selected_div" class as selector.
Such as:
$(document).ready(function() {
$(document).scrollTo('.selected_div');
}
Without jquery you can use the standard javascript function .scrollIntoView(true) on the div element. However, you'd have to locate the element first, in order to call that function.
A combination of both is also valid. Using jquery to locate the selected div using your class selector, and on the element calling .scrollIntoView(true).
I want to change color of label which is in usercontrol.
as it in in usercontrol i'm failed to do this using css.
I did like following :
inside myusercontrol.ascx
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<asp:Label ID="Label2" runat="server" Text="user control"></asp:Label>
StyleSheet1.css
#Label2
{
color:red;
}
webform.aspx
<div>
<asp:Label ID="Label1" runat="server" Text="home" ></asp:Label>
<uc:myuc runat="server" ID="uc1" />
</div>
As in normal aspx page it is working fine but not on usercontrol please suggest
Never style against asp.net id:s since they might change in the markup. If you view source the label (rendered as a span) propably won´t have id="Label2" when it´s inside the usercontrol. Rather style it using a class or set clientidmode static if that suits your solution.
Try
uc1.Style["Color"] = "Red";
I have an asp.net checkboxlist as follows:
<asp:CheckBoxList ID="CheckBoxList_Genres" runat="server" RepeatColumns="3">
<asp:ListItem Selected="True">Action</asp:ListItem>
<asp:ListItem Selected="True">Comedy</asp:ListItem>
<asp:ListItem Selected="True">Classics</asp:ListItem>
<asp:ListItem Selected="True">Documentary</asp:ListItem>
[...]
I have two problems: the text does not align with each checkbox, and in some browsers (notably Safari), there is no padding between the checkbox and the text (the text rides up against the checkbox). I am aware of the answer posted here:
How to align checkboxes and their labels consistently cross-browsers
However, I can't work out how to implement these styles in the asp:checkboxlist context; I know that a css style can be set for the checkboxlist, but do not think that this allows me to set separate styles for the "label" and the "checkbox". Help would be appreciated.
You should be able to apply the same methods to the CssClass property of your CheckBoxList control as you would a regular checkbox.
Here is some CSS code I used to indent long text next to an ASP.net check box list:
.chkChoice input
{
margin-left: -20px;
}
.chkChoice td
{
padding-left: 20px;
}
ASP.net:
<asp:CheckBoxList id="ChkWork" runat="server" TabIndex="2" CssClass="chkChoice">
In the properties of the check box list, switch the repeatlayout from flow to table. That will align the columns.
some of checkboxlist items, has label, for space between text and the item, for example checkbox, you have to give type of item in Css.
Exlampel:
.myCheckBoxList label
{
padding-right: 5px;
}
and give che checkboxlist class like this:
CssClass="myCheckBoxList"
One of the properties of asp:CheckBoxList is RepeatLayout="Table". This will result to a table-like list where all is checkboxes are aligned.
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" RepeatLayout="Table" Width="100%">
Output: