How to fit an iFrame to the user screen

I'm working on a screen that displays an iFrame through a Container (which is placed inside the DublinBase\Layout). The issue that I experience is that the template sets the DublinBase\Layout webblock height to about 20% of the screen which causes the iFrame default height of 100% not to cover all screen. Only fixed height in px does.

Now what I tried to do, is finding a way to calculate the height of the current screen, and use that to calculate the height for the iFrame. But I cannot find a way to use JavaScript (in Webapp) to calculate the screen height.

Does anyone knows how to approach this situation?

thank you in advance.

Hi Johannes,


Shouldn't it be easier to create a new layout web block for that specific screen? Just clone the DublinBase\Layout and adapt it to your needs, the use it in your screen.


Cheers,

Tiago.

Tiago Gafeira wrote:

Hi Johannes,


Shouldn't it be easier to create a new layout web block for that specific screen? Just clone the DublinBase\Layout and adapt it to your needs, the use it in your screen.


Cheers,

Tiago.


Hi Tiago,

Didn't think of that. I'll give it try. I'll let you know if worked out.

Johannes Schneider wrote:

I'm working on a screen that displays an iFrame through a Container (which is placed inside the DublinBase\Layout). The issue that I experience is that the template sets the DublinBase\Layout webblock height to about 20% of the screen which causes the iFrame default height of 100% not to cover all screen. Only fixed height in px does.

Now what I tried to do, is finding a way to calculate the height of the current screen, and use that to calculate the height for the iFrame. But I cannot find a way to use JavaScript (in Webapp) to calculate the screen height.

Does anyone knows how to approach this situation?

thank you in advance.


Hi John,


You can hide unwanted space by using CSS at its page-level even if it is a dublin layout.

to hide  Dublin menu 

use this code


.Menu {

 display: none;

}


to make 80% to 100%

use this code


.Content.ThemeGrid_Wrapper {


  left: 0;

}



hope it will solve your problem

thanks,

Pankaj