DesktopListBox - column titles shift to left when showing scrollbar

A DesktopListBox has 4 columns. When showing the scrollbar (MouseEnter event), the 3 rightmost column titles shift to the left as the scrollbar appears. Column title text are then out of place, not in line with their rows beneath.
Config: Xojo v2022r1.1; MacBook Pro M1, macOS 12.4

How can this be prevented?


Looks like that in the header, column’s width are shorten a little bit. The side effect is that columns to the right shift left. Looks like the farther you go the right, the longest get the misalignment.

My first thought is that is a bug, but that would have been noticed.

Do you have any code running when the scrollbar is shown or hidden ?

I’ve never seen such a misalignment before. I checked with almost the same configuration.

How are-you setting the column widths ?
%, * or fixed values ?
(or a mix of all)

No event- triggered code running when the scrollbar is active. Only MouseEnter and MouseExit for scrollbar on and off.

Column widths are defined as %.

This is the code that populates the lis box:

// show preference list of databases

If Not sqliteConnected Then
  MessageBox("Database not connected")
  Return
End If
//Break
// clear list box
dbBox.RemoveAllRows

// get all rows from databases table
Var sql As String = "SELECT * FROM database;"
Var data As RowSet

Try
  data = sqliteDB.SelectSQL(sql)
Catch error As DatabaseException
  MessageBox("Preferences DB error: " + error.Message)
  Return
End Try


// create headings for listbox
dbBox.ColumnCount = 4
dbBox.ColumnWidths = "30%,10%,30%,20%"
dbBox.HasHeader = True
dbBox.HeaderAt(0) = "Host"
dbBox.HeaderAt(1) = "Port"
dbBox.HeaderAt(2) = "Database"
dbBox.HeaderAt(3) = "User"


For Each row As DatabaseRow In data
  dbBox.AddRow(row.Column("host") , row.Column("port"), row.Column("dbname"), row.Column("user"))
Next

data.Close

Besides, a ‘PaintCellBackground’ event triggers alternate row color:

If Color.IsDarkMode Then
  If (row Mod 2) = 0 Then
    g.DrawingColor = ColBackListDm ' DarkMode
  Else
    g.DrawingColor = ColBackListDk ' Je ne laisse pas noir par défaut car on lit mal le texte
  End If
  g.FillRectangle(0, 0, g.Width, g.Height)
Else
  If (row Mod 2) = 0 Then
    g.DrawingColor = ColBackListDf ' J'ai mis comme iTunes, avant c'était RGB(232,235,255)
    g.FillRectangle(0, 0, g.Width, g.Height)
    ' Else
    ' Reste à sa valeur (blanc)
  End If
End If
Return False

Thats all code here.

The described behaviour is observed when the ‘Has Vertical Scrollbar’ default is set to False.

When default is set to True, the same columns shift to the right when the scrollbar disappears (MouseExit). Just discovered that.

That confirms the columns shift when the scroll-bar appears and when it disappears. Did you check if in Issues a case was created about this issue ?

I wonder if it works fine on Windows or not.

When clicking into a row, the cells are also displaced to the new column position:

I can send you a project file.

It’s Ok with me, you may send me send me a PM.

Such an obvious bug would have been found before. Why would you hide the scrollbar when loading more data? I just did some check where I set “has vertical scrollbar” to false. And the scrollbar doesn’t show when the listbox has more data:

The intention is to not having the scrollbar around when there is no business in the box. Another refinement would be to show it only when there is actual scrolling (like in macOS).
However, column headers and row cells should not move when the scrollbar appears or disappears.
I suspect that there is something wrong with my code, but I don’t get it nailed.

This I found in Issues: https://tracker.xojo.com/xojoinc/xojo/-/issues/66442.
Not sure if it is related.

Use NSTableView from MBS or the piDog DataView instead. Mucking around in the bowels of macOS is not a good idea.

Does not seems to be related, in this case when scrolling horizontally the header does not scroll at the same time as the data.

I will have a look later this afternoon to your project.

1 Like

Try a fixed set of values for the width (instead of %, avoid *) for a test.

Using a fixed set of values actually prevents the column-shifting.
Merci beaucoup @Emile_Schwarz!

It is (more or less) in the docs…

% and * are dynamic.

+1
… I gave up on the Xojo listbox a few years ago (mainly because it didn’t have the functionality I needed and I was getting tired of attempting subclassing solutions) and went with piDog DataView. Besides having a boatload more built-in functionality, whatever few problems (bugs) I discovered, were fixed expeditiously by Jim McKay (piDog). Interestingly enough, one of the bugs I discovered was nearly identical to the issue raised here with text alignment dependent on a combination of presence/absence of the vertical scrollbar (which was set for auto) and the manner in which I was employing colorized headers. I sent Jim a sample file and had a fix within a few days time. I have literally dozens of DataView instances working flawlessly in most of my desktop apps doing a host of things I couldn’t do natively with the Xojo listbox.