Skip to main content

How to solve horizontal scroll issue when table is bigger than screen size


The table below cannot scroll to the right any further.

  • I have selected the third column and it's barely visible. The two other columns can't be seen at all.
  • The scroll bar highlighted in yellow controls the horizontal scroll. The scroll bar above is static and won't move.

How do I edit the table?

horizontal scrolling issue.png


You can always reach all the contents in the tree widget or you can apply special CSS that will force the container to grow more than the space it has.

For instance, if you applied the following CSS:

.dbottom {
  overflow : scroll;
  height: 200px;
  -servicestudio-width: 100%;

The containers will have enough space to display everything in the IDE without the scroll, of course it will have an impact on the overall design but that property will only be present in the IDE.

Regarding the -servicestudio-[property], this is a way you can use to apply specific CSS in the IDE that is not included in the actual CSS of the pages.

Just keep in mind that if you start using this kind of properties you'll have interfaces very different in the IDE and the browsers, so be careful :)

  • Was this article helpful?