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

[Ryan Means]

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

[Georgi Tunev]

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.