This is a migrated thread and some comments may be shown as answers.

RadPageLayout detects wrong screensize and viewport

12 Answers 188 Views
PageLayout
This is a migrated thread and some comments may be shown as answers.
BiBongNet
Top achievements
Rank 2
BiBongNet asked on 02 Nov 2014, 11:38 PM
Hi,

I'am using PageLayout and Device Detection framework, version 2014.3.1024 (just released!).

The problem is: PageLayout responds incorrectly with device screen size and viewport of browsers.

For example:

- Set HiddenLg="True" for LayoutColumn, but this column is hidden with browser viewport 1025-1280 (which is actually Medium).
- Set HiddenXl="True" for LayoutColumn, but this column is hidden with browser viewport 1281 and higher (1281-1366 is actually Large, and 1367 and higher is Extra large).

This occurs with all other options and also device screen (I have tested on some mobile phones)... It seems PageLayout is always one step higher than  DeviceScreenSize enum of Detection framework. Looking inside your DeviceScreenSize enum (as pasted below), I think the problem is obviously there (perhaps?): This enum version is without ExtraSmall while PageLayout does have ExtraSmall option (Xs). So wrong mapping of value between PageLayout and DeviceScreenSize enum might cause one step different among the two.

The enum should be:

ExtraSmall = 0,
Small = 1,
Medium = 2,
Large = 3,
ExtraLarge = 4,

Please check if this is the problem.

By the way, I would suggest the following feature:

HiddenUp, HiddenDown (or whatever the name is)

In many cases (if not to say most cases), you want to set hidden to an element from a point upward or downward.
Let's say:

- Case HiddenDown:
You want to set hidden for a div with Medium, Small and ExtraSmall (display on Large and ExtraLarge), now you have to set these:
HiddenMd="True" HiddenSm="True" HiddenXs="True"

With HiddenDown="Md" would cover them all.

- Case HiddenUp:
You want to set hidden for a div with Medium, Large and ExtraLarge (display with ExtraSmall, Small), now you have to set these:
HiddenXl="True" HiddenLg="True" HiddenMd="True"

With HiddenUp="Md" would cover them all.

Actually, I have developed these features myself as additional functions of your PageLayout and they are working well, saving time and with less code.

Hope that this will come with the next version.

Thank you.
(And sorry for my bad English :()



============= DeviceScreenSize enum of Detection framework =============================================
    // Summary:
    //     The device screen size based on the its dimensions in CSS pixels
    //
    // Remarks:
    //     The default ranges are: Small (to 600) CSS pixels Medium (601-1024) CSS pixels
    //     Large (1025 - 1366) CSS pixels ExtraLarge (over 1366) CSS pixels
    public enum DeviceScreenSize
        {
        Small = 0,
        Medium = 1,
        Large = 2,
        ExtraLarge = 3,
        }

12 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 06 Nov 2014, 06:41 AM
Hi.

You are right about the inconsistency -- we'll take care of that.

And the suggestion about PropUp / PropDown is actually quite sound. It's worth checking out. I am bookmarking this thread and keep you informed.

Regards,
Ivan Zhekov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
BiBongNet
Top achievements
Rank 2
answered on 07 Nov 2014, 11:13 PM
Hi,

Thank you for your reply.

Will this be fixed in the next version or available with internal build?
0
Ivan Zhekov
Telerik team
answered on 13 Nov 2014, 06:15 AM
Hello.

We haven't yet fixed the issue.

On the other thing, I am still experimenting with the possible API and fluency. Not substantial yet, but it's beginning to take shape.

Regards,
Ivan Zhekov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dana Cobb
Top achievements
Rank 1
Iron
answered on 03 Dec 2014, 05:29 PM
Glad to hear about addressing that inconsistency. Am working even more with these two frameworks, starting another big overhaul this week.

Dana
0
Ivan Zhekov
Telerik team
answered on 08 Dec 2014, 03:07 PM
Dana,

while we haven't yet targeted the issue with viewport mismatch, there is a help article about custom viewport / breakpoint sizes. I think you will find it interesting: http://www.telerik.com/help/aspnet-ajax/detection-framework.html.

By using the approach described there you can "add" the missing viewport size yourself.

Regards,
Ivan Zhekov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dana Cobb
Top achievements
Rank 1
Iron
answered on 08 Dec 2014, 04:18 PM
Thanks Ivan, i had just implemented that last week. I had played with the getScreenSize previously, but i just didn't "get it". Upon revisiting I was able to create breakpoints that exactly mirrored my media queries! Since my work is primarily on dynamically generated pages...this allowed me to make decisions in the code behind that would be reinforced by the css from my media queries. What a great opportunity this is for precise control over the generation of dynamic controls.!


Dana
0
C
Top achievements
Rank 1
answered on 28 Jul 2015, 06:20 PM
Has this been fixed?
0
Peter Filipov
Telerik team
answered on 31 Jul 2015, 12:21 PM
Hi,

We haven't aligned this yet. We are going to discuss how this could be done in best possible way. When we are ready our documentation will be updated. Until then you could use the approach provided by Ivan.

Regards,
Peter Filipov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Peter
Top achievements
Rank 1
answered on 14 Aug 2015, 01:04 PM

Hi 

I just stumbled over this problem too.

As far as I can say the problem is still there (2015-08-14).

In my case it gives good results for Xs, Sm, Lg and Xl,

but the Md (which is detected usually on tablets) is somehow not predictable.

Please fix this as sson as possible.

Thank you

Peter

 

0
Peter Filipov
Telerik team
answered on 19 Aug 2015, 08:04 AM
Hi Peter,

Thank you for your feedback. We are doing our best to align the breakpoints between the controls.

Regards,
Peter Filipov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marco Piumi
Top achievements
Rank 2
answered on 21 Sep 2016, 04:33 PM
The problem exists too.
When will it be corrected?
0
Ivan Danchev
Telerik team
answered on 26 Sep 2016, 03:05 PM
Hello Marco Piumi,

We logged a request for improvement of the PageLayout. Currently it still isn't scheduled for implementation in a specific release, but you can track its status in our Feedback Portal.

Regards,
Ivan Danchev
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
PageLayout
Asked by
BiBongNet
Top achievements
Rank 2
Answers by
Ivan Zhekov
Telerik team
BiBongNet
Top achievements
Rank 2
Dana Cobb
Top achievements
Rank 1
Iron
C
Top achievements
Rank 1
Peter Filipov
Telerik team
Peter
Top achievements
Rank 1
Marco Piumi
Top achievements
Rank 2
Ivan Danchev
Telerik team
Share this question
or