Qlik Community

Qlik Sense App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
Announcing the newest addition to the Qlik Community, Qlik Gallery! Learn More
martinmichalski1
New Contributor

Background Images on Sense focus theme

Hi community,

I am facing some trouble while using Sense Focus theme and creating a text&image objects with a background image.

On this case, the background images is just a blue rectangle. The text is writen on the object.

For some reason, it creates a white margin on top, not letting the image strech and fill the full object.

Here are some screnshots:

2 pixels:

Sense focus issue.png

1 pixel:

Sense focus issue2.png

I tried the following things with no success:

1) Changing the sizing between Stretch to fit, Always fit, Fit to width (all positions), fit to height (all positions) and original size (with images that had different sizes)

2) Changing the grid spacing between wide, medium and narrow

The only thing that fixes the problem is changing the theme to Sense Classic fixes the issue. The problem is that I need the background to be grey and I cannot customize a new theme. I can't use extensions either.

¿Do you know if there is a workaround?

Thanks in advance

5 Replies
martinmichalski1
New Contributor

Re: Background Images on Sense focus theme

UPDATE: I just realized that this is also happening with normal text boxes (without images). Changing the responsive behavior doesn't fix the issue.

I also saw that this comes from the Card.css document on the following properties:

.qv-client.qv-card #qv-stage-container #grid .qv-object-kpi .qv-inner-object .qv-object-header.thin {

  height: 28px;

}

prabhu0505
Valued Contributor

Re: Background Images on Sense focus theme

@martinmichalski1 Stuck with same exact issue, did you find any workaround? pls share if any...

Highlighted
martinmichalski
New Contributor III

Re: Background Images on Sense focus theme

No, I didn't find any solution using that theme.

I think you have only 3 options:

1) Create your own theme (modifying the existing one)

2) Download a different one, there a lot of them available online 

3) Make objects bigger than 1 pixel tall

prabhu0505
Valued Contributor

Re: Background Images on Sense focus theme

Thanks Martin!

That's where I'm heading towards...

prabhu0505
Valued Contributor

Re: Background Images on Sense focus theme

Below theme.css code is for creating object border like sense focus, change hsl code based on the border color requirement.

theme.css

.qvt-sheet {
background: #000000 !important;
}
.qv-inner-object {
border: 1px solid hsl(49, 100%, 50%);
padding: 5px;
}

Conclusion:-

Custom theme helped me to get rid of the top padding from Text and Extension objects

Final theme folder will have three files after adding above one

1. abcd.qext

2. theme.json

3. theme.css