We Keep Coding

How to align textarea height with next input element

I set some input design in my sample app. inside it , I have input and textareas. from perspective view,our requirement is to set height aligned with input element.
I would like to align height of textare with input element close to it.When I simply set them as follows. it distorted.
<div>
<input value="input test">
<textarea>textarea test</textarea>
</div>
My desired result is like follows. the height of textare is aligned with input element. How can I achieve this ?
Thanks

You can start by doing this:
.wrapper {
display: flex;
}
.wrapper > input {
margin: 0;
}
<div class="wrapper">
<input value="input test">
<textarea>textarea test</textarea>
</div>

<div style="display: flex; align-items: start;">
<input value="input test">
<textarea>textarea test</textarea>
</div>
The form-group div container has the display: flex and align-items: stretch properties, which align the heights of the child elements. The textarea element has the height: 100% property

<div style="display: flex;">
<input value="input test">
<textarea>textarea test</textarea>
</div>

React-split-pane: left pane always start at the page left margin

I have a fixed sidebar. But the right pane has to be split. I used below code segment for that. But the left part of the splitter always stick to the left margin of the page (i.e. sidebar's left margin and split left pane's margin are at the same position). I want to set the left margin of the left pane where the sidebar's right margin is.
<div className="flex">
<Sidebar />
<SplitPane
split="vertical"
minSize={256}
defaultSize={500}
onChange={(size) => persistSplitterPos(size)}
>
<div className="w-full h-page">gggg</div>
<div className="w-full h-page">sss</div>
</SplitPane>
</div>
Sidebar.jsx:
<div class="w-64">
</div>
I tried experimenting with minSize and maxSize. But I couldn't get the desired result.
Here is the codesandbox link.

<SplitPane> that you use, is positioned absolutely, hardcoding left and right style properties to 0px, so by default it attaches itself to the left and right edge of the page and occupies the whole width. In order to gain more control over where the SplitPane gets attached you have to place it in the relatively positioned parent, then absolute positioning of the pane will work in the context of that parent instead of the whole page:
/*styles.css*/
.App {
font-family: sans-serif;
text-align: center;
display: flex;
}
/*App.js*/
<div className="App">
<div
style={{
width: 256,
backgroundColor: "#d5f5cf"
}}
>
Sidebar
</div>
<div
style={{
position: "relative",
width: "100%"
}}
>
<SplitPane>
<div style={{ backgroundColor: "#d5f5cf" }}>Left-Pane</div>
<div style={{ backgroundColor: "#f4edba" }}>Right-Pane</div>
</SplitPane>
</div>
</div>

how to style two elements floated right in two rows in a row?

Im stuck with a problem.
I'm working on a website and I want to style an input with a label to float on the right side and the label to stay on top of the input on that line but the elements are staying as showing in the picture below.
the image
this is what I've done so far:
<h2>Pacients Info</h2>
<button className="addNewPacient" onClick={showModal}>Create</button>
<button className="addNewPacient">Read</button>
<button className="addNewPacient">Update</button>
<button className="addNewPacient">Delete</button>
<label for="rowsNo"><b>Rows no.</b></label>
<input
type="number"
placeholder="Rows no"
name="rowsNo"
value="10000"
onChange={e => onInputChange(e)}
/>
label[for="rowsNo"],
input[name="rowsNo"] {
float: right;
}
input[name="rowsNo"] {
width: 100px;
}

wrap the input and label inside some div container and add styles to it something like this
<div className="some-class-name">
<label for="rowsNo"><b>Rows no.</b></label>
<input
type="number"
placeholder="Rows no"
name="rowsNo"
value="10000"
onChange={e => onInputChange(e)}
/>
</div>
Update the CSS to
.some-class-name {
display: flex;
flex-direction: column;
float: right;
min-width: 100px;
}
input[name="rowsNo"] {
width: 100px;
}
Instead of using float will recommend to use flex property of CSS, it really makes like easier.
You can follow this link for an overview https://css-tricks.com/snippets/css/a-guide-to-flexbox/

