Modal is hiding automatically after showing another modal in vuejs. - vuejs2

I am using import bModal from 'bootstrap-vue/es/components/modal/modal'; bootstrap-modal
I have following User Interface in Modal, here I need to choose department from a dropdown(getting item list using AJAX). Here I want to make it easy to add new department by clicking button beside the dropdonw - for such popup modal with UI.
In vuejs i have code for main modal -
showModal () {
this.clearForm();
this.formInfo.formSubmitted = false;
this.$refs[this.modalInfo.id].show();
}
this is working fine. Now on click event on green button, another modal should be opened over currently opened window. Unfortunately, currently modal is get hidden and new model opened. I have following code for extra modal-
showExtraModal:function(){
this.$refs['extraModal'].show();
}
How can I solve this problem in vue js.

Seems to be a limitation of Bootstrap (see docs):
Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
Since bootstrap-vue is just a wrapper around Bootstrap, the same limitation will likely apply.
I had a similar problem with pure Bootstrap; IIRC I solved it by altering the content of the modal instead of showing a new one (in Vue-speak: rendering a different component), kind of a mini-routing inside the modal.

Related

Vuetify dialog adds new dialog to dom each time it is opened and exon't remove the previous on close

We have a large scale application but in Vue 2, Composition API and Nuxt.
However we load a lot of content in dialogs. After using the application for several minutes you can see a build up of these dialogs in the DOM.
Is there a way for Vuetify to use the existing dialog one instead of creating a new instance.
Or remove the existing one on close?
I can't see anything in the docs or similar issues from other users.
Each v-dialog with a v-model will be added to the DOM first time it's active/opened, then the visibility is changed on subsequent toggles. It's more "expensive" to add and remove DOM elements (size depending on its nested content) than toggle an active class and add a simple overlay. Probably why it's not recommended to nest v-dialog within a v-for loop, the DOM will get too crowded. If the dialog content is interchangeable, you could have one dialog on the page where the content is toggled too.

Custom widget designer renders in a modal offscreen

I am developing a custom widget on a new Sitefinity 12.2 instance. When I define some public properties on my controller as described here, my widget designer works as expected. Clicking the edit button on an instance of my widget opens up a full page editor where I can edit my properties.
However, when I define my own widget designer view (following this documentation), the result when I click the edit button is a modal that appears outside of the window above and to the left. Inspecting the element and adjusting the styles through the browser console, I am able to move the modal onscreen where it should be. The css source for the modal's position is [myDomain]/Frontend-Assembly/Telerik.Sitefinity.Frontend/assets/dist/css/sitefinity-backend.min.css?package=[myProject], which seems to be coming from Sitefinity's default code.
My questions: Is it possible for my default designer views to use the full screen editor that the auto-generated designer uses? If not, what am I doing wrong that's causing my modal to render offscreen? Surely that's not out-of-the-box behavior?
DesignerView.Default.cshtml:
<div class="form-group">
<label>This is a custom designer view</label>
</div>
DesignerView.Default.json:
{
"priority": 1
}
Turns out our custom CSS included its own definition for a .modal CSS class, which was interfering with the Bootstrap CSS class with the same name used by Sitefinity. This style was the culprit:
transform: translateY(-50%);
Removing/renaming our custom class has fixed the issue of the designer modal loading offscreen. I'd still be interested to hear if anyone has an answer for this question though: Is it possible for my default designer views to use the full screen editor that the auto-generated designer uses?

iOS10 Safari Keyboard Popup

I have a single page web app. The keyboard pops-up everytime I click on the screen.
There are no text input boxes in the DOM at all.
How can I debug why the keyboard is popping up.
You can see examples of this strange behaviour at https://blight.ironhelmet.com and https://np.ironhelmet.com
update with a clue: A user is now reporting that rather than the keyboard, a dropdown selection spiner is popping up all the time, long after that dropdown has been removed from the DOM.
For React users:
I had the same thing happen in a React single-page app with React-Router. I didn't write code to remove elements from the DOM, but of course React does that for you.
On my site, there are React components that contain one to four input fields. After any such component appears, and then is hidden (unmounted / not rendered anymore), then any time the user taps a link, the keyboard pops up. This makes the site unusable. The only way to make it stop was to reload the page.
The workaround: calling document.activeElement.blur() in componentWillUnmount for the wrapper component around my <input> fields did the trick.
componentWillUnmount()
{
if (document && document.activeElement)
{
document.activeElement.blur();
}
}
Note that calling window.activeElement.blur() did not seem to do anything.
There's a thread in the Apple support forums about this issue:
https://discussions.apple.com/thread/7692319
Looks like the keyboard was holding a reference to input after I had removed them from the DOM.
I added a test when removing element to see if it was the current activeElement, then, if so, calling document.activeElement.blur() before removing it. Seems to have solved the problem so far.

Angular 2 rc4 Importing component content into modal

I am working with angular 2 rc4 and we are using fuel-ui http://fuelinteractive.github.io/fuel-ui/#/ to load a modal.
What we are trying to achieve is the following:
we have a login component that we want to inject into the fuel-ui modal the problem is that the actual modal html code (actual DOM) is getting loaded after.
Fuel-ui gives a tag into which the html for the modal gets loaded into.
I have researched and tried DynamicComponentLoader although found out it is now deprecated.
What I need is to know what is the best way to inject my login component content
into the rendered DOM (tag with modal-body class from bootstrap html).
I have searched but perhaps someone had the same issue and stumbled upon a better link that explains how to do this.
Thank you, in advance, for your help.
Nancy
This seems very old now. But i think the latest in Angular helps you use content projection into a component.
You can add <ng-content></ng-content> as the body of your modal. In the parent component view add your custom component wrapped in the modal component. When modal shows up, you will have your component in it's content.
Also, Angular supports dynamic component creation.
Component templates are not always fixed. An application may need to
load new components at runtime.
You can look it up here for any help:
dynamic-component-loader

Modals inside sub-routes

I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.