Datagrid Horizontal Scrollbar not always visible - 7.1.5

Hi:

I’ve got a screen with a datagrid inside a tabsheet that won’t fit horizontally on a screen. I believe the horizontal scrollbar should always be visible. However, it is only visible AFTER I edit a row and exit the editor. Here’s what I mean:

BEFORE I edit a row:

image

AFTER I edit a row:

image

I’ve tried using a scrollbox around the datagrid, but that only displays the horizontal scrollbar at the very bottom of the table. To reach it, I have to vertically scroll down to the bottom, then move the horizontal scrollbar, then vertically scroll back up.

My tabsheet is set width=100% (tried AUTO but then all the table columns did not appear). Same happens if I set the datagrid to width=AUTO. Here’s what I mean with tabsheet width=AUTO, datagrid WIDTH=100%:

image

here’s the same thing with tabsheet width=100%, datagrid width=AUTO:

image

tabsheet width=AUTO, datagrid width=AUTO:

image

The only one that comes close is tabsheet width=100%, datagrid width=100%.

How do I get the horizontal scrollbar to always display at the bottom of the table, no matter the vertical position?

Hmmm… may be a browser issue? This is Edge. There is a very thin scrollbar showing there (I put a red box around it). Wish it was bigger, but at least it works.

image

Open to suggestions on how to get around this!

Hello Eraskin!

It seems DataGrid does not fit the layout and the horizontal bar is overlapped. It is hard to say what is wrong without the XML descriptor.

If you use splitPanel to divide Form and TabSheet, I can suggest you wrap your TabSheet into vbox and expand it:

<vbox width="100%" height="100%" expand="tabSheet">

In this case, set to DataGrid width="100%" height="100%".

You can try this sample: fdatagrid.zip (94.5 KB)

Yes, I didn’t post the XML because it is very large, but I managed to collapse most of it. Trying your suggestion, here is one version - using height=“AUTO” on the tab sheet:

image

It produces this screen:

image

As you can see, the horizontal scroll bar is there, but the table doesn’t fill the entire vertical space available. This defeats the purpose of the splitter, since I can’t see more of the table.

On the other hand, if change vboxTabsheet from height=“AUTO” to height=“100%”, I get this:

image

Now the vertical space is taken up, but the horizontal scroll bar is gone, even if I vertical scroll to the bottom of the table.

Strangely, we have discovered a weird trick. If I open the datagrid editor on any row, then just hit Esc to close it again, the horizontal scroll bar appears and stays until we leave the tab. It works as we want in that case, interacting with the splitter correctly.

Is there any way to get the best of both? The vertical space being used fully AND the horizontal scroll bar appearing?

Thank you for sharing the descriptor code, but unfortunately, I cannot reproduce this problem. Probably, the layout is created correctly, as you told a horizontal scrollbar is barely visible.

Take a look at styles, maybe something shifts DataGrid. If nothing is found, please share a small demo project where the problem is reproduced.