Fill content container

ionic-v1
1

Hi,

I wanted to ask if there is a predefined class in ionic that makes a child of the content tag, use up all the available space (so that it completely fills up the content tag).
I want to embed an iframe and I am having trouble figuring out the correct CSS rules. I just cant really get the height property right. Help is appreciated :smiley:

2

As far as I know there is no such style in the default ionic stylesheet, so you’ll probably have to specify your own.

It seems like you’ll just want to set width:100% and min-height:100% on the iframe to get it to fill the content area.

3

@tim thx that worked with the iframe. It doesnt work with a div though (which i luckily dont need), but i was always trying with a div (I thought it would behave the same as the iframe).

4

What is your final code @johndoe? I’ve been fooling around with the same problem except in my case, a directive inside the content container needs to gain full width & height (it’s a LeafletJS map).

Any tips on how to do this? Setting width and height on 100% seems to be working in the browser but it doesn’t on my iPhone running iOS 7

5

Try this in your content:

.superfill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
4 Likes
6

Like I said just setting width and height to 100% worked for me. But this only worked with the iframe not with a div for example. Since my knowledge of css is pretty basic, unfortunately I cant tell you why that is.

7

Thanks for the heads up but I’ve tried that already. It’s the same crap over and over again: in the browser (Chrome) it’s all working and when I compile and test it on an iOS device or emulator, the div doesn’t get any height and stops working.

8

Could you try adding this css rule? It might be the scroll container messing up your height:

.scroll {
  min-height: 100%;
}
1 Like
9

@andytjoslin Works in the browser… testing it in iOS as we speak. I’ll get back to you.

10

@andytjoslin It worked! Awesome. Now we’ve got a solution for both DIV’s and iframes in one topic. Thanks!

11

andy’s superfill ignores content’s settings like has-header or padding. Following CSS respects them:

.content > .scroll {
  height: 100%;
}
.content > .scroll > .mydiv {
  height: 100%;
}
1 Like
12

CSS update:

.scroll-content > .scroll {
  height: 100%;
}
.scroll-content > .scroll > iframe {
  min-height: 100%;
}
3 Likes