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

HisakoK
Mega Guru

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.

HisakoK_0-1754454228592.png

 

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!

1 REPLY 1

M Iftikhar
Mega Sage

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.