Button with margin-top => right side image is not at same level

[Jaakko Hänninen]

I have code:

<telerik:RadFormDecorator Skin="WebBlue" ID="RadFormDecorator1" runat="server" />
<asp:Button ID="ButtonReport" SkinID="ButtonReportRegen" runat="server" Text="button" />
<asp:Button SkinID="ButtonReportRegen" runat="server" style="margin-top:10px" />

Result is otherwise nice button, but it`s right end is upper than rest of the button. Left side and middle part are 10 pixels down, but not right side.

[Martin]

Hello Jaakko Hänninen,

As you have probably noticed RadFormDecorator renders additional HTML on the client in order to decorate the form controls. In the case with the decorated buttons we create an <a /> and put the priginal button in it. When you apply margin to the button your CSS offsets the button not from its original parent, but from the wrapping a, i.e:

if your HTML is:

<div />
    <input type="button" />

... after the decoration it becomes:

<div />
    <a class="rfdSkinnedButton" />
        <input type="button" />

... and this leads to the distorted looks. To fix this you have to set your custom CSS to the .rfdSkinnedButton class with !important so as to override our CSS:

.rfdSkinnedButton
{
    margin-top: 10px !important;
}

Have a great weekend,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.