Filerobot Image Editor tools not working with boostrap nav and tabs or modals

Question

Documentation: https://github.com/scaleflex/filerobot-image-editor

Filerobot Image editor is working in my project, but when I try to only render when I click on a tab, the cropping works but the contrast, brightness, and other editing functionality doesn't work in the dashboard UI.

top editor is working, bottom is not:

here is the bootstrap component for the tabs: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

here's my component:

<nav>
   <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a 
          class="nav-item nav-link active"
          id="text-editor-tab" data-toggle="tab" 
          href="#text-editor" 
           role="tab" 
           aria- controls="text-editor" 
            aria-selected="true"
           >
              Text Editor
           </a>
          <a 
            class="nav-item nav-link" 
              id="edit-photo-tab" 
               data-toggle="tab" 
               href="#edit-photo" 
              role="tab" 
               aria-controls="edit-photo"
               aria-selected="false"
             >
               Edit Photo
           </a>
            <a 
             class="nav-item nav-link"
             id="advanced-info-tab" 
              data-toggle="tab" 
             href="#advanced-info" 
             role="tab"
             aria-controls="advanced-info" 
                aria-selected="false"
               >
                 Advanced Info
            </a>
       <a 
            class="nav-item nav-link" 
              id="image-info-tab" 
             data-toggle="tab" 
           href="#image-info" 
            role="tab" 
             aria-controls="image-info" 
              aria-selected="false"
               >
                 Image Info
             </a>

      </div>
</nav>

<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="text-editor" role="tabpanel" aria-labelledby="text-editor-tab">
       <textarea class="ckeditor" style="width:99%;" id="editor1" name="content"></textarea>
  </div>
  <div class="tab-pane fade" id="edit-photo" role="tabpanel" aria-labelledby="edit-photo-tab">
    <div id="image-editor" ></div>
  </div>
  <div class="tab-pane fade" id="advanced-info" role="tabpanel" aria-labelledby="advanced-info-tab">advanced info</div>
    <div class="tab-pane fade" id="image-info" role="tabpanel" aria-labelledby="image-info-tab">image info</div>

</div>
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js?func=proxy"></script>
<script src="../RFAssets/js/edit-image.js" ></script>
<script src="/RFassets/js/ckeditor.js"></script>

here is my js file:

window.onload = function() {


  const imageSrc = document.getElementById('rfzone-001').src;
console.log("imageSrc",imageSrc)
const container = document.getElementById("image-editor");

const config = {
  source: imageSrc
};
const ImageEditor = new window.FilerobotImageEditor(container, config);

ImageEditor.render({
  // additional config provided while rendering
  observePluginContainerSize: true,
  onBeforeSave: () => {
    
    return false;
  },
  onSave: (imageInfo, designState) => {
    console.log("yeah", imageInfo,designState)
  
  }
});
}

Answer 1

The issue was happening due to the bootstrap nav sets display: none to the wrapper of the editor hence the dimensions of that wrapper become with width & height = 0 & 0 and the editor's canvas follows the wrapper's dimensions so it becomes 0 which means no more draw process would be there.

We have fixed that issue from our side by avoiding to set the canvas dimensions with 0, 0 even if the wrapper is 0, 0 but not released yet.

For a temporary solution from your side, you could use visibility: hidden instead of display: none if possible or avoid using display: none and replace it with some trick like position: absolute; left: -9999px; ...etc.

I am at your disposal if you have further questions.

Emil from Scaleflex