krakenjs / zoid

Cross domain components
Apache License 2.0
2.02k stars 248 forks source link

iframe height issue #332

Open sambeauvois opened 4 years ago

sambeauvois commented 4 years ago

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)

image

I see that there is a height on my rendered component image

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 commented 4 years ago

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) image

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 commented 3 years ago

@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 commented 3 years ago

@sambeauvois Were you able to resolve?