-
- Notifications
You must be signed in to change notification settings - Fork 98
Open
Description
Hello,
In my @vue/cli 4.0.5 app I need in in dialog modal to show details page with Cancel, Submit buttons.
Also I added checkbox clicking on which hidden at bottom of the content wysiwyg editor
must be shown and focused.
As details info can be rather big I use auto scrolling on the content area.
I use ocus directives and https://github.com/rigor789/vue-scrollto plugin(I have ^2.19.1), but it
works different I expect:
Hidden area with the wysiwyg editor is opened and scrolled at top, but not at bottom, as I need.
Also wysiwyg editor is not focused. I do :
<div class="modal-body flexbox-item fill-area content flexbox-item-grow simple_bordered_block" v-if="draggableTask"> <div class="fill-area-content flexbox-item-grow" style="overflow-y: auto; max-height: 500px; " id="draggable_task_container"> <div class="card-title p-1 m-1"> <h4 class="task_title mb-1 pbR-3">{{ draggableTask.name }}</h4> <div class="row_content_left_aligned"> CONTENT... </div> <p class="pre-formatted m-3 description-text" v-html="draggableTask.description"></p> <dl class="block_2columns_md m-3" v-show="fillInfoText"> <!-- By default hidden area --> <dt class="horiz_divider_left_13"> <label class="col-form-label" for="draggableTaskInfo">Info :</label> </dt> <dd class="horiz_divider_right_23"> <wysiwyg v-model="draggableTaskInfo" ref="draggable_task_info_editor" /> </dd> </dl> </div> </div> </div> <section class="modal-footer form-row row_content_right_aligned mb-3"> <input class="editable_field custom-control-input" type="checkbox" value="1" style="width: 50px;padding-left: 60px;" id="fillInfoText" v-model="fillInfoText" :checked="fillInfoText" v-on:change="changeFillInfoText()" <!-- CHECKED BOX TO SHOW EDITOR--> > <label class="custom-control-label mb-2" for="fillInfoText" >You can fill info text </label> <button type="button" class="btn btn-secondary btn-sm m-2" @click.prevent="cancelTaskPanel()"> <i :class="'i_link '+getHeaderIcon('cancel')"></i>Cancel </button> <button @click.prevent="changeTaskStatus()" type="button" class="btn btn-primary btn-sm m-2 ml-4 mr-4"> <i :class="getHeaderIcon('save')"></i>Submit </button> </section> <script> ... import wysiwyg from "vue-wysiwyg" ... let VueScrollTo = require('vue-scrollto') Vue.use(VueScrollTo) Vue.use(VueScrollTo, { container: "body", duration: 500, easing: "ease", offset: 0, force: true, cancelable: true, onStart: false, onDone: false, onCancel: false, x: false, y: true }) export default { directives: {focus: focus}, ... data() { return { fillInfoText: false, focused: false, ... methods: { changeFillInfoText() { this.focused= this.fillInfoText // setting focused let element= this.$refs.draggable_task_info_editor // ref to my editor let VueScrollTo = require('vue-scrollto') let options = { container: '#draggable_task_container', // that is scrolling div easing: 'ease-in', offset: -60, // I tried to change this parameter to different vaLues, trying to make scroll at top of page, but failed force: true, cancelable: true, x: 100, // I tried to change this parameter to different vaLues, trying to make scroll at top of page, but failed y: 50. // I tried to change this parameter to different vaLues, trying to make scroll at top of page, but failed // x: false, // y: true } let duration= 200 let cancelScroll = VueScrollTo.scrollTo(element, duration, options) } // changeFillInfoText How to make it working ?
Thanks!
Metadata
Metadata
Assignees
Labels
No labels