sidebar scroller with arrow

[mahendra venkatrao manale]

Hello,

  In our project we want sidebar scrolling with arrow.by default its showing without up and down arrow in some cases.We want to change with up and down arrow.I have attached screenshot for your reference.

Attachment: sidebar_65fb8bbe.rar

[LeoLavanya Dhanaraj]

Hi Mahendra,

Greetings from Syncfusion support.

From your shared details, we understand that you want the up and down arrows in the scrollbars while using the Sidebar component. But in your screenshot, you have used the Dialog Box and Dropdowns. We were not clear about the exact component you are using at your end. You can refer to the below demo and documentation for the Sidebar component.

Documentation: ​https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started/

Demo: ​https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default

Whether you have rendered the Dialog Box and Dropdown components inside the Sidebar. Please provide some additional details to validate your reported issue. If possible, please provide the sample or code snippets. These details will help us to check and provide a prompt solution. Please get back to us with the requested details.

Regards,

Leo Lavanya Dhanaraj

[mahendra venkatrao manale]

hi,

 As you mentioned i am sending snapshot of code which we are used. and we want to add scrollbar with arrow in this two codes

Attachment: scrollbar_6e1f23af.rar

[LeoLavanya Dhanaraj]

Hi Mahendra,

From your shared details, we understand that you want to enable the up and down arrows in the scrollbar. But we were not clear about the component that was used at your end. Whether you want to enable the scrollbars for a simple div container or any other Syncfusion component. We need some additional details to validate your requirements.

Because the shared code snippets don't include any parent Syncfusion components, they only contain checkbox component. So, could you please share the exact component that you want to show the scroll bar? If possible, share with us a pictorial representation or a complete code snippet. These details will help us to check and provide a prompt solution.

Please get back to us with the required details.

Regards,

Leo Lavanya Dhanaraj

[mahendra venkatrao manale]

Hello i have mailed you required code and photo for your reference. kindley provide solution or arrange meeting as soos as possible. we are facing production issue

[LeoLavanya Dhanaraj]

Hi Mahendra,

Sorry for the inconvenience.

The Sidebar is an expandable and collapsible layout component that typically acts as a side container to place primary or secondary content alongside the main content of a web page. The content of Sidebar can be customized based on user needs. We have prepared an Angular Sidebar component with the latest version. Here, we have rendered the card component inside the Sidebar. To meet your scrollbar with up and down arrow requirement, you can customize the sample using overflow and height CSS property for the Sidebar and Card components. By default, Sidebar(.e-sidebar) having an overflow property as Auto. For card component, we have manually set the height and overflow CSS property.

Check the below code snippet.

[app.component.html]

<ejs-sidebar id="dockSidebar" #dockBar ... >

    ...

    <div class="cardContainer">

        <div tabindex="0" class="e-card" id="basic">

            ...

        </div>

    </div>

</ejs-sidebar>

 

[app.component.css]

.cardContainer {

    border: 1px solid gray;

    height: 200px;

    overflow: auto;

}

Sample : https://stackblitz.com/edit/angular-wnzkrh-5ztrhp?file=app.component.html

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

Regards,

Leo Lavanya Dhanaraj