Extending Sidebar with a button similar to Google Maps

Question

Hello,I'm new to Angular, but in the past days i successfully the <ejs-sidebar> component to my project. It looks great and works also very well.I'm currently experiencing to implement a button, similar to the button used on Google-Maps to open/hide the sidebar (see the area marked with a red circle on the screenshot). I would like to place the button at the right edge and in the middle of the sidebar (similar to Google Maps).At the moment without any success.Is it even possible to extend this sidebar ?If yes, can you give me some hint, how to go on with the implementation ?Thanx in advance,Best Regards,Daniel

Keerthana Rajendran · Accepted Answer

Hi Daniel, 
 
Most welcome. 
 
We are glad that the provided suggestion helped you. 
Query: Is it also possible to display the vertical scrollbar but keeping the width of the Sidebar unchanged and let the TreeView fill the remaining vertical space ? 
  
Yes, it is possible to display the vertical scrollbar with same width of Sidebar. In the previous sample, width of Sidebar is changed based on the text length of expanded tree nodes.  
 
If the text length doesn't exceed the Sidebar width, then it remains the same.  
 
Reference sample: https://stackblitz.com/edit/angular-eqgar8-gx7kmv?file=app.component.ts 
 
Query: Is it so, that a fixed height has to be supplied to allow the scrolling ? 
 
Yes, the TreeView element must contain a certain height and overflow as auto to allow scrolling when the height exceeds. 
 
Regards, 
Keerthana R.

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Daniel, 
 
Greetings from Syncfusion support. 
 
We checked your expected requirement on Sidebar and prepared a demo sample with a Sidebar which opens/collapses when clicking on the sticky button which is placed outside the Sidebar element using position styles. 
 
Please refer to the following sample. 
 
Sample: https://stackblitz.com/edit/angular-eqgar8-oxgmbv?file=app.component.css 
 
Also, check out the following links to know more about Sidebar component. 
 
Demos: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default 
 
Documentation: https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started/ 
 
API Reference: https://ej2.syncfusion.com/angular/documentation/api/sidebar/ 
 
Please let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S.

Daniel Tahin · Answer

Thank you very much for the demo code. It is exactly, what i was looking for. You really saved my day :-)

Keerthana Rajendran · Answer

Hi Daniel, 

Most welcome. We are happy to hear that the provided sample helped you. Please get back to us if you need any further assistance. We will be happy to assist you. 

Regards, 
Keerthana R.

Daniel Tahin · Answer

I extended the sidebar with an "ejs-treeview" (code). This also worked very fluently with very little effort. Unfortunately there are 2 things where I would need your help :-).

1) If the text is too long (e.g. the menu item "Components" -> "Calendar and some other things"), the text should be wrapped in several lines, but the horizontal scrollbar should not apear at the bottom. It would be also good if you could click on all the lines of the text. At the moment you can only click on the first line. There are already CSS instructions from me in treeview.css, in the line / * word wrap * /, but it doesn't work completely.

2) Is there a way to add a vertical scrollbar without the sticky button disappearing ? For example, if you open both menu items "Components" and "API Reference", then you cannot see all the submenu items. (When I added the vertical scrollbar, the sticky button was no longer visible.)

Thank you again for your support,

Daniel

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Daniel, 

We have checked your expected requirements on TreeView and Sidebar components.  

Query 1: It would be also good if you could click on all the lines of the text. At the moment you can only click on the first line. 

We have added the solution to meet this requirement in your shared sample. Also, please check out the following link to know about the solution. 

https://ej2.syncfusion.com/angular/documentation/treeview/how-to/hover-multi-line-tree-node/ 


Query 2: Is there a way to add a vertical scrollbar without the sticky button disappearing ? (When I added the vertical scrollbar, the sticky button was no longer visible.) 

We can add vertical scrollbar to the TreeView by adding height and overflow CSS styles. In our last shared sample, we have set left with static value for your reference. However, now we have updated with percentage unit and removed the width of the Sidebar. So, it would adapt the width of TreeView. Using these changes, you can resolve your reported problem. 

Sample: https://stackblitz.com/edit/angular-eqgar8-nwsdkn?file=app.component.css 

Please revert if you need any further assistance. 

Regards, 
Shameer Ali Baig S.

Daniel Tahin · Answer

Thank you very much for your help.It worked very good.I have an additional question to query 2.Is it also possible to display the vertical scrollbar but keeping the width of the Sidebar unchanged and let the Treeview fill the remaining vertical space ?After a while somehow i realized a solution, to completely hide both of the scrollbars, but allowing the scrolling. To (re)calculate the height of the Treeview (to fill the remaining space) i used a window-listener.Is it so, that a fixed height has to be supplied to allow the scrolling ?Thank you again for your assistance,Daniel

Daniel Tahin · Answer

Thank you again for your support.

Keerthana Rajendran · Answer

Hi Daniel, 

Most welcome. Please get back to us if you need any further assistance. We will be happy to assist you. 

Regards, 
Keerthana R.