1. Home
  2. Forum
  3. Vue
  4. Change the default width of the NavigationPane

Change the default width of the NavigationPane

Hello,

I actually would like to change the default left Navigation Pane in the document manager vue component.
I know I can use the navigationPaneSettings to set max and min width, but what I want is to have a default less wide pane.

Also, I'd like to display a thin line separators between Modified and Size columns as there's a live between the left panel and the file browser.

Thanks a lot for your help,

3 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team February 17, 2021 02:14 PM UTC

Hi Omar, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in FileManager component. 
 
Query1: Change the default width of the NavigationPane 
 
To change the default width of navigation pane, you have to set min and max of navigationPaneSettings as same width. 
 
Refer to the below code snippet. 
 
      navigationPaneSettings: { 
        maxWidth: "240px", 
        minWidth: "240px", 
        visible: true, 
      } 
 
You also need to include the below style to customize the splitter width for initial rendering. Because min and max properties were not considered on initializing the Splitter. This is the default behaviour of Splitter component. 
 
.e-filemanager .e-splitter .e-pane { 
  min-width: 240px; 
} 
 
.e-filemanager .e-splitter .e-pane:first-child { 
  max-width: 240px !important; 
} 
 
Query 2: Separator between Modified and Size columns 
 
The FileManager component is designed based on Windows File explorer. We are dynamically rendering the splitter for the sub columns of FileManager while clicking the header. But you can include a separator through customization. Please refer to the below styles. 
 
.e-filemanager .e-grid .e-rowcell:nth-child(4) { 
  border-right: 1px solid grey; 
} 
 
.e-filemanager .e-grid .e-gridheader tr th:nth-child(4) { 
  border-right: 1px solid grey; 
} 
 
Please find the sample demonstrating the solution. 
 
 
Please refer the following links to know more about the Vue FileManager component. 
 
 
 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


OM Omar February 19, 2021 12:06 PM UTC

Hello Indhumathy,

I actually tried it but I faced an issue when I resize the right pane it screws the 'date modified' and 'size' columns.

Thanks

IL Indhumathy Loganathan Syncfusion Team February 22, 2021 04:21 PM UTC

Hi Omar, 
 
We have validated your reported query and able to reproduce the issue. You can fix this by adding the below customization. 
 
.e-filemanager .e-grid { 
  width: 1004px !important; 
} 
 
Please find the sample from the below link. 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Marked as answer
Loader.
Up arrow icon