iframe height does not fill 100% height of parent

[philchass]

I've inserted the editor (full demo) inside a from vuetify The iframe is 50px height! When I inspect source: element.style { min-width: 1024px; min-height: 100%; height: 100%; width: 100%; border: 0px; }

If I set min-height to 500px, it works! How can I fix 100% or a min-height by default?

[philchass]

minHeight prop does not work.

[philchass]

Found a solution → to set a fixed height (800px for instance) to #example parent div and minHeight prop to 700px

[panreach]

I solved it with this:

<template>
    <div id="email-editor-container">
        <div>
            <h1>Vue Email Editor (Demo)</h1>
            <button v-on:click="saveDesign">Save Design</button>
            <button v-on:click="exportHtml">Export HTML</button>
        </div>
        <EmailEditor
            :appearance="appearance"
            :min-height="minHeight"
            :project-id="projectId"
            :locale="locale"
            :tools="tools"
            :options="options"
            ref="emailEditor"
            v-on:load="editorLoaded"
        />
    </div>
</template>

<script>
import {EmailEditor} from 'vue-email-editor'

export default {
    name: 'app',
    components: {
        EmailEditor
    },
    data () {
        return {
            minHeight: '700px',
            locale: 'en',
            projectId: 0, // replace with your project id
            tools: {
                // disable image tool
                // image: {
                //     enabled: false
                // }
            },
            options: {},
            appearance: {
                theme: 'light',
                panels: {
                    tools: {
                        dock: 'right'
                    }
                }
            }
        }
    },
    methods: {
        editorLoaded () {
            // Pass the template JSON here
            // this.$refs.emailEditor.editor.loadDesign({});
        },
        saveDesign () {
            this.$refs.emailEditor.editor.saveDesign(
                (design) => {
                    console.log('saveDesign', design)
                }
            )
        },
        exportHtml () {
            this.$refs.emailEditor.editor.exportHtml(
                (data) => {
                    console.log('exportHtml', data)
                }
            )
        }
    }
}
</script>

<style lang="scss" scoped>
#email-editor-container,
#editor-1 {
    height: 80vh;
}
</style>

But, we're using a custom container and this just represents a list/edit/page view. Maybe this will help?

-Troy

[lucasbesen]

You can find an example here to check how to make it fill 100% height of the parent