Navigationpanesettings doesn't set correct MinWidth value

Hi,

I have a diagram that opens a dialog containing a filemanager, but there is an issue when I try to set the minWidth of the navigation Pane.

It doenst seem to set the registered (bigger than default) value to the component. It only works after dragging the slider a little bit, which only THEN correctly sets the defined minWidth value. You can see this happen in the .zip containing the .gif


"@syncfusion/ej2-angular-filemanager": "19.2.56",

What i tried(simplified):

-Setting the property in the component directly as it is generated, but doesnt work.

public navigationPaneSettings: NavigationPaneSettingsModel = { minWidth: 400, visible: true };

[navigationPaneSettings]='navigationPaneSettings'

>

-Refreshing after the component is created, hopefully thinking this would set the adjusted value correctly like in a grid, but no.

@ViewChild("fileObj") public fileManager: FileManagerComponent;

created(){

this.filemanager.refresh();

}

Any idea what is happening?



Attachment: navigationpane_6ba4419.zip


1 Reply

SS Sivakumar ShunmugaSundaram Syncfusion Team May 25, 2022 11:29 AM UTC

Hi Laurens,


Greetings from Syncfusion support.


We have validated your reported query in the Angular FileManager component. To achieve your requirement, you need to include the below style to customize the splitter width for initial rendering. because min and max properties were not considered when initializing the splitter. This is the default behavior of the Splitter component. We have attached the sample for your reference.


Refer the below code snippet.

[app.component.ts],

 

this.navigationPaneSettings = {

  minWidth: '400px',

  visible: true,

};

 


[app.component.css],

.e-filemanager .e-splitter .e-pane {

  min-width: 400px;

}

 


Sample: https://stackblitz.com/edit/angular-vpu87x?file=app.component.ts


Please check the attached sample and get back to us if you need any further assistance.


Regards,

Sivakumar S


Loader.
Up arrow icon