File Explorer Splitter collapsed when it's inside a tab

[shanaka perera]

I am using ejFileExplorer to show a given directory path of my application and all the available actions are working perfect. But as soon as I put it inside a bootstrap 4 tab, it starting to load like below:

Collapsed File Explorer

And I have to drag the splitter from left to right to make it looks like below:

Dragged splitter Explorer

As you can see in the image, footer section is not correctly positioned after the dragging done.

But if I put the explorer in the first tab of the tabbed pane, then there is no any errors with the styling as shown below:

Explorer in the First tab

But putting the explorer in the first tab does not fulfill my requirement and any suggestions to fix this issue would be appreciable.

Here is my code so far:


<div class="card-header p-0 border-bottom-0">
    <ul class="nav nav-tabs" id="employee-tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="employee-general-tab" data-toggle="pill" rel='nofollow' href="#employee-general" role="tab" aria-controls="employee-general" aria-selected="true">General Information</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="employee-professional-tab" data-toggle="pill" rel='nofollow' href="#employee-professional" role="tab" aria-controls="employee-professional" aria-selected="false">Professional Information</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="employee-contact-tab" data-toggle="pill" rel='nofollow' href="#employee-contact" role="tab" aria-controls="employee-contact" aria-selected="false">Contact Information</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="employee-media-tab" data-toggle="pill" rel='nofollow' href="#employee-media" role="tab" aria-controls="employee-media" aria-selected="false">Media</a>
        </li>
    </ul>
</div>
<div class="card-body">
    <div class="tab-content" id="employee-tabContent">
        <div class="tab-pane fade active show" id="employee-general" role="tabpanel" aria-labelledby="employee-general-tab">
            <!-- html code goes here --!> 
        </div>
        <div class="tab-pane fade" id="employee-professional" role="tabpanel" aria-labelledby="employee-professional-tab">
            <!-- html code goes here --!>        
        </div>
        <div class="tab-pane fade" id="employee-contact" role="tabpanel" aria-labelledby="employee-contact-tab">
            <!-- html code goes here --!>            
        </div>
        <div class="tab-pane fade" id="employee-media" role="tabpanel" aria-labelledby="employee-media-tab">
             <div id="employee_media"></div>        
        </div>
    </div>
</div>

....

<script type='text/javascript'>$(function () {
        $('#employee_media').ejFileExplorer({
            "path": "Files",
            "ajaxAction": "http://mydomain.test/file-explorer",
            "enableThumbnailCompress": true,
            "width": "100%",
            "layout": "largeIcons",
            "toolsList": ["creation", "navigation", "addressBar", "editing", "copyPaste", "sortBy", "getProperties", "searchBar"],
            "isResponsive": true
        });
    })
</script>

[Muthukrishnan Kandasamy]

 

Hi Shanaka, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your reported problem in File Explorer control. File Explorer renders its inner container element based on the height of its parent element, so if we render the FileExplorer component in the default active tab it will render properly. But, if we render it in other hidden tab items it will not render properly in UI because the height of those hidden items will be 0, during initialization. Due to the parent element’s height is (hidden tab) is 0, FileExplorer will not render its container elements. 

 

To resolve your reported problem,  we need to refresh the FileExplorer control when switching to hidden tab item(making hidden tab as active tab). During the refresh method call, FileExplorer recheck the dimension of the current tab, and refresh the component, again. So, FileExplorer will recreate its element based on its parent height. 

 

/* tab active event */ 

    function Active(args) { 

        var feObj = $("#fileExplorer").ejFileExplorer("instance"); 

        feObj._refreshResizeHandler(); 

    } 

 

 

 

Description	Link
Getting started	https://help.syncfusion.com/js/fileexplorer/getting-started
How to section	https://help.syncfusion.com/js/fileexplorer/how-to
API reference	https://help.syncfusion.com/api/js/ejfileexplorer
Live demo	https://js.syncfusion.com/demos/jquery/#!/bootstrap/fileexplorer/DefaultFunctionalities

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K 

[shanaka perera]

Hi Muthukrishnan,

Thank you for your reply and unfortunately I got no any luck with what you suggested. I tried with below code:

$('#my-media-tab-item').on('click', function () {
     var feObj = $("#employee_media").ejFileExplorer("instance");
     feObj._refreshResizeHandler();
});

// then tried putting ejFileExplorer inside the onClick function 

$('#my-media-tab-item').on('click', function () {
     
     $('#employee_media').ejFileExplorer({
            "path": "Files",
            "ajaxAction": "http://mydomain.test/file-explorer",
            "enableThumbnailCompress": true,
            "width": "100%",
            "layout": "largeIcons",
            "toolsList": ["creation", "navigation", "addressBar", "editing", "copyPaste", "sortBy", "getProperties", "searchBar"],
            "isResponsive": true
        });
});

[shanaka perera]

Still getting the below output of the file explorer.

Collapsed Explorer

Two panes are hidden at the left and has to drag from the left to make them visible.

[shanaka perera]

Have to resize manually by dragging.

Image Link

[Muthukrishnan Kandasamy]

 

Hi Shanaka, 

 

Thanks for the update. 

 

Based on your provided details, we suspect that you have refreshed the File Explorer control before switching to the hidden tab. For resolving your reported problem, we need to refresh the File Explorer control once after you switched to the hidden tab. Please refer to the below code block. 

 

$("a[rel='nofollow' href='#employee-media']").on('shown.bs.tab', function(e) { 

            var feObj = $("#employee_media").ejFileExplorer("instance"); 

                feObj._refreshResizeHandler(); 

            }); 

 

 

 

We have prepared sample for your convenience, which can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/159401/ze/Bootstarp_Tab_FileExplorer1112392857 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K 

[shanaka perera]

Hi Muthukrishnan,

Thank you for your update and I have to say that your example code snippet working fine. But once I integrated it with my html page, it gives me the same hidden splitter pane still I have to drag them to the right to make visible, but no any css errors like before.

To get rid of manually dragging, I have to change my code like below and it is working as I needed.

$("a[rel='nofollow' href='#employee-media']").on('shown.bs.tab', function(e) {

    // have to adjust the splitter sizes ...
     $('#employee_media_splitter').ejSplitter({
        properties: [
            {paneSize: "15%"},
            {paneSize: "85%"}
        ]
    });

    var feObj = $("#employee_media").ejFileExplorer("instance");
    feObj._refreshResizeHandler();

});

I am using some other external style sheets in my page as well. Maybe they cause this problem. Anyways, thank you for your help.

[Muthukrishnan Kandasamy]

 

Hi Shanaka, 

 

Thanks for the update. 

 

We are glad to know that, your reported  issue resolved in your application. Please let us know, I you need any further assistance. 

 

Regards, 

Muthukrishnan K