I'm new to Material-UI. I understand that there are 6 possible zIndices. The documentation states that
zIndex can be used to change the level of each component.
How do I change the zIndex of a custom div that I created?
After a bit of research, I realized that you need to use a Paper element instead of a div. You can find the documentation for the component here:
http://www.material-ui.com/#/components/paper
You seem zoned out a little. zDepth and zIndex are completely different. zIndex is used for aligning the views on top of each other, as in which view should be on top of the other.
zDepth on the other hand in the material ui paper component is only used to assign the depth of 'shadow' of the paper.
Hope that resolves it.
Related
I am using RadixUI and there is orientation props, which could be vertically set. I tried to use this prop and expect that thabs will be aligned in column but it does not work:
<Tabs.Root orientation="vertical" className="TabsRoot" defaultValue="tab1">
Question: Did someone faced this issue and how to solve it?
According to Radix UI, they are a style-free library, which means that the orientation prop does not change the UI. You would need to apply the styles. vertical means that the up / down arrow will move focus within the component
You can read more about the functionality here https://github.com/radix-ui/website/issues/463
I'm using react-big-calendar with react-sidebar and if the sidebar opens, all the area is covered by overlay but some elements are visible on the top.
What can be the problem?
P.S: I've also given the z-index to both but nothing worked for me!
react-big-calendar with react-sidebar
I don't know the particulars of react-sidebar, but it's definitely a z-index issue. Does react-sidebar provide a Portal option for it's overlay (I'm not seeing one)? RBC is dynamically writing out the events to the page, and using 'auto' z-index, so if your overlay is defined first (like the sidebar is on the left, and calendar on the right), then that's what's happening.
I have a react app that uses ant design and styled components and am trying to get antd tabs to render the full height available but setting height to 100% or min-height to 100% is not working, however if I set 100vh it works... but this (of course) does not give the result I want because the component I am trying to render is not the full height of the screen.
Does anyone have experience with ant design that might have a good trick? I've looked at some solutions here on stack overflow but they do not seem to work. One was to use a row and col (here). I've also read through issues on github that suggest to target the specific antd classes like this one but it also does not seem to work.
Finally, I have a code sandbox link here that I have taken directly from ant design's site and added a style prop to the TabPane, setting the height and background (just to be able to see the effect) if someone would like to fiddle with it.
Please chime in if you have experience and a definite solution or even a suggestion at this point. Thanks in advance.
you can do with height : 100vh property .with appropriate padding .
here is the code sandbox link for the same .
https://codesandbox.io/s/bold-silence-d02qi?file=/index.js:2079-2088
I am new to React. Basically, I have been given a HTML Bootstrap template. It is pretty simple... a left sidebar (always present), an adjacent menu (always present) and all other components fit adjacent to side bar and under menu. I have attached a pic so you can easily see what I mean.
I can display the components but my dynamic components or the components that change are rendered below the sidebar and NOT next to it.
I have tried to solve this issue for days... no luck. Help would be greatly appreciated.
Thank you
Vincent
It seems like a css issue, make sure you have your child divs inside the parent and nothing is position absolute. if you have it online I can take a look.
I'm using the following component:
https://material-ui.com/components/popper/
In the DOM, it has the role of tooltip. I expect that it would automatically get the tooltip zIndex from the theme here:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/zIndex.js
But it gets no z-index. What gives?
Seems like you're using a component that is too low-level. The zIndex.tooltip you've mentioned is being used in the Tooltip component. So you have two options:
Switch your code to be using Tooltip directly and don't worry about applying zIndexes around
Keep your Popper implementation apply the zIndex manually. Or use withStyles, just like the Tooltip component does.
For a greater flexibility and control over how stuff gets done, I would prefer the second approach, to be fair.