I can't make it work both Tabs and Toast
It doesnt appeared when content exist
http://screencloud.net/v/jMs4
and Toast shows normal if i delete content from DOM
http://screencloud.net/v/3MS0
I have issue solved. Just investigation by deleting some content from page and call Materialize.toast() again. so i found that in one node somehow exist tag it is appeared here by some copy-paste. this tag was on collapsed content, so toast why Toast wasn't visible
Related
I am using the external component v-image-input in Vuetify. For some reason, the component creates this extra padding/margin on the right and bottom side. I have been unable to find any attribute that can change this. Any ideas?
There are some hidden elements in the HTML.
If you go to https://seregpie.github.io/VuetifyImageInput/ and click on 'hide actions' the elements disappear.
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'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.
Here's the JSFiddle:
https://jsfiddle.net/68umt5b3/
As you notice, tooltips are getting changed, but they overlay on one another. Removing 'multiple: true' helps, but my MAC gets overloaded and browser crashes, saying:
Tooltipster: one or more tooltips are already attached to this
element: ignoring. Use the "multiple" option to attach more tooltips.
I only need one tooltipster shown at the time. How can I fix this?
Use the content method to update the content of the tooltip, or destroy it and create a new one.
i used twitter bootstrap collapse and the problem is that after the second click on the a tag (to open and hide the div) the div is not hidden.
i see that in the first time i click on a tag the 'in' class disappear and after that is staying (what makes the div appear).
i tried to copy the exact code from bootstrap site (without any changes) and it keeps going.
i read some post in stackoverflow that say the problem came from includes more than 1 bootstrap js or css (i check and it's notmy case).
there is something that blocking the collapse.
http://twitteer_D.com/javascript/#collapse/Twitteer_D used twitter bootstrap collapse and the problem is that after the second click on the a tag (to open and hide the div) the div is not hidden. i see that in the first time i click on a tag the 'in' class disappear and after that is staying (what makes the div appear). i tried to copy the exact code from bootstrap site (without any changes) and it keeps going. i read some post in stackoverflow that say the problem came from includes more than 1 bootstrap js or css (i check and it's notmy case). there is something that blocking the collapse.