Skip to content

Opening hidden content wysiwyg editor how to scroll to bottom area? #400

@sergeynilov

Description

@sergeynilov

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions