Formatting Text using Table Widget
I created a table widget for our dashboard to display long sentences. Pivot was not ideal since we cannot wrap the words around pivot, instead it shows an ellipsis.
My goal is to have this:
look like this:
Funny thing is that, When I zoom out the dashboard or click on edit widget I would see my Script pop for a second then goes back to the basic layout:
This will appear for a second then it will go back to this
The code that I used.
```
widget.on('ready', function(sender, ev){
var $ps1 = $("th", element);
$ps1.css('font-size' , '14px');
$ps1.css('font-weight' , 'bolder');
$ps1.css('color' , 'white');
$ps1.css('background-color' , '#49166d');
$ps1.css('text-align' , 'center');
$ps1.css('vertical-align' , 'middle');
var $ps2= $("td", element);
$ps2.css('font-size' , '24px');
$ps2.css('font-weight' , 'bolder');
$ps2.css('color' , '#4B286D');
});
```
-
Is that all the code you are using in the script editor? Because this is what I get when I use that code. Are you using the "customStyle" plugin as well. This might be over writing the script css after the fact.
I see this little green boxes around. You should probably specify which "th"s and "tb"s you want to change or it will change all of them on the page.
const widgetElement = prism.$ngscope.appstate === 'dashboard' ? $('widget[widgetid="<<THAT WIDGETS ID>>"]') : undefined;I think you could use this instead of Element?
-
Hi Delsaran,
I appreciate your help in looking in to this thread.
I am using a web version of SiSense.
So basically, I am using the script on widget level so it does not affect other widgets even if I use td or th.
I'll be needing it to format in this way, only on the specific widget.
-
Hi Kahel,
I think the tag you're looking for in "thead".
widget.on('ready', function(sender, ev){
var $ps1 = $("th", element);
$ps1.css('font-size' , '14px');
$ps1.css('font-weight' , 'bolder');
$ps1.css('color' , 'white');
$("thead", element).css('background-color' , '#49166d');
$ps1.css('text-align' , 'center');
$ps1.css('vertical-align' , 'middle');
var $ps2= $("td", element);
$ps2.css('font-size' , '24px');
$ps2.css('font-weight' , 'bolder');
$ps2.css('color' , '#4B286D');
});As for the refresh, what pop up comes up?
Please sign in to leave a comment.
Comments
3 comments