I have a bootstrap v3 modal, like in the documentation.
When I open the modal for a first time ('Launch demo model' button) a vertical scroll bar is in a top position. If I scroll down and click 'Cancel' in modal it will close. It is ok. But if I open modal again it will be already scrolled down. And this is case which I would like to avoid. What should I do to open modal in a top position?
working in production
$('#my-modal').on('shown.bs.modal', function () {
$('#my-modal').scrollTop(0);
});
I think you would need to to use the events that fire when the modal is opened to reset the scrolling.
Something like:
$('#myModal').on('shown.bs.modal', function () {
window.scrollTo(0,0);
});
Depending on your page you might wantto use some jQuery or animations:
$('#myModal').on('shown.bs.modal', function () {
$('html, body').animate({
scrollTop: $("#myModal").offset().top
}, 1000);
});
I have resolved it by setting a focus on the top input element om my modal:
$("#RuleDialog").on('shown.bs.modal', function() {
$('#LinkedRuleName').focus();
});
Bootstrap 3 modal
$modal.off('shown.bs.modal').on('shown.bs.modal', function() {
if ($modal.scrollTop() > 0) {
$modal.scrollTop(0)
}
}
Here's how I got this functionality working . First set up the shown event of the modal .
$(document).ready(function () {
var modalMatrix = $('#modalMatrix');
modalMatrix.on('shown.bs.modal', function () {
modalMatrix.find('.modal-body').scrollTop(0); // This is important , for me the scrollbar is in the body of the modal .
});
});
Then I show the modal , as usual .
$('#modalMatrix').modal('show');
Related
In VueJS, I'm using v-tooltip (https://github.com/Akryum/v-tooltip) for popovers.
In order to close a popup, they provide a directive called 'v-close-popover' which I can assign to a button/link inside the popover to close the popup. This works well.
However, I have a requirement where I need to close this popup from a Vue method. But I dn't know how to trigger closing of the popover from the method.
This is how you can achieve this.It will display tooltip on mouseOver event and remove on mouseLeave event.
In template->
<i
id="requiredIcon"
aria-hidden="true"
v-tooltip="{content: 'Required option is not available for this question.', show: isOpen, trigger: 'manual'}"
#mouseover="showTooltip"
#mouseleave="removeTooltip"
></i>
In Script->
data() {
return {
isOpen: false,
};
},
methods:{
showTooltip() {
this.isOpen = true;
},
removeTooltip() {
this.isOpen = false;
}
}
In case anybody else stumbles upon this issue, the v-popover component has a hide method. So if you were to place a ref on your popover component then you can access the hide method from it and call it :)
I have added navigation to the drawer, everything works fine except the case when the link is the same as the page is. The drawer left open after clicking on the link and it isn't obvious for the visitor that the page is the current page.
I have tried to do something like this #click.stop="(this.router.path != '/' ?
this.router.push('/') : drawer = !drawer)" Vue doesn't rapport any mistake and the code doesn't work.
Where am I wrong?
The drawer data key is looking for a boolean, if it's truthy the navigation drawer will show. So, you can add #click="drawer = false" to your menu links, and it will close the draw when any link is clicked.
Example in the docs: https://vuetifyjs.com/components/navigation-drawers#example-6
I handled this by making the drawer in my app a child of the route that uses it. The isOpen property is managed in the parent. I pass isOpen as a prop to the drawer and emit open and close events as appropriate.
Oh, I also found that timeouts are necessary to ensure the open / close animations work correctly. Someone please let me know if you found a better way to handle animations as this feels a little wonky.
I handle a few other things, like right/left justify and a return route, but ignore the noise if it isn't helpful.
Here's a parent loading the component
<my-drawer
:iconName="'my_icon'"
:isOpen="drawerIsOpen"
:justify="'right'"
:returnRoute="'home'"
#close="drawerIsOpen = false"
#open="drawerIsOpen = true"
>
// ...
</my-drawer>
Here are the methods from within the drawer component:
data() {
return {
closeDelay: 500,
width: 0,
};
},
methods: {
closeBtnClick() {
this.$emit('close');
setTimeout(() => { this.$router.push(this.returnRoute); }, this.closeDelay);
},
mounted() {
setTimeout(() => { this.$emit('open'); }, this.closeDelay);
},
How can i close a vuetify's dialog opened without an activator, when the user press the ESC key on the keyboard?
Add #keydown.esc="dialog = false" to v-dialog component
<v-dialog v-model="dialog" #keydown.esc="dialog = false"></v-dialog>
data: () => ({
dialog: false
}),
Working example:
https://codepen.io/anon/pen/BJOOOQ
Additionally, if using dialog as custom component then possibly we need to emit input event:
<template>
<v-dialog :value="value" #keydown.esc="$emit('input')">
...
This is the only way I was able to get it to work
mounted() {
// Close modal with 'esc' key
document.addEventListener("keydown", (e) => {
if (e.keyCode == 27) {
this.$emit('close');
}
});
},
this code maybe can help you
mounted() {
let self = this;
window.addEventListener('keyup', function(event) {
// If ESC key was pressed...
if (event.keyCode === 27) {
// try close your dialog
self.advanced_search = false;
}
});
},
the same principle as adding keypress binding to any vue component should work - add the following code to the v-dialog component :
#keydown.esc="dialog = false"
working example ( note the close button click event handler as well )
https://codepen.io/yordangeorgiev/pen/WBeMGq
While the solutions others have mentioned work, there still are conflicts with the bounce animation, making it not work after playing it by clicking outside the dialog, etc.
Setting the no-click-animation property also fixes the animation when closing as otherwise it plays both the close and bounce animation:
<v-dialog v-model="dialog" #keydown.esc="dialog=false" no-click-animation></v-dialog>
#keydown.esc not working with my project. As far as I see it's good for Vue2 projects.
Working script:
mounted() {
document.addEventListener("keydown", (e) => {
if (e.key === 'Escape') {
this.$emit('close');
// Or any other way you want to close your modal
}
})
}
What you want to use is a Key Modifier. You can use v-on:keyup.esc directive on your dialog to detect if the escape key is detected.
Read this for more information about Key Modifiers
A brief description is, basically when i click on a "Submit" button per say, an alert should pop out. So I'm using Simplert for Vue to do that.
The project I'm currently doing is a Single Page Application (SPA) so this is where the problem is. The alert only covers the component that I'm in and does not cover the whole page.
Problem:
Is there a way for the alert to cover the whole page?
As I see it you have at least two options to solve it: one dirty and quick and the other a little bit more design oriented
Option 1
override the css position property of the mask:
from: position: absolute to: position: fixed
Option 2
Globally declare the Simplert component, since probably you will use it a lot
// somewhere in your main/app/bootsrap.js file
Vue.compoment('simplert', require('vue2-simplert'))
Now in your root component or where you have your main <router-view> component (if you are using vue-router):
// root component
<template>
<div>
<simplert :useRadius="true" :useIcon="true" ref="simplert"/>
<router-view></router-view>
</div>
</template>
<script>
export default {
mounted () {
this.$on('trigger:simplert', (data) => this.triggerSimplert(data))
},
methods: {
triggerSimplert (data) {
this.$refs.simplert.openSimplert(data)
}
}
}
</script>
Now in any component you need to trigger the modal simply do:
...
someMethod () {
let obj = {
title: 'Custom Function',
message: 'Click close to trigger custom function',
type: 'info',
onClose: this.onClose
}
this.$emit('trigger:simplert', obj)
}
...
Hope this helps.
I have a switch component on DrawerLayoutAndroid component. When I drag the switch component, drawer component is being slided.
How do I ensure when i drag switch, drawer panel is in blocked mode.
[EDIT]
Attaching the mocks below
Mocks
Usually a tap on the Switch will toggle the switch state. If you want to make it drag as well and not let the other view become the responder, you can do that by implementing GestureResponseHandler. Something like this.
const RespondHandler = {
onStartShouldSetResponder: function (e) {
return true;
},
onResponderGrant: function (e) {
return true;
}
};
<Switch {...RespondHandler}/>