Search code examples
jquerycssfroala

Make height of parent div of froala editor scalable

I am using froala 2.4.0 inline editor to implement facebook post-like feature. I have emebeded froala editor in a div as shown in image below.Now I would like to make the parent div scalable i.e. grow / shrink as the content of the froala editor changes.The bordered box is the parent div and the placeholder line is the froala inline editor.Is there any way to do this?enter image description here

This is what I got so far:

$(function() {
  $('#custom-post-feed-text').froalaEditor({
    toolbarInline: true,
    charCounterCount: false,
    placeholderText: 'Share what\'s on your mind...',
    toolbarButtons: [],
    quickInsertButtons: []
  })
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/css/froala_editor.pkgd.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/js/froala_editor.pkgd.min.js"></script>

<div class="custom-post-feed-container" id="custom-post-feed-container-personal">
  <div class="custom-post-feed-textarea">
    <textarea id="custom-post-feed-text"></textarea>
  </div>
  <div class="custom-post-feed-options">
    <span class="custom-post-feed-more-options" id="custom-feed-more-options" title="More">+</span>
    <span id="more-option">
      <span title="Upload image"><i class="fa fa-camera" aria-hidden="true"></i></span>
      <span title="Embed link"><i class="fa fa-link" aria-hidden="true"></i></span>
      <span title="Upload video"><i class="fa fa-video-camera" aria-hidden="true"></i></span>
      <span title="Add Poll"><i class="fa fa-pie-chart" aria-hidden="true"></i></span>
    </span>
  </div>
</div>

Solution

  • Froala editor supports autogrow feature where you can set a heightMin and mandheightMax` and will auto grow in height as user types. See the docs

    https://www.froala.com/wysiwyg-editor/examples/adjustable-height

    $(function() {
  $('#custom-post-feed-text').froalaEditor({
    toolbarInline: true,
    charCounterCount: false,
    placeholderText: 'Share what\'s on your mind...',
    toolbarButtons: [],
    quickInsertButtons: []
    heightMin: 50,
    heightMax: 200
  })
});

    For you purpose if the parent div does not have any fixed height for custom-post-feed-textarea it will auto grow