I think CSS 'appearance' not working!
The examples in https://developer.mozilla.org/en-US/docs/Web/CSS/appearance is not working for me now.
enter image description here
Is there any change by clicking the option in MDN example?
But i cant any information that browsers stop support 'appearance'.
Please let me know about why i cant use 'appearance'....
Related
how is it going?
it has been some time since i was around here and i learned a new things being one of them react, i'm developing a personal project and i'm stuck with developing a light/dark mode with bootstrap in react, how can i do this? is there any example video or code or anything you know about it? i found in youtube only plain css and since i'm using bootstrap i'm afraid that won't work for my project, it could just change my background but i want to change also some structures of my site, any advice or tip would be really thankful.
Yeah I can help !
You need to use states as the theme btn is toggled, and update properties according to that, I have previously worked upon that so I am sharing link of that project: https://satellite-system.github.io/TextUtils---React-js-Web/
, github link : https://github.com/Satellite-system/TextUtils---React-js-Web
Hope it will help.
It was actually a project from youtube, but I have forgot its channel.
Description:
I've checked similar issues, but none of the provided solutions seem to work in this case. My assumption is that this has something to do with pdf document itself, appreciate if anyone could take a look.
Steps to reproduce
Here is the sandbox with the example
https://codesandbox.io/embed/gallant-thunder-x3o7v7?fontsize=14&hidenavigation=1&theme=dark
Expected behavior
Links are clickable. Please see the online demo https://projects.wojtekmaj.pl/react-pdf/
Actual behavior
Links are not clickable
Interesting fact, that google viewer does not open the links either (pages 4, 5), but if you download the document, links are working. I'm using default previewer on MacOS
Environment
React-PDF version: 5.7.2, same behaviour on 4.1.0
React version: 18.0.0, same on 16.4.0
Also, I used iframe and embed, and really it make link clickable but its not display pdf on safari IOS
The problem is you are using a "virtual PDF reader" (GoogleDocs/Mozilla PDF.js) which produces images and searchable text as separate layers, the link is there but it is the highlighted yellow zone not the blue underline text. also due to browser security I have to right click to open at my choice in new tab or new window (my choice would be save link as PDF for offline viewing).
In a true PDF viewer like Chrome embedded PDF Plugin or the users iFrame / offline viewer, the links would work perfectly. Again whichever way the user decides.
I'm hoping someone can help direct me with troubleshooting for my portfolio page. I'm currently having issues with a few things and I'm not sure why or how to deal with them. Whenever I try to view them in tablet/mobile views on the deployed link the layout is completely different than when I run a live server with npm start.
The first issue about section in mobile and tablet views displays each paragraph in columns and the black background doesn't cover all of the text or the image.
The second issue is the contact page doesn't display the links on mobile even though the text color is set to black and the contact header doesn't show up on the page.
It was made in React. Below will be the deployed link and link to the github.
https://refactored-potato.netlify.app/
https://github.com/GSometimes/refactored-potato
I would really appreciate any help or guidance on sorting this out.
Thank you.
first piece of advice is that you have used TOO MUCH CSS, please use only what you really need. You don't need every css property to use on every element.
Your text/paragraphs are showing in column as their parent's display style is set first as inline and then flex. Either don't use it or write display: block
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
I can't believe I have to ask this, but how do I download the Angular UI Grid?
From http://ui-grid.info/:
After, I click the Download button (above), I get taken here:
Now what? I don't see a download button. I'm not sure what to do. Somebody please tell me what I must so obviously be missing.
You only get the Download Zip link when at the ui-grid.info/ github page, not below, such as when viewing ui-grid/release/.
UI Grid is still in beta as of this moment and a lot of stuff is still in flux, non-working links from the front page being part of that... I agree it should be fixed.
The easiest way for now would be to go to the bower repo on github and download the zip for a tag.
Example link: https://github.com/angular-ui/bower-ui-grid/tree/v3.0.0-rc.14
Example zip: https://github.com/angular-ui/bower-ui-grid/archive/v3.0.0-rc.14.zip
Another easy way is to get it here:
http://ui-grid.info/release/ui-grid.js
http://ui-grid.info/release/ui-grid.min.js
http://ui-grid.info/release/ui-grid.css
http://ui-grid.info/release/ui-grid.min.css
http://ui-grid.info/release/ui-grid.woff
http://ui-grid.info/release/ui-grid.ttf
You might also want to consider using a package manager like Bower. It will make your life easier, and add consistency to your dependency management.