#Make two flex item share the vertical spacing instead of streteching

1 messages · Page 1 of 1 (latest)

dire parcel
#

My CSS situation:

.input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.input-label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: something;
}

.input {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    border: none;
    border-bottom: 2px solid grey;
    background-color: transparent;
    text-align: left;
    outline: none;
    overflow-wrap: break-word;
    overflow: hidden;
    resize: none;
    width: 100%;
    &:focus {
        border-bottom-color: red;
    }
}

My JSX:

const [focused, setFocused] = useState<boolean>(false);

    const handleOnBlur = () => {
        setFocused(false);
        onBlur && onBlur();
    };

    const handleOnFocus = () => {
        setFocused(true);
    };

    const valueHasLength = value.length > 0;

    return (
        <div className="input-wrapper">
                {focused && valueHasLength && <label className='input-label'>{labelText}</label>}
                <input
                    className='input'
                    placeholder='placeholder'
                    value={value}
                    onChange={onChange}
                    onFocus={handleOnFocus}
                    onBlur={handleOnBlur}
                />
        </div>
)

The video is also attached. I basically want the label to appear but not make the input field drop down because of that as it breaks the alignment with the comma and the other input field. Any help?

cobalt anchor
#

Simplest thing to do would probably be to have the labels always be there, but with visibility: hidden. Using visibility instead of display will keep the element in the document flow.

#

Then reposition the labels and such accordingly

dire parcel
#

i tried with display:none but yeah visibility hidden might do the trick

dire parcel
cobalt anchor
#

Well once you've made it so the labels are always there, you'll probably have to redo some of the flex styles to position them properly

#

But at that point they'll no longer jump around when the label disappears and reappears