trying to figure out how to change the onclick on a div when in mobile view media in react,
Currently i have a modal onClick using a Hook on a div and want to remove it and attach another one that opens a new website like in mobile view just to the div.
using #media screen (max-width: 768px)
I'm using styled components also if that helps
Cheers
There is a trick that you can use to access the breakpoints in javascript. Same can work in your scenario. I had used this approach before but for a javascript project. Below is a link for the same,
https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
The whole idea is to make use of :before or :after pseudo selectors.
Related
I have a mobile sidebar component that should be hidden on desktop. Since it's for mobile only mobile it has the className md:hidden.
I'm adding all my components to React Storybook to make a library of each component. But since it has that class of md:hidden it doesn't show up unless you change the viewport or the window size. Is there a way in Storybook to overwrite or take out that className?
I would like it to show up in storybook though, so I was wondering how to either remove or override that class only in storybook.
I think you got it backwards (Assuming you set the md:hidden intended for mobile). In tailwind, we use md (min-width:768) if we want the effect to apply when it exceeds 768px (not what we want if we want it to show in desktop view)
So right now, you are hiding your sidebar when it is in desktop view. Try replacing your properties with hidden md:visible. In this manner, it would default to hidden (when it's in mobile view) and once it reaches & exceeds the min-width of 768 (desktop view) it will show the sidebar. Hope this would help brother.
I am Trying to make a custom switch in react native expo but all the NPM's components don't seem to work, how would i come about creating a custom switch with animations and a custom toggle like the ones show in the image with react native expo?
What I am trying to make
To achieve your first switch example you can look at react-native-switch and tweak it slightly to take a height and width (instead of circle size). I have a working example of this here.
For your second example a simple TouchableOpacity with toggle icon should suffice. You can get a little more elborate and add a color animation if you wanted.
I am creating a React JS web app. I have created few style sheets.
I have added a single Component to App.js but the window is not scrolling down to the contents of the added component.
I have tried overflow-y: scroll; to the html and body css class but it is not working. I want to scroll the entire page instead of single div component.
Here's the code for the component and the CSS on pastebin.
Try to use auto property instead of scroll.
I'm using material UI 4.9.x and it doesn't seem possible to use MUI in an iframe with the global styles.
I'm trying to use a React portal to inject the content into the iframe.
THAT part works and my MUI context menu works properly, just has the wrong styles.
I'm trying to inject the styles via CssBaseline but that gets injected into the host window not the iframe window.
I've verified this by looking at the DOM and I can see the elements created there under and not in the iframe.
How would I go about injecting this, completely, into the iframe window.
One idea I had was to change the current / global document and window objects to represent the iframe but worried that might be too hacky.
I have a very basic implementation of ant design in a react project. I used create-react-app and have went through the suggested steps detailed in the antd documentation.
The problem i have is resizing the Content section of the Layout component. Currently, even though my Dragger component is wrapped within Content component, it is appearing below it. The Content component is represented by the Grey area on the screen. Attempts at resizing it using styling have not yielded desired results.
Here is the code pen. Im simply trying to ensure that the Upload box is located within the Content section, and not below it.
Any help would be awesome!
You've wrapped the Dragger component in a div that is absolutely positioned in the center of the body, so it's disregarding the regular content flow. If you remove that inline CSS it will behave as you'd expect.