What is the CSS for the instant after a button is clicked?

5 posts, 0 answers
  1. Adam
    Adam avatar
    6 posts
    Member since:
    Aug 2010

    Posted 13 Jan 2011 Link to this post

    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>
                           </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>
  2. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 14 Jan 2011 Link to this post

    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">
    <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>
                </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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam
    Adam avatar
    6 posts
    Member since:
    Aug 2010

    Posted 14 Jan 2011 Link to this post

    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">
    <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>
  5. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 14 Jan 2011 Link to this post

    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">
    <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>
                </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
    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.
  6. Adam
    Adam avatar
    6 posts
    Member since:
    Aug 2010

    Posted 14 Jan 2011 Link to this post

    Ouch, such a simple solution. I dont know why I didnt try that. Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017