How to achieve 'fullscreen' layout

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

How to achieve 'fullscreen' layout

Olaf Krueger
Hi,
I just set the width and height of a group to "100%" in order to let the
content fit the browser window but this doesn't work for me. Especially
after browser resizing.
This is an example of what I mean with "fullscreen" [1].
It seems that in this example the fullscreen layout is achieved by this [2].

How can we achieve a fullscreen layout with Royale?

Thanks,
Olaf

[1] http://bl.ocks.org/jfsiii/5380802
[2]
html, body, .viewport {
    width: 100%;
    height: 100%;
    margin: 0;
}



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: How to achieve 'fullscreen' layout

Gabe Harbs
There’s two ways to go about keeping full size —  especially in conjunction with browser resize:

1. Add a BrowserResizeHandler bead to your application.
2. Use a “Flex” layout bead in your main view. (“flex” CSS with a flex-grow on the main content will cause it to stick to the full size)

These two methods can be used in tandem.

Someone really should write this up for users….

HTH,
Harbs

> On Jan 3, 2018, at 3:47 PM, Olaf Krueger <[hidden email]> wrote:
>
> Hi,
> I just set the width and height of a group to "100%" in order to let the
> content fit the browser window but this doesn't work for me. Especially
> after browser resizing.
> This is an example of what I mean with "fullscreen" [1].
> It seems that in this example the fullscreen layout is achieved by this [2].
>
> How can we achieve a fullscreen layout with Royale?
>
> Thanks,
> Olaf
>
> [1] http://bl.ocks.org/jfsiii/5380802
> [2]
> html, body, .viewport {
>    width: 100%;
>    height: 100%;
>    margin: 0;
> }
>
>
>
> --
> Sent from: http://apache-royale-users.20374.n8.nabble.com/

Reply | Threaded
Open this post in threaded view
|

Re: How to achieve 'fullscreen' layout

Olaf Krueger
Hi Harbs,
could you provide some code snippets, I'd really appreciate it ;-)

Thanks,
Olaf





--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: How to achieve 'fullscreen' layout

Gabe Harbs
Start by trying to add this to your main app MXML:

    <js:beads>
        <js:BrowserResizeHandler />
    </js:beads>
On Jan 3, 2018, at 4:10 PM, Olaf Krueger <[hidden email]> wrote:

Hi Harbs,
could you provide some code snippets, I'd really appreciate it ;-)

Thanks,
Olaf





--
Sent from: http://apache-royale-users.20374.n8.nabble.com/

Reply | Threaded
Open this post in threaded view
|

Re: How to achieve 'fullscreen' layout

Alex Harui-2
In reply to this post by Gabe Harbs


On 1/3/18, 12:56 PM, "Gabe Harbs" <[hidden email]> wrote:

>There’s two ways to go about keeping full size —  especially in
>conjunction with browser resize:
>
>1. Add a BrowserResizeHandler bead to your application.
>2. Use a “Flex” layout bead in your main view. (“flex” CSS with a
>flex-grow on the main content will cause it to stick to the full size)
>
>These two methods can be used in tandem.
>
>Someone really should write this up for users….

Or even create a FullScreenApplication class in the Express package.

I think it would be something like:

Class FullScreenApplication extends Application
{
  Override protected function initialize()
  {
      super.initialize();
      addBead(BrowserResizeListener);
      initialView.percentWidth = 100;
      initialView.percentHeight = 100;
  }
}

HTH,
-Alex

>
>> On Jan 3, 2018, at 3:47 PM, Olaf Krueger <[hidden email]> wrote:
>>
>> Hi,
>> I just set the width and height of a group to "100%" in order to let the
>> content fit the browser window but this doesn't work for me. Especially
>> after browser resizing.
>> This is an example of what I mean with "fullscreen" [1].
>> It seems that in this example the fullscreen layout is achieved by this
>>[2].
>>
>> How can we achieve a fullscreen layout with Royale?
>>
>> Thanks,
>> Olaf
>>
>> [1]
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fbl.ocks.o
>>rg%2Fjfsiii%2F5380802&data=02%7C01%7Caharui%40adobe.com%7C5ff1ee244dba431
>>c4f8b08d552ec69ec%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365060976
>>95901903&sdata=KdtXx65SawjiYxmkb%2F2EiBVePU5WCiXuw6PHPBn%2BjP0%3D&reserve
>>d=0
>> [2]
>> html, body, .viewport {
>>    width: 100%;
>>    height: 100%;
>>    margin: 0;
>> }
>>
>>
>>
>> --
>> Sent from:
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-ro
>>yale-users.20374.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7C5ff
>>1ee244dba431c4f8b08d552ec69ec%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>7C636506097695901903&sdata=nzAhlCHxSNipOj4ab%2BQufD4yTjyLPn4aEkCcTG90fW8%
>>3D&reserved=0
>

Reply | Threaded
Open this post in threaded view
|

Re: How to achieve 'fullscreen' layout

Olaf Krueger
In reply to this post by Gabe Harbs
Thanks Harbs and Alex,
the BrowserResizeListener bead basically works for me, but at some point,
there are always scrollbars visible.

I'll investigate it later...

Thanks,
Olaf



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/