Develop Reference

How to change the style of checkbox inside radcombobox in telerik ui?

I am working with telerik ui combobox and enabled its checkbox property. Also I a using my custom skin.
My problem is that I am not able to change the style of checkbox. I wanted to change how the checkbox style as per my requirements especially the background colour of checkbox and its shape.
enter image description here

First, I advise that you check out the w3schools that explains how CheckBoxes can be styled at How TO - Custom Checkbox.
And now, inspect the Telerik ComboBox to understand how it is rendered. As you can see, this HTML structure differs a little bit from the one presented in the 3wschools tutorial.
Don't you worry, you can adjust that. Use your JavaScript/jQuery skills and imagination to bend the structure to your will.
Attach the OnClientLoad event to the ComboBox
<telerik:RadComboBox ID="RadComboBox1" runat="server"
RenderMode="Lightweight" CheckBoxes="true"
OnClientLoad="OnClientLoad">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
When this event fires, make some changes to the HTML structure similar to the example from w3schools:
function OnClientLoad(sender, args) {
// get reference to the ComboBox Items
var $comboItems = $(sender.get_dropDownElement()).find('.rcbItem');
// Loop through each item
$comboItems.each(function () {
var $item = $(this);
// add the container class to the items
$item.addClass('container');
// render a span element inside the item
$item.find('label').append('<span class="checkmark"></span>');
})
}
You should now have a similar structure the CSS could work with:
You can now re-use the CSS from the w3schools tutorial with a slight change, that is by making the selectors more specific (stronger):
/* The container */
.RadComboBoxDropDown .container {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.RadComboBoxDropDown .container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.RadComboBoxDropDown .container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.RadComboBoxDropDown .container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.RadComboBoxDropDown .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.RadComboBoxDropDown .container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.RadComboBoxDropDown .container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
More details on CSS Specificity
Specifics on CSS Specificity;
CSS Specificity: Things You Should Know;
Specificity - CSS | MSDN;
CSS !important: Don’t Use It. Do This Instead
The final Result of the Telerik ComboBox with customized CheckBox design
I tried to keep my answer as short as possible. Hope it will prove helpful ;)

Asp.net radiobuttonlist control padding text

I use ASP.net 4.5.
I have this asp code:
<asp:RadioButtonList ID="rdHeaders" cssClass="radio-inline" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical">
</asp:RadioButtonList>
And this code behind that creates radio buttons list.
private void CreateRadioButtons(List<string> headers)
{
rdHeaders.Items.Add(Properties.ErrorStrings.DefaultHeader);
rdHeaders.SelectedIndex = 0;
foreach (string header in headers)
rdHeaders.Items.Add(header);
XMLHeaders.Visible = true;
}
And here how it looks on the browser:
As you can see I have overlap radiobuttons on the text.
UPDATE
Here is definition radio-inline class:
.radio-inline{
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: 400;
vertical-align: middle;
cursor: pointer;
}
My question is how can I move left text to prevent overlap?

Change color of an asp.net button on mouse hover using css

I have a button :
<div class="HeaderBarThreshold">
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
</div>
I am trying to change the color of the button on mouse hover :
Here is my css :
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
}
.HeaderBarThreshold:hover
{
color: Red;
}
It doesnt work somehow. Please let me know.

Try using the CssClass Property of ASP.NET controls. This will directly point the LinkButton itself to the CSS class, instead of having to use the div tag. For example:
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server" CssClass="HeaderBarThreshold">Threshold</asp:LinkButton>

Here is a fiddle http://jsfiddle.net/zpfw7/
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
width:300px;
height:30px;
border:1px solid #000;
text-align:center;
}
.HeaderBarThreshold:hover
{
color: Red;
background:blue;
}

try this thing:
.HeaderBarThreshold a:hover
{
color: Red;
}

Add the CSS class attribute to your web control
<asp:LinkButton CSSClass="HeaderBarThreshold" ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
Also your CSS is wrong anyway because you don't have anything assigned to class "HeaderBarThreshold".

