I have Page in which I use a RadiobuttonList that is in an HTML table. I have given a CSS style to table and td. I have also given a CSS style to RadioButtonList, but it doesn't take its style from RadioButtonList - it takes it from td. Is there any way to make RadioButtonList follow the style of RadioButtonList instead of td?
I assume you talk about styling an asp:RadioButtonList.
Add a CssClass on your asp:RadioButtonList and define it in your CSS
<asp:RadioButtonList runat="server" CssClass="radiobuttonlist">
<asp:ListItem Text="Item1" Value="1"></asp:ListItem>
<asp:ListItem Text="Item2" Value="2"></asp:ListItem>
<asp:ListItem Text="Item3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
CSS
.radiobuttonlist { }
.radiobuttonlist tr { }
.radiobuttonlist tr td { }
.radiobuttonlist tr td input { }
.radiobuttonlist tr td label { }
It's really difficult to style radio buttons, checkboxes, and selects consistently across multiple browsers. Your best bet is to try using some js like this jQuery plugin - Fancy Checkboxes.
The ability to style radio buttons via CSS is limited. How they look varies from browser to browser and OS to OS. You're best to leave them alone unless you want to replace them with a scripted version.
Related
I have a CheckBoxList in ASP.Net and I want to change the background color of the checked Item.
How can I do it?
I want to do this using CSS.
My .aspx page is:
<asp:CheckBoxList ID="chkdisease" runat="server" RepeatColumns="2">
<asp:ListItem> Spontaneous bleeding</asp:ListItem>
<asp:ListItem>chiae (superficial tiny areas of bleeding into the skin resulting in small reddish spots) , Purpura (easy or excessive bruising), Spontaneous bleeding from </asp:ListItem>
<asp:ListItem>Fatigue</asp:ListItem>
<asp:ListItem>Prolonged bleeding cuts,</asp:ListItem>
<asp:ListItem>DVT (deep vein thrombosi</asp:ListItem>
</asp:CheckBoxList>
Css code to change the background-color.
<style>
.MyClass input[type=checkbox]:checked + label
{
background-color:red;
}
</style>
And apply the class to your CheckBoxList. Like below
<asp:CheckBoxList ID="chkdisease" runat="server" RepeatColumns="2" CssClass="MyClass">
<asp:ListItem> Spontaneous bleeding</asp:ListItem>
<asp:ListItem>chiae (superficial tiny areas of bleeding into the skin resulting in
small reddish spots) , Purpura (easy or excessive bruising), Spontaneous bleeding
from </asp:ListItem>
<asp:ListItem>Fatigue</asp:ListItem>
<asp:ListItem>Prolonged bleeding cuts,</asp:ListItem>
<asp:ListItem>DVT (deep vein thrombosi</asp:ListItem>
</asp:CheckBoxList>
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.
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 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: