Page tiny on phone

8 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 30 Jun Link to this post

    Okay, we just undertook a HUGE project of using the PageLayout for our application to make things 'responsive'. After the first phase roll out, things do NOT look good on phones. They page elements are actually smaller than what they were in the older version? What the heck did we do wrong?

    It is showing the small/medium version, but there is a TON of space to the right that I would expect to NOT be there. Any ideas?

  2. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 30 Jun Link to this post

    Okay I added the following meta tag and things look better...

     

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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 30 Jun Link to this post

    Okay, in Google on the iPad it looks 'bad' still.....Showing the large/x-large version vs the medium....
  5. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 30 Jun Link to this post

    The portrait version looks even worse on the iPage. Things are right aligned. I thought this was cross browser/platform. I spent 100's of hours updating our pages to use this control....not to mention the $ to purchase/renew this. So there better be an easy! fix for this. Thanks!
  6. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 30 Jun Link to this post

    This is SO bizzare. Refreshed both Safari and Chrome on iPad and they book look GREAT in portrait now, but in landscape they are showing the lg/xl version of the pages really tiny in the upper left corner. Why are they not showing the medium version. It is an iPad mini.

    Things look great both directions on my Samsung tablet. Although when I rotate it I have to refresh the page for it to resize correctly, no big deal. It the iPad mini still has issues in landscape. It is showing the medium looking screen, but small. I can pinch and get it larger, but why does it not show automatically like on the Samsung?

  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 01 Jul Link to this post

    Hello Stephanie,

    We have created a sample project to test the described scenario and we have added there the viewport meta tag as well. We have tested the page on iPad mini and the RadPagelayout worked properly on our side. We have tested the following code:
    <telerik:RadPageLayout ID="Radpagelayout1" runat="server" GridType="Fluid">
        <Rows>
            <telerik:LayoutRow>
                <Columns>
                    <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                        <center>
                            Column 1
                        </center>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                        <center>
                            Column 2
                        </center>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                        <center>
                            Column 3
                        </center>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                        <center>
                            Column 4
                        </center>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                        <center>
                            Column 5
                        </center>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                        <center>
                            Column 6
                        </center>
                    </telerik:LayoutColumn>
                </Columns>
            </telerik:LayoutRow>
        </Rows>
    </telerik:RadPageLayout>

    When we rotated the iPad mini to landscape, there were 3 columns, that comes from SpanMd="4" (12/4=3). After rotating to portrait, there was one column, as SpanSm is set to 12.

    The issue with right align were not reproduced as well, all columns were centered. Could you provide us with a live URL, so we will be able to inspect elements if there are not some styles that overwrite centering of columns?

    Regards,
    Magdalena
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 01 Jul in reply to Magdalena Link to this post

    So what is up with this?

    https://www.dropbox.com/s/tqiw5yneu27209w/20160701_084246.jpg?dl=0

    https://www.dropbox.com/s/ivqkobv8ys8a4q5/20160701_084315.jpg?dl=0

     

    You can see that is is NOT right on the iPad mini. Any suggestions?

  9. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 04 Jul Link to this post

    Hello Stephanie,

    We are afraid that the issue is not reproduced on our side. Could you please modify the attached tested sample so the issue will be reproduced? When you open a support ticket you will be able to send back to us the modified version, so we can test it locally and can assist you in more efficient way.

    Regards,
    Magdalena
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017