Im using a list of RadButtons inside of a RadListView. The Site skin is currently set to Telerik in webconfig
I have my custom CSS overrides below. And the RadListView code is below that.
It seems the button default is:
What I want on the buttons is:
The CSS below works perfectly except for the split second after I release the mouse-click. It reverts back to the unwanted centered text, underlined, and a larger font. Just for a second, and then it is fine again.
Any ideas what my CSS is missing?
I have my custom CSS overrides below. And the RadListView code is below that.
It seems the button default is:
- Centered Text
- Underline on Mouseover
- A font that is too large
What I want on the buttons is:
- Left Aligned Text (
text-align: left !important;
) - No underline on Mouseover (
text-decoration: none !important;
) - 10px font at all times
(
font-size: 10px !important;
)
The CSS below works perfectly except for the split second after I release the mouse-click. It reverts back to the unwanted centered text, underlined, and a larger font. Just for a second, and then it is fine again.
Any ideas what my CSS is missing?
.myRadButton.rbToggleButton
{
color: #000;
font-size: 10px !important;
text-decoration: none !important;
}
.myRadButton.rbToggleButton:hover
{
color: #863d02;
}
.myRadButton.rbToggleButton .rbText
{
text-align: left !important;
padding-left: 20px !important;
font-size: 10px !important;
}
.myRadButton.rbToggleButton.rbDisabled,
.myRadButton.rbToggleButton:hover
{
color: #6a6a6a;
font-size: 10px !important;
text-decoration: none !important;
}
<
telerik:RadListView
ID
=
"RadListView1"
runat
=
"server"
AllowPaging
=
"false"
OnItemDataBound
=
"RadListView1_ItemDataBound"
OnDataBound
=
"RadListView1_DataBound"
Width
=
"100%"
OnLayoutCreated
=
"RadListView1_LayoutCreated"
>
<
LayoutTemplate
>
<
div
class
=
"rlv_mainLayout"
>
<
div
id
=
"groupPlaceholder"
runat
=
"server"
>
</
div
>
</
div
>
</
LayoutTemplate
>
<
ItemTemplate
>
<
div
class
=
"rlv_item"
>
<
telerik:RadButton
ID
=
"btnOffice"
runat
=
"server"
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
Width
=
"97%"
>
<
ToggleStates
>
<
telerik:RadButtonToggleState
PrimaryIconCssClass
=
"rbToggleCheckbox"
CssClass
=
"myRadButton"
/>
<
telerik:RadButtonToggleState
PrimaryIconCssClass
=
"rbToggleCheckboxChecked"
CssClass
=
"myRadButton"
/>
</
ToggleStates
>
</
telerik:RadButton
>
</
div
>
</
ItemTemplate
>
<
GroupTemplate
>
<
div
id
=
"OfficeGroup"
runat
=
"server"
class
=
"rlv_group"
>
<
asp:PlaceHolder
ID
=
"itemPlaceholder"
runat
=
"server"
/>
</
div
>
</
GroupTemplate
>
<
GroupSeparatorTemplate
>
</
GroupSeparatorTemplate
>
<
EmptyDataTemplate
>
</
EmptyDataTemplate
>
</
telerik:RadListView
>