I'm using this re-resizable library to achieve the resize functionality. The requirement is to achieve the one-side resizing, which means if I resize from the right side of the div, only that side should expand to the right. The left side should stay in the same position.
I've read the docs and played around with the props but no luck. Thank you.
Here is my codesandbox.
You can use the handleClasses prop to apply css class names to particular sides. For example if you want to resize from only the right side, you can do the following:
.pointer-events-none {
pointer-events: none;
}
<Resizable
handleClasses={{
top: "pointer-events-none",
bottom: "pointer-events-none",
left: "pointer-events-none",
topRight: "pointer-events-none",
bottomRight: "pointer-events-none",
bottomLeft: "pointer-events-none",
topLeft: "pointer-events-none",
}}
>
<YourComponent />
</Resizable>
By excluding the right property in the handleClasses object you are disabling the pointer events on every side except the right side.
Your problem is the way you trying to combine Draggable and Resizable. As Resizable only changes the width of the container you must adjust the position(either with translate or left) when resizing from left or right to simulate div stays in place.
But instead of re-resizable I suggest using react-rnd. I think it is from the same author so the interface should be similar but this is already implemented there, you only have to use one component like this:
codesandbox
You can use react-rnd, which does basically what you're doing here behind the scenes - only in a working implementation. If it doesn't work out of box for you, then you can at least study its code.
https://github.com/bokuweb/react-rnd/blob/36d3506f91375a0b4dbade1187a61038d5c4892b/src/index.tsx#L636-L685
https://github.com/bokuweb/react-rnd
Do note that the library hasn't been updated in a long while - so if you rely on it, you're going to be on your own for ongoing maintenance.
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.
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
I want to make an absolutely positioned element (an icon) to float inside an Antd Drawer title but it gets cut beyond the modal.
I have tried to give it infinite z-index in the div and in the Drawer prop but without success.
I am attaching a codesanbox so that I can explain my point and you can play around.
What am I missing?
Codesandbox example
Is this what you want to achieve?
If yes, just give a position: relative to the parent container :)
z-index will not work until and unless the position of that element is set. You are giving the z-index but not giving the position to the drawer. Please give position: relative; to the Drawer
Alright, I found it!
In the end it was simpler than other approaches that I tried...
It is always tricky when you have to play with a new library. Anyway I updated the codesandbox so you can see it working!
Here is the magic:
.ant-drawer-open .ant-drawer-content-wrapper {
overflow: visible;
}
.ant-drawer-open .ant-drawer-content {
overflow: visible;
}
Currently, I am using a directive from a third-party library for a UI toggle button. I changed the background color and left/right positions of the toggle button a bit to meet my business specifications. E.g. the out-of-the-box style came as light green for true, light red for false; I changed this to a darker green for true, and a light grey for false. I also moved the toggle positionally a bit to the left. All of this works fine.
The one issue I'm experiencing is that for a split millisecond when the page with the toggle button renders, I see the old style quickly change from what came out-of-the-box, to my updated style. There aren't any other glitches in style after this fact, just the initial loading shows some quick shifting around on the element. This isn't a huge issue but I can't seem to pinpoint the issue or know why it is happening. Any thoughts? Something in an issue for CSS hierarchy perhaps?
Notes relevant to the issue:
I used the inspector to find the classes I needed to override, since the directive itself just uses an nz-toggle tag.
I am using !important to override. I've read that this is bad practice in itself but it is being used across the entire project and has been established as "our standard" of overriding styles
Here's an example of one rule from my CSS file compared to what comes out of the box:
.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}
vs.
.nz-toggle-wrap.true {background-color: #60bd68;}
Any thoughts?
This happens because your "new" CSS loads after the "old" CSS.
Of course that should be true anyway, because you want to override the old style, but it seems that the old and new code are too far away from each other hence you manage to see it change.
To solve this you have to move the new style "closer" to the old style.
The way to do it depends on your project architecture and your build process.
Another option is that the class "true" is added only after page load, and so only then your new style kicks in.
If you are loading this "third party library" locally, you might have to directly edit the CSS files of the plug-in.
With the plug-in you linked, maybe you need to edit this file directly to prevent the "flicker", which is caused by the styles loading in sequence:
https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}