Sense element resizing - fonts and element placement

[#1]

Hi all,

Are there any CSS classes that can be utilised, or any other techniques that can be reused from Sense to achieve a responsive capability with custom extensions?

Clearly things are different with Sense because objects are constrained within a ‘bounding rectangle’ which are typically a percentage of viewport width and height.

This makes things a lot more complex to manage, over the default breakpoints scenario (in a responsive web design scenario).

Any thoughts?

Thanks,

Shane.

[#2]

I have looked a bit at 'element queries' in the past:

http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/

http://www.filamentgroup.com/lab/element-query-workarounds.html

Perhaps this is what I should use - I'm just interested to hear about what Sense uses.

[#3]

Hi Shane,

Qlik Sense is fully responsive designed. The basic idea and technology behind is based on media query instead of element query. So unfortunately, if you hope to reuse qlik sense's css class to achieve responsiveness, I have to say there're no such classes since it's not designed for such purpose.

However, if you want integrate Qlik Sense into your application, we have pretty many materials about mashups and extensions.

Not sure if I answered your question, please elaborate your use case if I misunderstood anything here.

Best regards,

Bohua

[#4]

Thanks.

Sure, I'm aware of that kind of stuff.

Sense Extension developers will have to contend with different sizes for their extension, what may look good at larger sizes may not look good when things are shrunk down.   Font size will have to reduce, for example, when the extension's size is reduced in the editor.  Otherwise text will overlap and so on.

It's surely an issue that lots of people will face - just curious as to how people are approaching it.

Thanks.

[#5]

Yes Shane,

You have exact vision on this. Currently, Qlik UI is controlled by specific internal parameters given by media query. So if you hope to make responsive extensions, you can simply annotate your class with proper media screen size, such as:

@media screen and (max-width: 580px) and (min-width: 480px) {
     display: none;
}
@media screen and (min-width: 641px) and (max-width: 768px) {
     font-size: 1.2 em;
     width: 50%;
     display: block;
}

In that way, you probably need LESS templates to save your work load for annotations. For more inspirations, you can check the css through dev tools in browser, and see what kind of media screen queries are used in Qlik Sense. Unfortunately, there's no doc for that yet.

And for themes and more styling features are in the product vision and will come in future releases.

Cheers,

Bohua

[#6]

Thanks.

Those responsive breakpoints are based on viewport width, not the width of the individual element.   So the viewport width may be 800px, but if your element is sized at 25% of that viewport (because the user has clicked and dragged it as such in 'edit mode'), it will be 200px.

In cases such as these, the viewport width (and media query that references it) is not very useful, so I'm looking at other methods to directly target the individual extension item.

[#7]

Hi Shane, Sorry to get back late. Yes, you are right. Element wrapper size&scale is quite tricky for extension developer. We definitely need introduce more helpful solutions or parameters here. I will forward your great points to PM department. For now, as walk-around, do you think it would be acceptable to measure the wrapper element by using js and jQuery functions instead? I know that's very messy and ugly way. 😞 //Bohua

[#8]

Hi,

thanks for the reply.

I've found this: tysonmatanich/elementQuery · GitHub, which works well when I try it in a standalone test page.  I cannot, however, get it to work in a Sense context.

Not sure why at the moment

[#9]

Hi Shane,

Try to get widght and hight of rectangle, and use it in css.

	var width = $element.width();
	var height = $element.height();

[stanlyrj]

Hi Bohua,

Could you please suggest me any solution for the same problem mentioned above.

Thanks in advance

Thank You

Stan