Rad Page Layout with SharePoint 2010/2013

[Ali]

Is RadPageLayout compatible with SharePoint 2010/2013 master-page and layouts?

I used below code in SharePoint project , it's working in desktop browsers but in mobile devices i got same desktop view not mobile view.

 

<telerik:RadPageLayout ID="RadPageLayout1" runat="server" HtmlTag="None" GridType="Fluid"

        CssClass="t-rwd-tr t-rwd-overview">
        <telerik:LayoutRow WrapperCssClass="t-rwd-white-row" WrapperHtmlTag="Div" RowType="Container">
            <Rows>
                <telerik:LayoutRow CssClass="t-rwd-row-pad" RowType="Generic">
                    <Content>
                        <h1>
                            Responsive Web Design new</h1>
                    </Content>
                </telerik:LayoutRow>
                <telerik:LayoutRow CssClass="t-rwd-row-pad">
                    <Columns>
                        <telerik:LayoutColumn Span="6" SpanSm="12" SpanXs="12">
                            <p>
                                In times when the sales of tablets and smartphones exceed the sales of desktop PCs,
                                when people use all kinds of mobile devices to browse the web and are allowed to
                                bring their own device to work, ASP.NET developers face the challenge of building
                                web applications targeting all screen resolutions.
                            </p>
                            <p>
                                No surprise “responsive web design” has become such a buzzword—it’s what enables
                                developers to build one website or app and deliver good user experience across all
                                browsers and devices.</p>
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="6" HiddenSm="true" HiddenXs="true" CssClass="t-rwd-right">                       
                                <h5>Percentage of People Accessing the Web From Mobile Devices   </h5>
                                     <img style="max-width: 100%" src="https://commons.wikimedia.org/wiki/File:Dell_Logo.png"
                                alt="Percentage of People Accessing the Web From Mobile Devices" />                
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
            </Rows>
        </telerik:LayoutRow>
    </telerik:RadPageLayout>

 

Best Regards 

Ali

[Dimitar]

Hello,

In order to allow proper RadPageLayout functioning on mobile devices, you should add the following meta tag to the head section of your master page or individual page:

Copy Code

<meta name="viewport" content="width=device-width, intial-scale=1" />

This will allow proper page scaling and resizing based on the current device used for browsing the respective page. Please test if setting the meta tag would allow proper rescaling. For reference how the RadPageLayout is used, you could browse its online demo and help articles. If setting the meta tag does not fix your issue and the provided resources do not help you resolve the issue faced, I would suggest you to send us an isolated runnable sample that could be used for reproducing the issue.

Regards,
Dimitar
Telerik