How to hide scrollbars for HTML field.

[Abhijit Das7]

Hi team,

I have one custom HTML field on form which loads image. In other instance it is fine but in one particular instance I am getting scroll bars. How can I hide these scroll bars on right and bottom. In other instance I am not getting these scrollbars but getting in one instance which is Yokohama.

Thanks in advance

[Community Alums]

Hi @Abhijit Das7 ,

Solution 1: Use CSS to Hide Scrollbars

<style>
  .your-image-container {
    overflow: hidden; /* Hides both horizontal and vertical scrollbars */
    max-width: 100%; /* Ensures the image fits within the container */
    max-height: 100%;
  }
  
  /* If needed, specifically hide scrollbars */
  .your-image-container::-webkit-scrollbar {
    display: none; /* Hides scrollbars in Chrome, Safari */
  }
  
  .your-image-container {
    -ms-overflow-style: none; /* Hides scrollbars in IE/Edge */
    scrollbar-width: none; /* Hides scrollbars in Firefox */
  }
</style>

Solution 2: Check HTML Field Properties

1. Open the form designer and inspect the HTML field settings.
2. Check if the width/height is constrained, which might be forcing scrollbars.
3. Adjust the CSS width and height using max-width: 100% or object-fit: contain;

[DoDo labs___]

Hi, where should I write this CSS code within the dictionary entry?

[Community Alums]

[Ankur Bawiskar]

@Abhijit Das7 

Did you try in other browsers as well with different users Firefox, edge?

What's the browser zoom level? try keeping 100% and see in all browsers.

If my response helped please mark it correct and close the thread so that it benefits future readers.