widget html boarder not showing

[wcoleman0908]

when linking to a custom widget in Sense (Sept 2020) the HTML  does not render correctly.

Execute HTML table from command line then executed from Qlik Sense App widget:

Notice the table boarder is missing when i execute it from the Sense Widget

Does anyone have any thoughts as to why this is happening?

[ErikWetterberg · Accepted solution]

Looks like some styling is missing. Could be that a stylesheet is not loaded, or that styles are conflicting. What do you mean by 'command line'??

[Anil_Babu_Samineni · Accepted solution]

Check the Div tag how style is looks? You should find with border-style

[wcoleman0908 · Accepted solution]

Yes agreed, this is the issue, I am styling it as seen below. I create the HTML using PowerShell ISE using the following script and placed the resulting Test.html in the Content Library:

$head = @"
<style>
body { background-color:#FAFAFA; font-family:Arial; font-size:12pt; }
td, th { border:1px solid black; border-collapse:collapse; } th { color:white; background-color:black; }
table, tr, td, th { padding: 12px; width:400px; margin: 0px }
#thead, tbody tr {display:table; width:100%; table-layout:fixed;} thead { width: calc( 100% - 1em )}
tr:nth-child(odd) {background-color: lightgray} table { margin-left:50px; } img { float:left;
margin: 0px 25px;
}
</style>
"@

#Set the inbound file location, change it to your working directory.
$Workfolder = "C:\Users\XXXXXXX\Documents\QLIK\PowerScript"

$csvfile = "$Workfolder\Test.csv"

Import-Csv $csvfile | ConvertTo-Html -Head $head -Body $fragments -Title "Test One" `
-CssUri "$Workfolder\Test.css" `
-pre "<h1>Test Convert HTML/QLIK</h1><h2> To search for Fields/Apps/Streams across all dashboards in the Qlik Sense environment </h2>" `

The CSS FILE looks like this:

@charset "UTF-8";
Body {
font-family: "Tahoma", "Arial", "Helvetica", sans-serif;
background-color:#ffffff;
}
table
{
border-collapse:collapse;
width:60%
}
td
{
font-size:12pt;
border:1px #3399ff solid;
padding:5px 5px 5px 5px;
}
th
{
font-size:14pt;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#3399ff;
color:#FFFFFF;
}
name tr
{
color:#000000;
background-color:#3399ff;
}

-post "<br><I>Updated file on $(get-date)</I>" > Test.html

[wcoleman0908]

I tried changing it to this in PowerShell and looked better but didn't Wrap a boarder around the whole HTML. refer to the initial screen shots above

Here is the change:

$head = @"
<style>
body { background-color:#FAFAFA; font-family:Arial; font-size:12pt; }
td, th { border:2px lightgrey; border-style:groove; } th { color:white; background-color:blue; }
table, tr, td, th { padding: 12px; width:400px; margin: 0px }
head, body tr {display:table; width:100%; table-layout:fixed; border:2px lightgrey;} head { width: calc( 100% - 1em )}
tr:nth-child(odd) {background-color: lightgray} table { margin-left:50px; } img { float:left;
margin: 0px 25px;
}
</style>
"@

[wcoleman0908 · Accepted solution]

Great idea, sometimes we just need to refocus.  I updated the following style and it worked much better:

<style>
body { background-color:#FAFAFA; font-family:Arial; font-size:12pt; }
td, th { border:2px lightgrey; border-style:groove; } th { color:white; background-color:blue; }
table, tr, td, th { padding: 12px; width:200px; border-style:groove; margin: 0px }
head, body tr {display:table; width:100%; table-layout:fixed; border:2px lightgrey; } head { width: calc( 100% - 1em )}
tr:nth-child(odd) {background-color: lightgray} table { margin-left:50px; } img { float:left;
margin: 0px 25px;
}
</style>

Thanks for the keen eye