Modal to forms with autogrowth textarea

Topic: Modal to forms with autogrowth textarea

Pierre M pro asked 7 years ago

Hi,

When i put a form in a modal in which there are textareas with autogrowth ( with the js script answered in a previous topic, or the script autosize.js), the modal got a really weird comportment : it adds a lot of space in the textarea but when i remove the autogrowth function, everything goes well.

Do you have any solution for this problem ?

Thank you very much.

Pierre

Add comment

Marta Szymanska staff pro premium answered 7 years ago

1 0 Best answer

Hi,

try this code:

HTML:

<!--Material textarea-->
<div class="md-form mt-5">
  <textarea type="text" id="form7" class="md-textarea pt-1 py-0 pb-0"></textarea>
  <label for="form7" class="pb-2">Material textarea</label>
</div>

CSS:

textarea.md-textarea {
  min-height: 6rem;
}

JS:

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ 'height': 'auto', 'overflow-y': 'hidden' })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on('input', function() {
        autoHeight_(this);
      });
    });
  }
});

$('textarea').autoHeight();

Best,

Marta

Add comment

Marta Szymanska staff pro premium answered 7 years ago

0 0 Best answer

Hi, Could you send me a file with your code to m.szymanska@mdbootstrap.com and paste here any demo or print screen presenting the issue? I'll try to help you. Best, Marta

Add comment

Pierre M pro answered 7 years ago

0 0 Best answer

Hi, I send you the mail, but i will post it here too in case other people got the same problem. Here's the code of the modal in which i send the user to a servlet that will redirect to a completed form:

<div class="modal fade" id="modalVM<%=demandeDePoste.getIdDemandePoste()%>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

if(demandeDePoste.getTypeDePoste().getAbreviation().equals("EC")){

<iframe class="embed-responsive-item" src="voirDemandeDePosteECFlag3?inputID=<%=demandeDePoste.getIdDemandePoste()%>" allowfullscreen></iframe>

} else {

}

</div>

<button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

</div>

</div>

After that, the modal is called by a button :

<td><i class="fa fa-search fa-2x indigo-text" data-toggle="modal" data-target="#modalVM<%=demandeDePoste.getIdDemandePoste()%>" title="Voir la demande" aria-hidden="true"></i></td>

To expand the textareas, i use this code, (from the topic https://mdbootstrap.com/support/text-area-auto-grow/)

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ 'height': 'auto', 'overflow-y': 'hidden' })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on('input', function() {
        autoHeight_(this);
      });
    });
  }
});

$('textarea').autoHeight();

I also tried the autosize.js (from http://www.jacklmoore.com/autosize/)

The comportment is weird in both case, i will post some screenshots : 1 without the extended textarea and thus the perfect behavior of the webapps and 2 when i ty to implement it.

- Without autoresized textareas : perfect behavior :

https://drive.google.com/open?id=0BxIs7fax68XsLWRUVlZraEg3dWM

- With autoresized textareas : weird behavior

-Part 1: https://drive.google.com/open?id=0BxIs7fax68Xsc1ZsQ2hKTXk5T0U

-Part 2: https://drive.google.com/open?id=0BxIs7fax68XsUkU4VWN1c2RoWjA

Thank you for your help.

Pierre

Add comment