Hozitontal scrolling

[bfssfb]

Hi, I’ve been trying to get horitontal scrolling for the following fields, but I can’t display all the content correctly (red arrow).

Has anyone ever had this problem?

[ced (Cédric Krier)]

First you should try with the standard theme.

Otherwise we have a CSS rule like:

.treeview .cell .widget > * {
  overflow: hidden;
  text-overflow: ellipsis;
}

It prevent cell to have horizontal scroll and add ... if the text is greater than the available space.
In order for the user to see the full content, it is put in the title attribute so it is display on mouse over.

Now if you know that this field/column will need frequently more spaces, you should increase its expand value.

[bfssfb]

Hello ced,

Thanks for your reactivity, but in the end I still can’t get the results I want by modifying these properties.

I’d really like all the Status, Start date, Duration … and Payment recipient fields to be displayed in their entirety, and for a hozitontal scrollbar to appear if there are any fields left to display, without necessarily modifying the layout.

A bit like the GIF example:

Or maybe it’s a behavior that can’t be achieved without touching the entire css styles?

Best regards

[ced (Cédric Krier)]

sao is designed to avoid as much as possible horizontal scroll.

[bfssfb]

Hello Cédric,

I have applied the recommendations you gave me, i.e. modify the following properties:

    td {
        ...
        text-overflow: ellipsis;
        overflow: hidden;
        ...
    }

So I simply commented on these two lines of code to see what would happen.
I’m almost satisfied: the text is no longer truncated, I get the horizontal scrollbar, but the table size doesn’t increase.

[bfssfb]

I assumed that the problem now came from the fact that the tables have the table-layout: fixed property, but when I set this table-layout: auto property to really just this table, and below the result I get, which breaks the whole layout :

[bfssfb]

When in fact the layout is as follows:

[ced (Cédric Krier)]

You should probably set overflow: scroll.