I want a mini drawer on the left of my screen, like the example on the Material UI Documentation:
But in my case I want it to float over the content (like the variant="temporary" version of the component) when it opens, as currently it pushes the content.
If I handle the open prop to change the variant style dynamically it doesn't look very nice.
Is there any way of achieving this?
If you set the content's styling like this, it's position will not be effected by the drawer's state as you set its position to be absolute:
content: {
position: "absolute",
marginLeft: theme.spacing.unit * 7 + 1,
padding: theme.spacing.unit * 3
}
The Header text will ofcourse shift to the left when you open the drawer.
EDIT: I am going off of the codesanbox Material UI demo for the mini variant drawer here.
Related
I am using material ui ,I want to fix the left side fix and right side scrollable but its not working.I am trying in this way....
<Stack direction="row">
<Box sx={{ position: "fixed", width: "25%" }}>Left-side box content</Box>
<Box sx={{ overflow: "scroll", width: "75%" }}>Right-side box content</Box>
</Stack>
Thanks in advance...
It sounds like you are trying to create a layout where the left side of the page is fixed and the right side is scrollable. To do this with Material-UI, you can use the Grid component to create a two-column layout, and set the style property of the left column to { position: 'fixed' } and the right column to { overflow: 'auto' }.
You can also use grid-template-columns: fixed-value auto in CSS to achieve this.
It is important to note that you will likely need to adjust the widths of the columns and the container to make sure everything fits correctly on the screen.
It is also possible that you are facing some other issue, please provide more details about your code and the exact problem you are facing, so i can help you in a better way.
https://blog.theodo.com/2020/11/react-resizeable-split-panels/
https://htmldom.dev/create-resizable-split-views/
I'm trying to implement a custom react button slider similar to this, in order to resize the two sides of a diff tool using only the built-in react library(no external react libraries or typescript).
I'm trying to implement the button slider similar to the 2 links above in custom react, but I can't seem to get it working for my use-case.
Instructions:
A div for the slider button must be added between two left and right divs in my project. The left and right divs are the 2 sides of the differ tool.
The next step is to implement the CSS functions for the slider button, having a separate .css would be best to keep things organized.
The final step is to implement a custom OnDrag handler, that handles when the mouse clicks the button and drags it horizontally(left or right).
The default width for both sides will both be set to 50. Also, the two sides that are resized at the same time must be resized using only the width of both sides. So the leftSideWidth and rightSideWidth constants must be set to the default size of 50, and must be used to calculate change in width of both sides, so when the mouse clicks and drags the slider button horizontally, the size of both sides must be calculated correctly, so that the 2 sides can resize correctly, like in the above links.
Here's the code that I'm using for my project, but I'm no sure what to add next?
(Note: This must be implemented using only the built-in react libraries, no external libraries or typescript, just custom react.)
Thanks in advance for the help.
index.js
const [leftSideWidth, setLeftSideWidth] = useState(50);
const [rightSideWidth, setRightSideWidth] = useState(50);
const onDragHandler = (event) => {
// calculate the width and height of both sides:
// get width of view port:
// get position of the slider button:
// based on the position of the slider button, calculate the new widths:
// calculate how far the mouse has moved:
}
<div className="container">
<div className="leftView"></div>
<div className="draggable" id="drageSlider">
<div draggable onDrag={onDragHandler}/> </div>
<div className="rightView"></div>
</div>
app.css
.container {
display: flex;
}
.leftView {
}
.draggable {
cursor: move;
position: absolute;
user-select: none;
}
.rightView {
flex: 1 1 0%;
}
Let's say I have the code from here:
https://stackblitz.com/edit/react-nqkupy?file=demo.tsx
which is the code from the material ui docs, "Responsive drawer" section:
https://mui.com/material-ui/react-drawer/#responsive-drawer
but I added an image as a logo at the top of the menu.
How can I remove the space above the logo?
Thanks.
Just remove the <Toolbar /> if you don't use it. Or move the logo above <Toolbar />.
You can do the following :
img {
position: relative;
left: 3.5em;
bottom: 1em;
}
/** Also Use a Class Selector if you don't want to alter all <img> elements on page.**/
Add this to your CSS File. This should work although you might need to play around with some media queries in order to make it responsive.
It also centers the logo, looks better IMO.
I am using React Native Navigation top tabs. I am having a issue with the text getting cut or wrap. Is there any way that I can style where all the tab names show correctly without text wrap
Set a width to the tabbar, like this
tabBarOptions: {
tabStyle: {
width: 'auto' //or put some other width which works for you
}}
Also consider using scrollable tabs or reducing font size.
I want to render a button outside of the component's boundary. How can I do that? I have the styles looks like as shown below. The negative position works but the button get hidden by a sibling component. In the below image, the blue color is a sibling component. You can see the round button positioned in negative is hidden by the sibling component. Why? how can make it visible? I tried zIndex, but looks like it works only within the same component.
If the above question is not clear, let's say A, B, C are three components. A is the parent and, B and C are child components. I want to render a button from B and it must overlay on top of B. I don't want to render the button from component A. Any help appreciated.
Btn: {
position: 'absolute',
zIndex: 1000000,
width: 50,
height: 50,
top: -27,
left: 20,
backgroundColor: 'red'
},
The part where you render button, place that on the bottommost part of the render function where you are rendering the button and the siblings. Then with the absolute positioning, it would bet render last, and hence at the top. You wouldn't need z-index in this case. I hope I understood your problem correctly.
If it's android app use elevation property instead of z-index on B component