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

2 posts, 0 answers
  1. Jaakko Hänninen
    Jaakko Hänninen avatar
    11 posts
    Member since:
    Jun 2009

    Posted 01 Oct 2009 Link to this post

    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.
  2. Martin
    Martin avatar
    585 posts

    Posted 02 Oct 2009 Link to this post

    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:

        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.
Back to Top