spModal scroll bar

zynsn
Tera Expert

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.

1 REPLY 1

Iraj Shaikh
Mega Sage
Mega Sage

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.