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

RadPageLayout detects wrong screensize and viewport

12 Answers 226 Views

PageLayout

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

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,
        }

RadPageLayout detects wrong screensize and viewport

12 Answers, 1 is accepted