I'm having an issue in which my CarouselCaption made via Reactstrap doesn't show up on my phone. After some research, it looks like this is because of the classes d-none d-md-block. How do I fix this issue using the Reactstrap module?
Related
I have a webpage I made in React. It renders some charts. The charts will appear slightly differently depending if the user is viewing the page on desktop or mobile.
I have used html2canvas and jsPDF to export the page to PDF. The problem is that I ALWAYS want to export the charts in the format seen in mobile view.
I have thought of the following:
rendering the mobile view inside a div with display set to none and using that div as the input to html2canvas. This does not work. I get an error.
Trying the above, but instead of using the hidden div, just send the div as the input to html2canvas inline. I do not know if you can even do this.
Using React-pdf to output the pdf. The problem here is that I do not know how to embed the charts when using react-pdf.
Does anyone have an idea of what I can try?
Thank you.
enter image description here
I make this web app using react.js and I tried very much to do Responsive for mobile devices but I couldn't, any one solve this problem please.
I used useMediaQuery from material ui which helps very much in creating responsive site.
Here is the documentation for it.
After then for displaying responsive components
You can create new components that are fit to that window size
You can use states for toggling for the different window sizes
And then you can import them as you want.
I am trying to make such kind of setup using material UI but am unable to do it properly using material UI.
I am not able to add the product add and remove setup below which should be below product name and price as shown in image.
If it is vital to use material-ui for positioning your elements and it expected to be responsive for different screen resolutions you could use https://material-ui.com/components/grid/
Otherwise, you can just use flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
There is a link to codesandbox for expamle made via MU Grids https://codesandbox.io/embed/material-demo-dvhfy?fontsize=14&hidenavigation=1&theme=dark
I was wondering if anyone knew what it is called when you have a sidebar nav with a collapsible drawer and main panel layout? I see this pattern everywhere now I wanted to find a tutorial on how to implement it in react or electron but all the results I get are for some other type of sidebar. This pattern is used in desktop electron-based apps like slack, vs code and microsoft teams and web apps like jira use it as well.
Okay you can use the Paper component in the the material ui framework.
docs here
Now I am developing react native app using material design, I am using react-native-material-ui package.
However, I can't add some icons in searchable on toolbar.(on searchable function).
like this link : https://material.io/design/navigation/search.html#expandable-search
please help me about this.
Thanks
Updated the code in this link. Please check:---
https://snack.expo.io/rkhB5Jog7