Overflow in pageview

5 posts, 0 answers
  1. Luca B
    Luca B avatar
    36 posts
    Member since:
    Oct 2012

    Posted 14 Nov 2011 Link to this post

    Hi there, I have the following problem.
    I created a simple page containing a tabstrip with two tabs, two pageviews and some content for each. The first tab contains a radgrid. All the controls have 100% width set.
    I'd like to have some padding for the pageviews, but if I add it to the pageview's cssclass, the content of the pageview overflows and a horizontal scrollbar appears.

    Is there any way I can fix this?
    Thanks
  2. Luca B
    Luca B avatar
    36 posts
    Member since:
    Oct 2012

    Posted 15 Nov 2011 Link to this post

    Here is some sample code to see the problem.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Autumn.aspx.cs" Inherits="Autumn" %>
    <%@ register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; margin: 0; width: 100%;">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .page{
                height:100%;
                background-color: #dbe6f4;
            }
            .innerpage{
                height:100%;
                background-color: #dbe6f4;
                padding: 3px;
            }
        </style>
    </head>
    <body style="height: 100%; margin: 0; width: 100%;">
        <form id="form1" runat="server" style="height: 100%; margin: 0; width: 100%;">
        <telerik:radscriptmanager id="RadScriptManager1" runat="server">
            <scripts>
                <asp:scriptreference assembly="Telerik.Web.UI" name="Telerik.Web.UI.Common.Core.js" />
                <asp:scriptreference assembly="Telerik.Web.UI" name="Telerik.Web.UI.Common.jQuery.js" />
            </scripts>
        </telerik:radscriptmanager>
        <telerik:radsplitter id="rsMain" runat="server" orientation="Horizontal" width="100%" height="100%" bordersize="0">
            <telerik:radpane id="rpCnt" runat="server" height="100%" scrolling="None">
                <telerik:radmultipage id="rmMain" runat="server" cssclass="page">
                    <telerik:radpageview id="pClienti" runat="server" selected="true" width="100%">
                        <telerik:radsplitter id="RadSplitter1" runat="server" orientation="Horizontal">
                            <telerik:radpane id="RadPane1" runat="server" scrolling="None" height="34px" width="100%">
                                <telerik:radtoolbar id="Radtoolbar1" runat="server" width="100%">
                                    <items>
                                        <telerik:radtoolbarbutton runat="server" text="New">
                                        </telerik:radtoolbarbutton>
                                        <telerik:radtoolbarbutton runat="server" text="Save">
                                        </telerik:radtoolbarbutton>
                                        <telerik:radtoolbarbutton runat="server" text="Delete">
                                        </telerik:radtoolbarbutton>
                                    </items>
                                </telerik:radtoolbar>
                            </telerik:radpane>
                            <telerik:radpane id="RadPane2" runat="server">
                                <telerik:radtabstrip runat="server" id="Radtabstrip1" multipageid="rmClienti">
                                    <tabs>
                                        <telerik:radtab runat="server" text="Generali" selected="true">
                                        </telerik:radtab>
                                        <telerik:radtab runat="server" text="Aggiuntivi">
                                        </telerik:radtab>
                                    </tabs>
                                </telerik:radtabstrip>
                                <telerik:radmultipage id="rmClienti" runat="server" width="100%">
                                    <telerik:radpageview id="RadPageView1" runat="server" width="100%" selected="true" cssclass="innerpage">
                                        <telerik:radgrid id="RadGrid1" runat="server" onneeddatasource="RadGrid1_NeedDataSource">
                                        </telerik:radgrid>
                                    </telerik:radpageview>
                                    <telerik:radpageview id="RadPageView2" runat="server" width="100%">
                                    </telerik:radpageview>
                                </telerik:radmultipage>
                            </telerik:radpane>
                        </telerik:radsplitter>
                    </telerik:radpageview>
                </telerik:radmultipage>
            </telerik:radpane>
        </telerik:radsplitter>
        </form>
    </body>
    </html>

    I am trying to define a page model to be used in the entire application, but I do not want any horizontal scrollbar to appear.

    Thanks
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Nov 2011 Link to this post

    Hello Luca,

    One way you could add padding to the pageviews is by placing a div tag in each pageview and set padding and width to this div. Below is an example of the described approach:
    <telerik:RadMultiPage ID="rmClienti" runat="server" Width="100%">
                            <telerik:RadPageView ID="RadPageView1" runat="server" Width="100%" Selected="true"
                                CssClass="innerpage">
                                <div id="div1" style="padding:20px; width:350px;">
                                PageView1
                                <%--    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
                                        </telerik:RadGrid>--%></div>
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView2" runat="server" Width="100%">
                            PageView2
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>
     
    Greetings,
    Kate
    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
  5. Luca B
    Luca B avatar
    36 posts
    Member since:
    Oct 2012

    Posted 16 Nov 2011 Link to this post

    Hello Kate, thanks for your reply.
    I tried your suggestion but I got the exact same result. If I use a fixed width for the DIVs everything works, but I need them to be 100% of the width of the page, as in the code I posted yesterday.
    Some other info: inspecting the widths of the various elements in Firebug I see that the RadSplitter div is actually sized as the whole page, ignoring the padding value. So, on my 1280x1024 screen I get a 1280 pixels wide RadSplitter div, while it should be 1274 pixels. The same applies to height as well.

    Thanks
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Nov 2011 Link to this post

    Hello Luca,

    Another approach that I could suggest is that you try setting the different values of the Scrolling property of the RadPane as implemented in the following demo.

    All the best,
    Kate
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017