Symptoms
Disabled table font color matches background color
Diagnoses
The CSS opacity value is lowered when a Form layout element is disabled. The computed font color was matching the background color making things hard to see.
Resolution
The team opted to disable controls individually instead of the whole Table itself. I created a workaround detailed below:
---
There are a couple of workaround options here, the simplest being the following: a literal, hidden Data Label on the form with the following style tag:
<style>span.disabled{opacity:1 !important;}</style>
This will override the CSS for *all* disabled spans, setting the opacity to 1 (or 100%). You can change this to any value in decimal format (e.g. 0.7 for 70%).
---
Alternatively, you target target a specific table to change its child font colors. Though, due to the fact that a lot of SmartForm HTML elements' IDs are generated every page load, it can be difficult to target elements specifically. One way to easily get a hold of an element programmatically is to place a named Data Label within or near it to target it via jQuery proximity methods like parents() and children(). For instance, using a table control, I placed a hidden Data Label named 'dlblTableJS' in a cell of the table. This can be targeted with the following:
$('span$name="dlblTableJS"]')
Searching its parents for the first instance of a table yields our target:
$('span$name="dlblTableJS"]').parents('table').first()
From here you can get search for SPAN or A tags and change their CSS opacity property:
$('span$name="dlblTableJS"]').parents('table').first().find('span').css('opacity','1','important')
To integrate this in a form/view, create a hidden, literal Data Label that has an expression with the JavaScript wrapped in SCRIPT tags:
<script>
$('span$name="dlblTableJS"]').parents('table').first().find('span').css('opacity','1','important')
</script>
In this context though, our JavaScript will load before page styling is applied, so we can load the function once the page has loaded via the ready() function:
<script>
$(document).ready(function(){
$('span$name="dlblTableJS"]').parents('table').first().find('span').css('opacity','1','important')
})
</script>
---
