Another WebListbox CSS Challenge - Different Header Background?

[Tom_Dixon]

I am hoping to build upon the excellent solution that @Anthony_G_Cyphers privided in my post last week https://forum.xojo.com/t/web2-weblistbox-borderless-and-no-alternating-row-color/70885/22 and come up with a custom WebListbox that would be mostly identical to what my standard style looks like except to have a different header background and not be selectable.

Currently I have the normal header style set in the App HTML Headers to match my Bootstrap primary color which is a gradient.

<style>
.table th {
    background-image:linear-gradient(#2c508a, #14243e 50%, #0f1b2e);
    color:white;
    white-space: nowrap; 
}
</style>

I have tried various things to create a custom style using the pattern that Anthony provided and I can set the header to a different grayscale header to represent that the WebListbox is disabled, but it also changes the body color and I have been unsuccessful at finding a setting that will give me all the normal formatting the same as normal with only the header background image gradient changed.

<style>
  .disabledTable,
  .disabledTable table,
  .disabledTable table td,
  .disabledTable table th,
  .disabledTable table tr,
  .disabledTable .table th {
    background-image:linear-gradient(#9c9c9c, #707070 50%, #666666);
    color:white;
    white-space: nowrap; 
}
</style>

Any of the CSS gurus have any advice? Am I approaching this wrong or just missing the necessary style parameters to make the style identical to normal except for the header?

[AlbertoD]

Try
Shown event:

ExecuteJavaScript( "$('#" + me.ControlID + "').addClass('disabledTable');" )

App HTML Header:

<style>
  .disabledTable .table th {
    background-image:linear-gradient(#9c9c9c, #707070 50%, #666666);
    color:white;
    white-space: nowrap; 
}
</style>

I hope this is what you want.

[Anthony_G_Cyphers]

Here’s my solution to preserve all of the previous styling and apply a disabled state to the header (and set the table’s Enabled property).

Add the following method to a module (as I assume you’ll be using this in multiple places, it makes the most sense to create an extension method):

Public Sub setEnabled(extends l as WebListBox, value as Boolean)
  l.Enabled = value
  l.ExecuteJavaScript( "$('#" + l.ControlID + "')." + if( l.Enabled, "remove", "add" ) + "Class('disabledTable');" )
End Sub

Modify App.HTMLHeader to:

<style>
  .borderlessTable,
  .borderlessTable table,
  .borderlessTable table td,
  .borderlessTable table tr,
  .borderlessTable table th,
  .borderlessTable .dataTables_scrollHead,
  .borderlessTable .dataTables_scrollBody {
    border-color: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  .borderlessTable table thead th {
    background-image:linear-gradient(#2c508a, #14243e 50%, #0f1b2e) !important;
    color:white !important;
    white-space: nowrap; 
  }
  .borderlessTable.disabledTable table thead th {
    background-image:linear-gradient(#9c9c9c, #707070 50%, #666666) !important;
  }
</style>

Then, when you wish to enable/disable a WebListBox, call the setEnabled method:

Listbox2.setEnabled( not Listbox2.Enabled )
// or
Listbox2.setEnabled( true )
// or
Listbox2.setEnabled( false )

[Tom_Dixon]

Thanks again to both of you! I tested Alberto’s solution and that works. It didn’t occur to me to not include the other lines Anthony used in the borderless solution. I’ll try Anthony’s solution here in a bit to see how that works too. That would be a handy way to change a WebListbox enabled/disabled state appearance. I don’t necessarily need it for this particular instance, but it’s nice to have that option as I progress on this particular project.