Another WebListbox CSS Challenge - Different Header Background?

[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 )