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
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
4 Answers, 1 is accepted
0
Luca B
Top achievements
Rank 1
Rank 1
answered on 15 Nov 2011, 12:38 PM
Here is some sample code to see the problem.
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
<%@ 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
0
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:
Greetings,
Kate
the Telerik team
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
0
Luca B
Top achievements
Rank 1
Rank 1
answered on 16 Nov 2011, 04:43 PM
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
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
0
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
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