This is a migrated thread and some comments may be shown as answers.

[Solved] What is the CSS for the instant after a button is clicked?

4 Answers 290 Views

Button

This is a migrated thread and some comments may be shown as answers.

Adam asked on 13 Jan 2011, 10:49 PM

CssWorking.png

SplitSecondAfterIReleaseClick.png

AfterClickIsComplete.png

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:

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>

</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>

4 Answers, 1 is accepted

answered on 14 Jan 2011, 09:52 AM

radbutton.zip

Hello Adam,

I have tested your page and on my side there is no problem and it works as expected: normal font-size, no underline on hover.

I think that in your page you have some global styles set to the anchor element and/or span elements. If you have something similar: a:hover {text-decoration: underline;} in your styles, that will affect the button as it is rendered in an anchor tag.

Bellow is a simple sample code showing the normal button behavior, in the head part of the document there is also a global commented CSS styles, I suppose it should be similar to your, you could remove the comment to see the changes:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

/*uncommnet the css to see how globals tyles are changing the default button look and feel*/

/*a

{

font-size: 16px !important;

}

a:hover

{

text-decoration: underline;

}*/

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="false" Width="100%">

<LayoutTemplate>

<div class="rlv_mainLayout">

<div id="groupPlaceholder" runat="server">

</div>

</LayoutTemplate>

<ItemTemplate>

<div class="rlv_item">

<telerik:RadButton ID="btnOffice" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="CheckBox"

>

<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>

</form>

</body>

</html>

You could aslo try to test that code on a single page out of your application to see if the problem still exist. Before testing, be sure that no external CSS files has been applied to the test page.

Attached is also radbutton.zip, where my test has been captured in a video file.

Best wishes,
Bojo
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 14 Jan 2011, 03:55 PM

The problem is not on Hover. It is right AFTER click. It loses the CSS for a second. If you paste the included code into a new project, you will see my issue.

When the button is at width 100%, the text will center for a split second right after the click.

I know the button width doesnt make sense in this scenario, but it does show the issue.

Thanks for the help so far.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.WebForm1" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<style type="text/css">

/*uncommnet the css to see how globals tyles are changing the default button look and feel*/

/*a

{

font-size: 16px !important;

}

a:hover

{

text-decoration: underline;

}*/

.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;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadButton ID="btnOffice" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle"

Skin="Telerik" Width="100%" Text="CheckBox">

<ToggleStates>

<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" CssClass="myRadButton"

Text="test" />

<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" CssClass="myRadButton"

Text="test" />

</ToggleStates>

</telerik:RadButton>

</form>

</body>

</html>

answered on 14 Jan 2011, 04:27 PM

Hi Adam,

Now I can see the problem. It comes form that you are applying the CSS class to the RadButtonToggleSatte, instead to RadButton itself. So in your scenario, when you click the check box, it toggles/changes the CSS class, and for a second the class you have applied is not actually there, so it uses the default CSS from the DLL. In your case you should remove the CSS class to RadButton, and the problem wild be fixed:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.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;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="false" Width="100%">

<LayoutTemplate>

<div class="rlv_mainLayout">

<div id="groupPlaceholder" runat="server">

</div>

</LayoutTemplate>

<ItemTemplate>

<div class="rlv_item">

<telerik:RadButton ID="btnOffice" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="CheckBox"

Width="97%" CssClass="myRadButton">

<ToggleStates>

<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />

<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />

</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>

</form>

</body>

</html>

You could also use CSS classes inside ToggleStates but not to overwrite the default styles, but to apply something specific for your project.

Greetings,
Bojo
the Telerik team