Telerik Forums / UI for ASP.NET AJAX Forum / TabStrip /

Overflow in pageview

Telerik UI for ASP.NET AJAX
Resources Buy Try

5 posts, 0 answers

Luca B

41 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
Luca B

41 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
Kate
Admin

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
Luca B

41 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
Kate
Admin

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

Overflow in pageview

Luca B

Luca B

Kate

Luca B

Kate