Resize a child element according to the width of the parent element

Question

I have an h:inputTextarea inside a p:dialog, so:

I would like as I resize to p:dialog a h:inputTextarea resize as well, so that when I resize the dialog it doesn’t get as ugly as in the image, and so I don’t need to resize both, just one. But I have no idea how to implement, I don’t know if I can do this only with CSS or if I will need Javascript, jQuery, etc.

Answer 1

Hello, good...

You will have to use Javascript for this type of manipulation, you can optionally use one of its frameworks, but I will illustrate with pure Javascript (Vanillajs).

To do this type of effect you will need to activate the "resize" event from your wrapper window and when the event is triggered you will need to capture the "clientHeight" and "clientWidth" from your window and then assign the captured values to your TEXTAREA, follow examples:

    // Selecionando elementos...

    // Janela de fora
    let wrapper = document.querySelector('#wrapper');

    // Text Area
    let txtarea = document.querySelector('#chat');

    // Ativando evento...

    wrapper.addEventListener('resize', (e) => {
        let wrapperWidth = e.target.clientWidth;
        let wrapperHeight = e.target.clientHeight;

        txtarea.style.width = `${wrapperWidth}px`;
        txtarea.style.height = `${wrapperHeight}px`;
    });

    // Pronto, agora sempre que a janela for redimensionada o textarea irá receber as dimensões atualizadas! 

Answer 2

Look with CSS is possible yes... first remember that mediated in % of a child is related to width and height of the father.

So vc ve has a parent container 200px high and 200px wide, and the child is 50% wide and 50% high, this child is actually going to be 100px high and 100% high.

Having this concept in mind see that it is possible to have a textarea in % that accompanies the father’s size

Follow the image code above. In case the textaarea is the direct son of body, which is 100% window height and width.

Show on page all tb to see the textarea resize

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#texto {
    height: 50%;
    width: 50%;
}

<textarea name="" id="texto" value="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, consequatur accusamus provident quo nisi quae, vero unde, corporis sint atque fuga porro. Quae eligendi voluptates incidunt neque, accusantium labore inventore.</textarea>