Style Padding Margin not used in Rotator?

2 posts, 0 answers
  1. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 21 Sep 2012 Link to this post

    I'm seeing that my rotator is not using all of the style settings. I wrap the control in a Div with the following class:

    .messageText
    {
        border: 1px solid black;
        width: 838px;
        height: 200px;
        background-color: #fff;
        color: #666;
        font: normal 11px Arial, Verdana, Helvetica, Sans-serif;
        text-align: justify;
        padding: 4px;
        margin: 5px;
    }

    It seems to respect everything except padding and margin which don't show up anywhere when viewed with Firebug.

    Bug or feature?

    Thanks!
  2. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 26 Sep 2012 Link to this post

    Hi,

    Hi, I have tested your code and it works es expected. I have increased drastically margin/padding values and it was respected by the wrapping div, which has now bigger padding and margins. Attached is rotator.gif showing the result in the browser and FireBug showing padding and margin respected. I have tested with the following code:

    <head runat="server">
        <title></title>
        <style type="text/css">
            .messageText {
                border: 1px solid black;
                width: 838px;
                height: 200px;
                background-color: #fff;
                color: #666;
                font: normal 11px Arial, Verdana, Helvetica, Sans-serif;
                text-align: justify;
                padding: 40px;
                margin: 50px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="messageText">
            <telerik:RadRotator runat="server" ID="RadRotator1" FrameDuration="6000" Width="312px"
                RotatorType="Buttons" ItemWidth="120px" Height="134px" ItemHeight="120px" EnableEmbeddedSkins="true"
                Style="display: inline-block;">
                <Items>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <img src="http://userserve-ak.last.fm/serve/500/11611283/Metallica+Magnetyczna__2790094.jpg"
                                alt="" width="120" height="120" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <img src="http://userserve-ak.last.fm/serve/500/11611283/Metallica+Magnetyczna__2790094.jpg"
                                alt="" width="120" height="120" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <img src="http://userserve-ak.last.fm/serve/500/11611283/Metallica+Magnetyczna__2790094.jpg"
                                alt="" width="120" height="120" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                    <telerik:RadRotatorItem>
                        <ItemTemplate>
                            <img src="http://userserve-ak.last.fm/serve/500/11611283/Metallica+Magnetyczna__2790094.jpg"
                                alt="" width="120" height="120" />
                        </ItemTemplate>
                    </telerik:RadRotatorItem>
                </Items>
            </telerik:RadRotator>
        </div>
        </form>
    </body>
    </html>


    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top