topic Override CSS Qlik Sense Widget in Integration, Extension & APIs

Override CSS Qlik Sense Widget

victorlm — Sat, 16 Nov 2024 01:21:33 GMT

Hello people!

I was giving some shot on creating widget and faced with a issue that overcomes my knowledge. I realized that Qlik sense put his own css classes in the div tag, but one of them is kinda "breaking" my widget.

In the printscreen below, I want to take away the green area selected, that is the qv-inner-object class padding. Is this possible with widget? Or by extension? Or it is not possible? Thanks!

Re: Override CSS Qlik Sense Widget

EliGohar — Wed, 30 Sep 2020 06:20:04 GMT

@victorlm Do you want to remove the area in green? Create a custom theme

Then in the CSS of your custom theme, include the full name of the class and use display:none; property to remove it

Re: Override CSS Qlik Sense Widget

ErikWetterberg — Wed, 30 Sep 2020 09:21:48 GMT

In an extension you can use closest('.qv-inner-object') to find the element and then override the padding CSS with some CSS. Don't think this is possible in a widget.

Re: Override CSS Qlik Sense Widget

victorlm — Wed, 30 Sep 2020 12:39:16 GMT

Thank you @ErikWetterberg and @EliGohar !. I'll search those possible solutions here.

Re: Override CSS Qlik Sense Widget

victorlm — Wed, 30 Sep 2020 15:47:09 GMT

Used custom theme and just put _cards attribute to false

{ "object": { }, "dataColors": { }, "palettes": { }, "customStyles": [ ], "scales": [ ], "_inherit": true, "_variables": { }, "_cards": false, "color": "@TextColor", "fontSize": "@TextSize", "backgroundColor": "@BackgroundColor" }