React: Resizing a div including handlers, different cursors i.e ns-resize - no jquery

I am looking for an easy way of allow a user to resize a div using handles and all relevant cursors. I see lots of examples using jquery but I would like to use it in react and jquery isn't required.
Does anyone know a easy way of doing this ? I presume pure js, css. I don't really want to use a react component for this, as I need to enable resizing on standard divs.
Of course it is for use with reactjs, is there a more modern way of doing this without jquery ?
** EDIT **
These are the cursors that could be used for each resizable point
e-resize ne-resize n-resize nw-resize s-resize se-resize
w-resize sw-resize

You can only with CSS, resize property allows you to make that!
.resize {
border: 1px solid black;
overflow:auto;
}
.resize.horizontal {
resize: horizontal;
}
.resize.vertical {
resize: vertical;
}
.resize.both {
resize: both;
}
.wrap {
max-width: 80%;
}
<div class="wrap">
<div class="resize horizontal">Resize me!</div>
<div class="resize vertical">Resize me!</div>
<div class="resize both">Resize me!</div>
</div>
Requirements
overflow different than visible (initial) is required and you can apply it to all elements whos overflow is setted with auto, scroll and hidden.
I call this property marvellous!

Heres an example of a great solution using react-resize-panel library
https://www.npmjs.com/package/react-resize-panel
Put anything you want to show inside the divs, you can customize the handler too.
import ResizePanel from "react-resize-panel";
...
<div style={{
width: '80%',
height: '500px',
border: '1px solid black',
display: 'flex',
flexDirection: 'column'}}>
<ResizePanel direction='s' style={{backgroundColor: 'black', height: '50%'}}>
<div style={{backgroundColor: 'orange', height: '100%'}}>panel</div>
</ResizePanel>
<div style={{backgroundColor: 'purple', flexGrow: '1'}}>panel</div>
</div>
...
Hope this can help someone else

A few days ago I wanted to build something like this but with 2 div elements.
using resize property from css made it's width 0 when there are multiple elements so I tried javascript.
I saw an example using onMouseMove event but there are many problems with this example so I made a new sandbox in which I use the onDarg event.
Here is the important code:
const dragHandler = useCallback(
(e) => {
const w =
((e.clientX -
e.currentTarget.parentElement.parentElement.getBoundingClientRect()
.left) /
e.currentTarget.parentElement.parentElement.getBoundingClientRect()
.width) *
100;
if (w > 0 && w !== width) {
setWidth(w);
}
},
[width]
);
and
<Box width={width} />
<div
draggable
onDrag={dragHandler}
className="flex justify-center items-center p-1 h-full bg-slate-800 cursor-col-resize"
>
<div className="w-1 border-x border-white h-1/6" />
</div>
<Box width={100 - width} />
Hope it helps \(^_^)/

$.animate() jQuery display:table without affecting unspecified spatial dimensions

When using jQuery's $.animate() on a display:table, spatial dimensions not specified to change will animate.
fiddle
In this case, width is specified, but height isn't, yet height jumps around. In this case, how can a display:table's height be kept from visually changing?
html
<div style="display:table; height:40px;">
<div style="display:table-row">
<div class="cell">
Short text
</div>
<div class="cell cellToAnimate">
Really long text
</div>
<div class="cell cellToAnimate">
Really, really, really long text
</div>
</div>
</div>
<div>
<button type="button" id="cellChanger">Change cells</button>
css
.cell{
display:table-cell;
}
js
$(document).ready(function () {
$('.cellToAnimate').hide();
$("#cellChanger").click(function(){
$('.cellToAnimate').stop(true,false).animate({
width: 'toggle',
opacity: 'toggle'
});
});
});

style a container with
display: block;
height: 40px;
overflow: hidden;