How can I make a container resizable?

Question

I've the body field as container. When I add '#resizable' to the field with hook_form_alter(), it is not getting resizable.

function test_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  if ($form_id == 'node_page_edit_form' || $form_id == 'node_page_form') {
    kint($form);
//      $form['body'] = [
//        '#resizable' => TRUE,
//      ];
  }
}

How can I make it resizable?

Answer 1

In the official documentation

says the following:

"#resizable": Controls whether the text area is resizable. Allowed values are "none", "vertical", "horizontal", or "both" (defaults to "vertical").

in this documentation we can see, that this property "#resizable" is applicable only to textarea.

Then, you can try:

function test_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  if ($form_id == 'node_page_edit_form' || $form_id == 'node_page_form') {
    $form['body']['widget']['0']['#resizable']='horizontal';

    //or
    //$form['body']['widget']['0']['#attributes']["style"]="resize:vertical";

  }
}

if you change the text format in "restricted HTML" you will see

if you want to use the "both" parameter

function test_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  if ($form_id == 'node_page_edit_form' || $form_id == 'node_page_form') {
      $form['body']['widget']['0']['#resizable']='both';

  }
}

if you change the text format in "restricted HTML" you will see: