iframe height issue

[sambeauvois]

Hello, I'm using the last tag of zoid and I think I'm using it correctly.

I took the code of the zoid.iframe.min.js file and copied it in a file In this file I added this code

var CarWidget = zoid.create({
    tag: 'carwidget',
    url: '/Widgets/Car',
   
	autoResize: {
    width: false,
    height: true
},

dimensions: {
    height: '100%',
    width: '100%',
  },
	queryParam: true,
	props: {
		carValueVATIncluded: {
			type: 'number',
			required: false, 
			queryParam: true 
		},
		source: {
			type: 'string',
			required: false,
			queryParam: true 
		}
	}
});

I referenced this file in my widget page and in my "parent page"

in my parent page I added

<div id="widgetcontainer"></div>

<script>
CarWidget({
    carValueVATIncluded:60000,
	source:'sam'
}).render('#widgetcontainer');
</script>

My problem is that I always have a vertical scrollbar (tested in chrome, firefox and edge)

I see that there is a height on my rendered component

but it's 38pixels too small to make the scrollbar disapears.

I have the exact same result if I set the height dimension in pixels

dimensions: {
    height: '500px',
    width: '100%',
  },

Is this a zoid issue or am I using it wrong ?

[sambeauvois]

I just noticed that if I add the css rule

   html, body {
            overflow: hidden;
        }
        body {
            height: 100%;
            width: 100%;
        }

In my child page (in my widget) It's working with a small issue (my select is not completely visible)

EDIT :: it's working if I use

   body {
            height: 100%;
            width: 100%;
 margin: 0;
        }

or if I use a css reset (if I use the css of bootstrap it's working fine)

I think this should be part of the documentation

[mnicpt]

@sambeauvois Sorry no one has had a chance to respond to this. Do you have a link to this demo? I am curious to how the container is styled and any containers around it.

[mnicpt]

@sambeauvois Were you able to resolve?