I'm using flow-bite on my react js project I saw the Navbar hamburger not working (dropdown) on the Chrome browser but the same hamburger is working fine in firefox.
please tell me, How to Solve the Problem.
Several things you need to do:
Try downgrading your react app 17.0.2. If your don't know how to then check this LINK
Use flowbite CDN script in public index.html
<script src="https://unpkg.com/flowbite#1.4.4/dist/flowbite.js"></script>
Thats it it will work now. 👍
Or you can use flowbite-React which is still in development 😀 . Good Luck 🤞
Related
Setup:
nextjs v12.1
safari v13.1.2
node v14.19 (can adjust with nvm and have tried a few)
The problem is simple, but i cant figure out a solution.
I have multiple <Image /> components in my nextjs project, and they render and work perfectly in Chrome, Firefox, and Brave (havent tried IE)
But safari won't render them. It's weird because at some point, I was making some changes, nothing was helping, I reverted the changes and it rendered the images! i was wondering what i did! I naviated the site and came back to the main page with the images and once more they were not rendering.
Basic usage of the Image component looks like this
<Image
src={'http://walldiskpaper.com/wp-content/uploads/2015/12/Waves-Abstract-Wallpaper.jpg'}
height={240} width={500}
layout={"responsive"}
/>
Again it works fine on firefox and chrome. Here are some screenshots of what i get on sources and network tab of safari
The sources tab shows that safari is unable to load any of the images... i dont know if it has to do with the base64. But I have seen them rendered at some point before i just dont know what is going on and i cant recreate it.
All this is in localhost by the way, i have not tested it online since i have yet to deploy.
Also by the way, this works fine on safari mobile! Im only having the issue in safari desktop
Hey i was also looking for same issue found something
installing package next#canary solve it
FullCalendar works great on Chrome on my PC but it does not render on an iPad 2nd generation. Is there maybe some polyfil code needed?
Linking to a polyfill script fixed this issue for me! Found the solution here
Edit: This was the actual line that fixed it...
<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"></script>
After updating to antd 3.10 I'v noticed many of my icons are now misaligned:
Not sure why this is happening, I'v disabled all css besides antd.css but it's happening, even on a blank page (not necessarily in a modal).
Thing is I cannot reproduce this in a codepen with the same version, i've inspected everything in the browser inspector to check all the styles being applied and everything seems the same, and I am all out of troubleshooting idea.
Any ideas as to what could have caused this?
Update:
I rolled back to antd 3.0.0 and everything is fine. It definitely something has to do with the new svg icons. I still cannot replicate this outside of my environment. I am very much still interested in a solution to this.
This issue has nothing to do with webpack config - you need to add <!DOCTYPE html> at the top of your page. This is also why you can't reproduce it in codepen - doctype is specified even inside sandbox frame there.
I'm using Bootstrap 3's Glyphicon,
Some icons such as glyphicon-fire, glyphicon-calendar is displayed as "📅" in Firefox but it's working fine in Chrome.
I'm very sure the fonts and css's location is right,
I've tried every package of bootstrap from http://getbootstrap.com/ and github, but none of them worked.
Please tell me how can I fix this issue, thanks.
P.S: it's getting weird, the icon-calendar is displayed when I press ctrl-f5, but when I f5 it's displayed as "📅" again.
In Bootstrap 2.3 glyphicons were an image, but in V3, they're made into an icon font.
I can only think of one problem, and it's the charset.
Make sure you have <meta charset="utf-8"> in your page.
If that's not enough, assuming you're using Apache2 as your webserver, create a .htaccess file in your site directory containing this
AddDefaultCharset utf-8
Hope this helps!
The only workaround that I know of is to make images of what you wan't though there might be other simpler ways of doing it.
If you are on a mac then you can open it in chrome and take a small screenshot of it before editing it so that it looks good
If you are on a windows machine then you will need to make a big screenshot or zoom in and make a screenshot from up close
So, I've pretty much completed my newest project utilizing Twitter Bootstrap and I'm going about fixing some issues that are buggining me, and I can't for the life of me understand why I piece of code is working on FF but not in Chrome so I was wondering if you guys can help me out a bit...
Mainly, I'm using the following to allow dropping of menus by hover, not click.
https://github.com/CWSpear/twitter-bootstrap-hover-dropdown
Can someone give me a bit of direction as to why it's not working in Chrome?
The site is: http://www.savamarkovic.com/dal/index.php/?lang=dal
FYI, you can achieve a clean dropdown on hover using this simple css block:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
This will save you the overhead of using an extra js plugin and it works in all browsers. Bonus: clicking on the main menu item will lock the dropdown open, per the standard implementation of the bootstrap dropdown.
GitHub doesn't want files to be served from raw.github.com, so the MIME type is text/plain, which is preventing it from loading in Chrome...try including the script locally in your project.