cancel
Showing results for 
Search instead for 
Did you mean: 

BLOX widget script level CSS changes

ElementUX
8 - Cloud Apps
8 - Cloud Apps

I have custom dashboard level script to style widget borders/headers:

dashboard.on('widgetready', function(d){

$('.widget')
.css('border-radius','10px')
.css('border', '#c8c8c8 solid 1px');
$('widget-header')
.css('background-color','#f2f2f2')
.css('height','40px')
.css('border-bottom', '#c8c8c8 solid 1px')
.css('padding-top','3px');

}

I have a top BLOX widget with 3 buttons with no title. It obviously now picks up the dashboard widget header styles and I do not want that on this widget. I need no border/no header.  I tried to add the above code on the BLOX level script to override with 0px height and border settings, but that didn't work.  Is there another way to code that? Any ideas? 

ElementUX_0-1652978095479.png

 

3 REPLIES 3

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @ElementUX ,

Since it is a blox, please use`titleStyle` in blox script to remove widget title

 "titleStyle": [
        {
            "display": "none"
        }
    ]

harikm007_0-1653052171292.png

-Hari

Hi @harikm007   The title is already set to none.  The issue has to do with the dashboard level widget css settings.  I see you had a working solution on how to ID specific widgets to specify borders, now I just need help on how to change the widget-header settings in the same script.  See here:  https://community.sisense.com/t5/build-analytics/setting-the-borders-for-individual-widgets-in-the-d...

Thanks! 

Hi @ElementUX ,

I am trying to do the same.  Did you ever find a workable solution?

Thank you in advance for any guidance!