Qlik Community

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Read about the latest Qlik Community enhancements on the Community News blog!
cancel
Showing results for 
Search instead for 
Did you mean: 
victorlm
Partner
Partner

Override CSS Qlik Sense Widget

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!
Print community.jpg

Labels (4)
1 Solution

Accepted Solutions
victorlm
Partner
Partner
Author

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"
}

 

View solution in original post

4 Replies
EliGohar
Partner
Partner

@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

ErikWetterberg

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.

victorlm
Partner
Partner
Author

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

victorlm
Partner
Partner
Author

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"
}

 

View solution in original post