I am creating a small project and for the front end I chose to use Material Design BootStrap (with jQuery), since I like those designs more than the standard BootStrap. Until now everything had worked correctly, but I noticed a strange behavior with one element: the drop-down lists. When you click on a list, it is displayed, but then there is no way to close it again, that is, to do the show / hide function when there is a selection, or when you click somewhere. It just stays open. The only way to close it is to refresh the page. This happens to me even on the MDBootstrap page. (https://mdbootstrap.com/docs/jquery/navigation/navbar/).
Well, some additional data: So far I had done my tests using the latest version of Chrome. I found it strange that such elementary functionality did not work even on the website of its creators. Then I tried Firefox, the same problem. Today in the morning while working, I decided to open the MDBootstrap page on my work computer, and to my surprise the drop-down lists worked correctly! I also did the test on a MacBook with Chrome, entering the same page and it also worked. I even tried from a virtual machine, and in the Chrome of this VM the drop-down lists worked!
In summary, MDBootstrap drop-down lists do not work, so far, in Chrome or Firefox on my personal computer at home. It occurred to me that it could be the extensions of those browsers that were causing some conflict with that element, but I uninstalled and reinstalled both browsers, and the problem persists. I have tried incognito mode with these browsers and it does not work. I tried Internet Explorer and Vivaldi, and in these if the drop-down lists work. Everything is so confusing!
Well, it's my first query on StackOverflow. If you can think of any other possible solution, or why this problem arises, the suggestions will be well received.
Related
I have been getting a problem where my drop down menu is not working. Whenever I try to open a drop down menu it closes it automatically within a second. It used to work fine and I have not downloaded anything that should affect it.
I have tried:
Re-installing Chrome
Checked for malware with Chrome and all other trusted anti malware software
Disabled all extensions and tried incognito mode
Installed Google Canary with same issue still appearing
Cleared history and cache.
Updated Chrome to the newest version
I have tried every single thing I could find as solution but with no success. It started a few months ago and I am not sure why.
The issue is Chrome only and does not happen in Firefox or Microsoft Edge.
This issue happens on every site with drop down menus.
If anyone knows the solution to this it would be amazing.
The issue is in PNG attached file
Huion tablet is the culprit in my case, the symptom is gone if I close the huion tablet app.
I'm working on an existing Rails application using Turbolinks.
I have a plans page with upgrade/downgrade functionality. When this page is visited from another page and a button is clicked to upgrade nothing happens, although when I refresh my browser it seems to work fine and posts the form.
The strange thing is that other buttons work fine with Turbolinks installed and it only seems to happen in Chrome. Firefox, Opera and Safari it works fine.
Has anyone encountered this problem before? I've searched through Google all morning but can't seem to find a resolution.
It seems like it's a problem with Google Chrome. I've fixed it by putting the attribute data-no-turbolink in the HTML on the link that goes to the page in question.
Now, when I go to the page via clicking on the link it doesn't use Turbolinks and makes a full refresh of the page.
To just target Chrome (as it seems to work in other browsers) you could use this piece of js:
if ($.browser.webkit) {
$("your-css-selector").attr('data-no-turbolink', true);
}
Could be seen as a bit of a hack, but it works.
The situation.
I have a site that has a menu strip with some links. On a desktop these links work as expected, on mobile firefox, great! However on webkit, safari and chrome, they don't seem to register when you touch them.
I used Adobe Edge to check it out, but it worked fine in that browser, which browser is that anyways, is that webkit based or other?
I also tried using js to debug, but no luck. I would try to to get an alert() if say the parent element, or the link element itself was touched, I can only seem to get them to register if I mash around a bit.
The site is built on Sitefinity, I have looked around and can't seem to find anything relating to this.
How might I be able to go about trying to figure out what the issue is here? It seems to me to be webkit related, correct me if I a wrong, as it happens on chrome and safari.
On Android devices, you can write messages via console.log('blah!') and read them using logcat. You shuold also see other javascript errors in there.
See:
http://developer.android.com/guide/webapps/debugging.html
For some reason, on this page, in Chrome 17, CSS3 transitions aren't working the first 3 links in the footer/nav: http://jacob.bearce.me/index2.htm. The links are exactly the same, no added classes, and I went through step by step to figure out what it was, it's changing the HREF property that breaks them. For some strange reason, services.htm works, but projects.htm does not. I have absolutely no idea why.
UPDATE: Tested in Firefox, Opera and Safari it seems to be only a Chrome issue. It makes no sense. It's not even a webkit issue (unless Chrome's got a newer version than Safari).
Sorry if this response is slightly late, however, I'm currently on Google Chrome 16.0.912.63 beta-m and I have the exact same problem as you do. In fact, on your website, out of the 4 links below, it is only the home link that doesn't seem to be working too well with CSS3 transitions (on my side).
On a website I'm currently working on, the transitions seems to only work on some links and not others. I can't really see any trend to understand what causes it. Strangely though, when I visit your website or mine through Incognito, everything works well. It doesn't work even with my extensions disabled.
It looks to be bug with Chrome. I've figured out that it's definitely an issue with :visited links, but can't fix it no matter what. In incognito mode you don't see the issue because Chrome isn't logging what links you've visited. From what I've seen, it looks like it's an issue in Chrome 16 or higher. Hopefully they'll fix this in the next release, but for now, we'll just have to ignore it.
I've been trying to get CSS tooltips with iFrames working cross-browser, but Chrome has issues.
Here's a test page I put together: http://paulleduc.com/test.html
As you can see, it works as expected in FF and IE, with the tooltip popping up to the right of the word every time. In Chrome however, the tooltip pops up at the left of the screen most of the time, and only popping in the correct position when you hover over the words from 'left-to-right' it seems.
Any ideas to get this working in Chrome would be appreciated,
Thanks!
I don't know about the tooltip version you are using specifically. BUT, I use this one
http://www.dynamicdrive.com/dynamicindex5/popinfo.htm
and I have no problem with it working on chrome or FF, it has worked on every browser I have tested it on, it also comes with really good instructions.
And I am not sure if it is supposed to be this way, but when I hover over your links it just opens a small square and I can see the google homepage.
But seriously, the one that i posted above DHTML Tool Tips, works really well cross browser, let me know how it works out if you decide to use it.
Please make sure you are using the latest version of Chrome. I'm using Chrome 17.0.942.0 (Official Build 110446) dev-m and cannot reproduce the issue - the tooltips pop up immediately to the right of the links. However, their contents are empty due to the "Refused to display document because display forbidden by X-Frame-Options." error (which I believe is unrelated.)