CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Spark
Spark

Reputation: 115

bootstrap modal shows previously resized textarea as it is

I am using a bootstrap modal to get some information from user. Inside the modal-content class I have given a <textarea /> field to let user provide comment. This textarea is and should remain resizable. But the problem is when the user resizes the text area and closes the modal, the textarea shows previously changed size and it does not reset to original.

Please follow the link below to reproduce the issue:

  1. Open Modal, Resize the textarea so that it will stretch even outside the modal
  2. Now click on close
  3. Open the modal again, the previously changed size of textarea will be shown.

Note that CSS resize: none; is not the option I DO want the textarea should be re-sizable. Also, I have jquery available, Is there option with jquery to reset the size when the modal closes automatically?

Edit: The duplicate suggestion is different as the textarea here comes within a bootstrap modal.

Demo

Upvotes: 1

Views: 320

Answers (1)

Programmer
Programmer

Reputation: 2123

When the modal is closed (hidden.bs.modal event) reset the textarea height and width.

$('#myModal').on('hidden.bs.modal', function() {
    $(this).find('textarea').css({'width': '', 'height': ''});
})

JSFiddle

Upvotes: 2

Related Questions