Buttons with style display:block render both the orriginal button and a styled button

2 posts, 0 answers
  1. Ryan Means
    Ryan Means avatar
    32 posts
    Member since:
    Dec 2006

    Posted 22 May 2009 Link to this post

    I have a css class that sets the style display:block on all buttons inside a div so that the buttons stack on top of each other instead of side by side.  When I also have the RadFormDecorator styling buttons, both the unstyled input button and the styled button appear.

    <div class="VerticalButtonList">  
        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" Width="60px" /> 
        <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" Width="60px" /> 
        <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" Width="60px" /> 
    </div> 
    .VerticalButtonList input[type=submit]  
    {  
        display:block;  
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 25 May 2009 Link to this post

    Hi Ryan Means,

    Applying display:block over a decorated element will break its styling, because in order to style the controls, RadFormDecorator hides the original ones.
    In scenario like yours, I suggest to use BR tags with style=clear:both for achieving the same effect:

    <asp:Button ID="btnSave" runat="server" Text="Save" Width="60px" /> 
    <br style="clear: both" /> 
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="60px" /> 
    <br style="clear: both" /> 
    <asp:Button ID="btnDelete" runat="server" Text="Delete" Width="60px" /> 


    All the best,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top