Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Full Bleed Outside WebPage?

Hello! Could you clarify please what exactly doesn't work.

Jerry Levine
Posts: 0
Joined: Tue Oct 09, 2012 6:16 am

Full Bleed Outside WebPage?

Marina - Sorry, the link I posted above shows what happens when I set a div to height 100%.

I've deleted the "div" from the CSS and you should see what's happening.

Jerry Levine
Posts: 0
Joined: Tue Oct 09, 2012 6:16 am

Full Bleed Outside WebPage?

So now you can see what happens. I have an external webpage being loaded within Tiggzi. On width, it's responsive and fills 100%. On height, it looks like it's only going to 150px based on the container, and none of my CSS changes are allowing me to change the height.

Jerry Levine
Posts: 0
Joined: Tue Oct 09, 2012 6:16 am

Full Bleed Outside WebPage?

I think I've got it. I sent min-height: to 85% and it seems to finally override everything.

Jerry Levine
Posts: 0
Joined: Tue Oct 09, 2012 6:16 am

Full Bleed Outside WebPage?

That's no good either...now it's overriding the other page, I suppose?

Jerry Levine
Posts: 0
Joined: Tue Oct 09, 2012 6:16 am

Full Bleed Outside WebPage?

well, I'm closer. I'll post again if I can't clean this up.

Tooba Atif
Posts: 0
Joined: Fri Apr 04, 2014 3:07 am

Full Bleed Outside WebPage?

I am having the same issue..
Iframe is just showing the page on 1/4th of the screen but i want it to fill the screen whether its iphone or ipad screen.

Any help please?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Full Bleed Outside WebPage?

Hi Tooba,

Here is a solution for you:

1 Open HTML component properties.

2 Set dimensions: as "auto" and "auto". http://prntscr.com/4wlwvb/direct

3 Set for this HTML component "Class Name" property as "fullScreen" http://prntscr.com/4wlwpp/direct

4 Create new CSS. And fill it by following code:

pre

.fullScreen{
position: absolute;
left: 0px;
right: 0px;
/* you need to adjust it for header /
top: 54px;
/ you need to adjust it for footer */
bottom: 54px;
width: auto;
height: auto;
}

/pre

5 Click "Edit HTML" for this HTML component and fill it with following code: http://prntscr.com/4wlxir/direct

pre

<iframe src="http:&#47;&#47;appery&#46;io" width="100%" height="100%"</iframe

/pre

That's all.

Regards.

Tooba Atif
Posts: 0
Joined: Fri Apr 04, 2014 3:07 am

Full Bleed Outside WebPage?

Hi Yurii,

I have tried this solution already.. have seen this in other link's but still i wont get the full screen on the page.
I have tried this as well as i was unable to scroll the screen on the phone after publishing the ios app.
-webkit-overflow-scrolling:touch; overflow: auto;

this is my css

.htmlOtherSite {
position: absolute;
top:5px; left:0; right:0; bottom:5px;

Code: Select all

 border: 0; 
 width:auto;  
 height:auto; 

/* -webkit-overflow-scrolling:touch; overflow: auto;*/

}

Please advise or tell me if you require the login info for checking this yourself.

Thanks

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Full Bleed Outside WebPage?

Tooba,

Please specify your app public link and steps to reproduce this problem.

We will take a look.

Regards.

Return to “Issues”