Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
wcoleman0908
Partner - Contributor III
Partner - Contributor III

widget html boarder not showing

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:

wcoleman0908_0-1603939769142.png

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?

Labels (3)
4 Solutions

Accepted Solutions
ErikWetterberg

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'??

View solution in original post

Anil_Babu_Samineni

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

Please add me Anil_Babu_Samineni to interact faster when reply back. Speak low think High.

Before develop something, think If placed (The Right information | To the right people | At the Right time | In the Right place | With the Right context)

View solution in original post

wcoleman0908
Partner - Contributor III
Partner - Contributor III
Author

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

 

View solution in original post

wcoleman0908
Partner - Contributor III
Partner - Contributor III
Author

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

View solution in original post

5 Replies
ErikWetterberg

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

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

Please add me Anil_Babu_Samineni to interact faster when reply back. Speak low think High.

Before develop something, think If placed (The Right information | To the right people | At the Right time | In the Right place | With the Right context)
wcoleman0908
Partner - Contributor III
Partner - Contributor III
Author

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
Partner - Contributor III
Partner - Contributor III
Author

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
Partner - Contributor III
Partner - Contributor III
Author

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