spModal scroll bar
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-29-2023 09:24 AM
Hi Developers,
Is it possible to add a vertical scroll bar in a spModal? I have been looking through the documentation for spModal and haven't come across anything related to scrolling.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-13-2024 05:29 AM
Hi @zynsn
In ServiceNow, `spModal` is used within the Service Portal to create modal dialogs. While the `spModal` itself does not have a direct property to enable scrolling, you can achieve a vertical scroll bar by customizing the CSS for the content within the modal.
Here's a general approach to add a vertical scroll bar to the content within an `spModal`:
1. Define a CSS class with a fixed height and overflow property set to auto. This will ensure that any content exceeding the defined height will be scrollable within the modal.
.modal-content-scrollable {
max-height: 400px; /* Adjust the height as needed */
overflow-y: auto;
}
2. Apply this CSS class to the content container within the modal's HTML template.
<div class="modal-content-scrollable">
<!-- Your modal content goes here -->
</div>
3. When you create the modal using `spModal`, ensure that the template includes the div with the custom CSS class.
Here's an example of how you might use `spModal` with a custom template that includes the scrollable content area:
spModal.open({
title: 'My Scrollable Modal',
message: 'This is a message to display in the modal, which will be scrollable if it exceeds the max height.',
widget: 'widget-id', // If you're using a widget within the modal
buttons: [
{label: 'Close', cancel: true}
],
size: 'lg', // Optional: You can set the size of the modal (sm, md, lg)
// Your custom template that includes the scrollable content area
templateUrl: 'custom_modal_template.html'
});
Remember to include the CSS either in the global style sheet for the Service Portal or within the specific widget that you are using to create the modal.
If you are using a widget within the modal, you can include the CSS class in the widget's HTML template and style it accordingly.
Please mark this response as correct or helpful if it assisted you with your question.