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 Wierzbicka staff answered 7 years ago

1 0 Best answer

Please insert min. 20 characters.

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

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:
<code></code>
<div></div>
<code><code></code></code>
<div><div class="modal fade" id="modalVM<%=demandeDePoste.getIdDemandePoste()%>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<div>        <div class="modal-dialog modal-fluid" role="document"></div>
<div></div>
<div>            </div>
<div>            <div class="modal-content"></div>
<div></div>
<div>                </div>
<div>                <div class="modal-body mb-0 p-0"></div>
<div></div>
<div>                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half"></div>
<div><%</div>
<div>if(demandeDePoste.getTypeDePoste().getAbreviation().equals("EC")){</div>
<div>%></div>
<div><b><iframe class="embed-responsive-item" src="voirDemandeDePosteECFlag3?inputID=<%=demandeDePoste.getIdDemandePoste()%>" allowfullscreen></iframe></b></div>
<div><%</div>
<div>} else {</div>
<div>%></div>
<div>                       <iframe class="embed-responsive-item" src="voirDemandeDePosteENSFlag3?inputID=<%=demandeDePoste.getIdDemandePoste()%>&fromValider=1" allowfullscreen></iframe></div>
<div><%</div>
<div>}</div>
<div>%></div>
<div>                    </div></div>
<div></div>
<div>                </div></div>
<div></div>
<div>                </div>
<div>                <div class="modal-footer justify-content-center"></div>
<div>                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button></div>
<div>                </div></div>
<div></div>
<div>            </div></div>
<div>            </div>
<div></div>
<div>        </div></div>
<div> </div></div>
<div> </div>
<div></div>
<div>After that,  the modal is called by a button :</div>
<div><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></div>
<div></div>
<div>

To expand the textareas, i use this code, (from the topic https://mdbootstrap.com/support/text-area-auto-grow/)
<pre><code>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();</code></pre>
I also tried the autosize.js  (from <a href="http://www.jacklmoore.com/autosize/" target="_blank" rel="nofollow">http://www.jacklmoore.com/autosize/)</a>

</div>
<div>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.</div>
<div></div>
<div>- Without autoresized textareas : perfect behavior :</div>
<div> <a href="https://drive.google.com/open?id=0BxIs7fax68XsLWRUVlZraEg3dWM" rel="nofollow"> https://drive.google.com/open?id=0BxIs7fax68XsLWRUVlZraEg3dWM</a></div>
<div></div>
<div>- With autoresized textareas : weird behavior</div>
<div>        -Part 1: <a href="https://drive.google.com/open?id=0BxIs7fax68Xsc1ZsQ2hKTXk5T0U" rel="nofollow">https://drive.google.com/open?id=0BxIs7fax68Xsc1ZsQ2hKTXk5T0U</a></div>
<div>        -Part 2: <a href="https://drive.google.com/open?id=0BxIs7fax68XsUkU4VWN1c2RoWjA" rel="nofollow">https://drive.google.com/open?id=0BxIs7fax68XsUkU4VWN1c2RoWjA</a></div>
<div></div>
<div>Thank you for your help.</div>
<div></div>
<div>Pierre</div>

Please insert min. 20 characters.

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

Marta Wierzbicka staff 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

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Pierre M

Pro User 12Support score
2Questions 1Answers 0Snippets