All UI-Components appear left aligned
Mungo64 opened this issue · comments
Version
toast-ui.vue-image-editor 1.0.2
"@toast-ui/vue-image-editor": "^1.0.2",
"axios": "^0.18.1",
"moment": "^2.24.0",
"vue": "^2.6.6",
"vue-router": "^3.0.1",
"vuetify": "^1.5.5",
"vuex": "^3.1.0"
Development Environment
windows 10 - 64 , chrome
when the page with the editor opens it looks like this:
All elements are on the left side of the screen
<template>
<v-container class="imageEditorApp">
<tui-image-editor :include-ui="useDefaultUI" :options="options"></tui-image-editor>
</v-container>
</template>
<script>
import { ImageEditor } from '@toast-ui/vue-image-editor';
export default {
components: {
'tui-image-editor': ImageEditor
},
data() {
return {
useDefaultUI: true,
options: { // for tui-image-editor component's "options" prop
usageStatistics: false,
cssMaxWidth: 700,
cssMaxHeight: 500,
menuBarPosition: 'bottom'
}
};
}
}
</script>
Hi @Mungo64, verify that you have installed all the css and js files of vue-image-editor
.
This appears due to the css style issue.
@naveenkumarmark
Thanks, that pointed me in the right direction. Actually i was not aware, that i had to install the non vue image editor too.
npm install --save tui-image-editor
The solution was to add this two lines before the editor import command
.....
// Load Style Code
import 'tui-image-editor/dist/tui-image-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
...
import { ImageEditor } from '@toast-ui/vue-image-editor';