I'm using the great Material-ui components for building my react app and have used the component on several pages. My issue is that the component doesn't seem to support scrollable content.
Is there any easy way to make a workaround and make the content of the component scrollable if it exceeds the total height?
Related
I'm working on a React App which embeds widgets via <iframe>s. Those widgets also are React apps. Both, the app and the widgets, make use of the same component library (an own one).
This component library provides a <Modal> component, displaying some content in a floating container styled with a backdrop.
If now a widget renders such a <Modal>, this <Modal> of course is bound to the <iframe>s DOM and thus displayed in the boundaries of that <iframe>. And a non-centered <Modal> with a limited backdrop looks ugly.
So I just tried to add that <Modal>'s React portal not to the current document, but to the parent.document (if available and different from the current document).
And well, that works, kind of. The <Modal> is now a child of the parent DOM and thus centers in that viewport.
But if I want to render another custom component, like a <Button> in that <Modal>, all the styles (currently defined via SASS and applied via className) are just not available. These stylings remain in the child DOM :(
Currently, my only idea to solve this is to switch to inline styles. That means I would switch to CSS-in-JS to still have something similar to CSS classes and apply those styles via the style attribute to the nodes.
Since that would make it necessary to modify all components which are used in a <Modal>, I would like to reach out for other ideas and approaches.
Is there another approach how render an <iframe>'s <Modal> using the viewport of the outer app? Or is there a solution on how to also propagate style sheets from the inner DOM to the outer DOM?
Created a custom navbar.js file and styled with CSS.
It's working perfectly; however, is rendered behind the imported Ui Flex components from Figma- It's impossible to style my navbar's z-Index with no context to those components, and it would be very difficult to update those components by hand.
The App currently shows the "MarketingFooter" imported from Figma stacked above my Navbar, I need the opposite.
Thanks for the help!
I am using Material UI version 4 and am incorporating cards into my website (click here for more details).
I want to increase the size of the entire card, so the picture appears larger. Since I just import the Material UI card "off the shelf" in my React program, I wasn't sure if it was possible to customize the sizing using CSS or some other method. Is something like this possible? Thanks in advance!
Yes it is possible. you could style material UI components by passing in CSS class as props or you could override element style inside components by using classes props.
classes={{root:classes.some-class}}
You can see the details in API section of component. https://v4.mui.com/api/card/
My application is in React and using css for styling. I wanted to add modal in one component. For that I am using bootstrap. But after adding bootstrap to my project entire UI is looking messy. How can I limit bootstrap to only one react component.
Task: Creating feedback form using bootstrap modal
Issue: bcz of bootstrap UI is changed
Requirement: Want to limit the bootstrap only for feedback component!
Thank you in advance!!!
I am making a cordova app with twitter bootstrap and i now require a side menu like this one http://jakiestfu.github.io/Snap.js/demo/apps/default.html or this one https://slideout.js.org/ that does not require too much hacking to get it to work with twitter bootstrap.
The navbar component collapses to form a vertical menu but does not extend left to where i would like it to be. Is there a method i can use to adopt the available navbar component to look like the snap.js example?.