Images in Chatbot Bubbles Are Cut Off – Is There a Way to Add Scrollbars or Resize via CSS?

[HisakoK]

Hello,

I am experiencing an issue where images displayed within chatbot message bubbles in the ServiceNow Employee Portal are cut off and not fully visible.

Currently, I am unable to see the entire image within the chat bubble.

I would like to know:

• Is it possible to edit the CSS to add scrollbars to the chat bubble, or otherwise resize the bubble so that the full image can be displayed?
• Are there any solutions, other than right-clicking the image and opening it in a new tab, that would allow users to view the entire image directly within the chat interface?

Any suggestions or best practices would be greatly appreciated.

Thank you!

[M Iftikhar]

Hi @HisakoK, 

You can apply CSS rules to the chat bubble to better handle large images. Here are two common approaches:

• You can ensure that the image automatically resizes to fit within the confines of the chat bubble. To do this, you can set the max-width and height properties of the image to 100% and auto respectively. This will make the image responsive to the width of the chat bubble.

Example CSS:

.sn-connect-message-content img {
  max-width: 100%;
  height: auto;
}

• If you prefer to display the image at its original size within a constrained area, you can add scrollbars to the container of the image. This can be achieved by setting the overflow property to auto. You may also need to set a specific max-height or max-width on the container.

Example CSS:

.sn-connect-message-content {
  overflow: auto;
  max-height: 300px; /* Adjust the max-height as needed */
}

To apply these changes, you will need to identify the correct CSS selectors for your portal's theme and add the custom CSS to your portal's stylesheet.

Thanks & Regards,
Muhammad Iftikhar
If my response helped, please mark it as the accepted solution so others can benefit as well.