just try this
.HeaderBarThreshold:hover a
{
color: Red !important; // !important may not be necessary
}

.upda_link {
font-size: 15px !important;
color: white;
font-weight: bolder;
}
.upda_link:hover {
text-decoration: none;
color: white;
}
<asp:LinkButton ID="LinkButton1" runat="server" Text="Update" CssClass="upda_link" CausesValidation="false">
</asp:LinkButton>

HTML button type and commandname in asp.net

I am trying to assign commandname to HTML button but obviously it doesn't work very well. This is what I am trying to achieve:
<button type="submit" class="btn btn-info right" CommandName="Login" runat="server" id="loginBtn"><span class="icon16 icomoon-icon-enter white"></span> Login</button>
<asp:Button ID="btnLogin" CommandName="Login" runat="server" CssClass="btn btn-info right" Text="Login" />
The styling for some reason doesn't work on the asp button but it does for the HTML button. Now I want to somehow assign the commandname property to the HTML button if its possible. Is that doable?

CommandName is only available for Button Server Control; not in html button.
However, you can use LinkButton and style it the way you want it.
<asp:LinkButton ID="btnLogin" class="button" runat="server"
CommandName="Login"><span>Login</span></asp:LinkButton>
.button
{
background: transparent url('/Images/ButtonLeft.gif') no-repeat top left;
display: block;
float: left;
line-height: 11px; /* 21px (Button Background) = 5px (padding-top) + 11px (font-size) + 5px(padding-bottom) */
height: 21px; /* Button Background Height */
padding-left: 9px;
text-decoration: none;
font-weight: bold;
color: white;
font-size: 11px;
}
a:link.button, a:visited.button, a:active.button
{
color: white;
text-decoration: none;
margin-right: 10px;
}
a.button:hover
{
background-position: bottom left;
}
a.button span, a.button span
{
background: transparent url('/Images/ButtonRight.gif') no-repeat top right;
display: block;
padding: 5px 9px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}
a.button:hover span
{
background-position: bottom right;
color: white;
}

I used google to find an answer to this question; however since I've found more complete answers I am also answering this question even though it's older (in case any other googlers find it).
In asp.net you can use the DataControlCommands class to implement the following functionality:
Cancel
Delete
Edit
First
Insert
Last
New
Next
Page
Prev
Select
Sort
Update
Which means :
<asp:LinkButton runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" />
among other things.
It's in the library entries for System.Web.UI.WebControls (msdn.microsoft.com)
Yes you could just put in the html and have it work fine- however if you're building something like a dynamic entity site (etc), then it's worth it to take the time to learn how asp.net does it inherently (imo).

Better if you put HiddenField in htmlbutton and then Find child
<button runat="server"
ClientIDMode="Static"
class="btn btn-success"
ID="button_recalculate"
OnServerClick="button_recalculate_OnClick"
>
<asp:HiddenField runat="server" ID="hidden" Value=<%#Eval("ID") %>/>
Voir
</button>
Server
try
{
var type = (HtmlButton) sender;
var child = type.FindControl("hidden");
var id = ((HiddenField) child).Value.TransformToInt();
SendValueToServer(id);
}
catch (Exception)
{
//
}

HTML/CSS Positioning Issue with asp:Label and span

When I do the following:
<asp:Label CssClass="someField" runat="server">*</asp:Label>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Or:
<span class="someField">*</span>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>
Css someField:
span.someField {
color: #CC0000;
font-weight: 600;
}
Css for label:
form label {
clear: left;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
margin: 0 3px 4px 0;
padding: 4px 0 4px 5px;
width: 200px;
}
the output I get is
SomeText*
When what I want is
*SomeText
Anyone know why this is happening?

By setting float:left on the label you are taking it out of the flow of the document and causing it to render before the span. You need to either set the span to be a block layout and float it left as well or remove the float from the label.
UPDATE:
There's a good description of what floating does to elements and some considerations here: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Another option
form label:after {
content: "*";
}