I have component with tinyMCE wrapped in <tiny-mce-editor></tiny-mce-editor> in Vue Bootstrap Card component. However if I switch to second tab and back, the editor leaves plain textarea. I have tried many possible solutions I've found over the internet, but any seems work. The thing is that the editor component must be universal so I am not really able to catch it at card level and destroying it every tab switch that occurs. How am I supposed to fix this behavior? I am using tinyMCE v5 and completely depressed.
May try add
tinymce.remove("YourSelectorValue");
before tinymce initialization.
Related
I want to achieve this in react-native,
Is there a component that have this tab switching animation with also capability off adding an icon next to tabName if possible.
P.S: I found a component react-native-material-tabs but without the ability to an icon. Also found components that requires container component, where I just need one for tabs for my use case.
I have installed VueJS chrome extension:
VueJS chrome extension
but I find it quite useless unless I am missing something. So I posted the question here if some one can provide what I am missing.
I setup this vuejs project:
Kazoo on github
This project has several vue components but most of these components do not show up in vuejs chrome extension. This is the screenshot:
The Vue devtools show the application as you are viewing it now (just like the DOM viewer shows you the DOM elements that are currently on the page). Clicking a component will show you the internal state of that component, such as props and data. This allows you to infer where a problem may be originating when you see a bug occur in your application. It also allows you to figure out if the correct components are being loaded. It does not show you components that are currently not in the document, as it would not be useful.
The vuex tab will allow you to inspect the entire store, and all mutations that have been done and with what payload since the vue devtools initialised. It will show you what is computed by the getters.
The Events tab will show you which events have been fired. This may be particularly nice if you have a framework that uses them, or if you use global events yourself.
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.
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
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.