Designing Responsive Components in Design Studio
With the explosion of mobile devices and the increasing use of these devices for on-the-go analytics, it is really important to design responsive components. Here I have explained the use of CSS @media Query on one of our custom add-on components – the GridBox – to make it responsive. Pl. note that some edits have been made to the original post, considering Mustafa’s comments.
Adding CSS
The code snippets given below are included in the CSS file shown in the image. This file name needs to be given in contribution.xml.
// Desktop Window Maximized
@media screen and (max-width:1024px) {
#GRIDBOX_1_control tr > *{
display: block;
}
#GRIDBOX_1_control tr {
width:100px;
display: table-cell;
}
#GRIDBOX_1_control td{
height:152px;
}
}
// Desktop Window Resized
@media screen and (max-width:768px) {
#GRIDBOX_1_control tr {
display: table-row;
}
#GRIDBOX_1_control td{
display: table-cell;
}
}
// Device Screen (iPad) – Landscape
@media (max-device-width: 1024px) and (orientation: landscape) {
#GRIDBOX_1_control tr {
display: table-row;
}
#GRIDBOX_1_control td{
display: table-cell;
}
}
// Device Screen (iPad) – Portrait
@media (max-device-width: 768px) and (orientation: portrait) {
#GRIDBOX_1_control tr > *{
display: block;
}
#GRIDBOX_1_control tr {
width:100px;
display: table-cell;
}
#GRIDBOX_1_control td{
height:152px;
}
}
It is that simple ! The screenshots below clearly show how the component adapts nicely to different screen sizes.
Desktop Window Maximized – 1024px
Desktop Window Resized – 768px
iPad – Landscape – 1024px
iPad – Portrait – 768px
Good one. But how can we use @media in a standard conponent? for ex. "Text" conponent? Thanks
Hey Denny Thanks for your comment,
I still not yet gave thought about that. But, I think you can modify the standard component using the properties panel in design studio by giving css class and defining css style for the respective class or else you customize it in internal library file.
Hi Nithyanandam,
Some comments as feedback:
1) An important aspect of responsive design is about building a layout that automatically adapts based on the screen size of devices, so that either the content or the positioning of objects change. In that context I think it would be beneficial if you were to extend your example from simply changing the background colour according to screen size to a more comprehensive one demonstrating how to implement responsive design with media queries;
2) In the example, the div id of the component (presumably obtained through debugging in the browser) is used to hard code the CSS class against the component. This is a risky approach in that the ID is applicable only to the first instance of the sdk component on the canvas. As soon as you drag more than one of the same component onto the canvas, the media query does not apply to these as the ID will be different. Therefore, it is advisable to use a more dynamic and generic approach to attaching the media query CSS. In fact, with an SDK component, because you have direct access to the coding, you should be able to apply the media query CSS seamlessly to the component without the need to reference the Design Studio generated ID, which could change at any time;
3) For further reading on the considerations for implementing responsive design, the post Creating a Responsive Design in Design Studio by Jeroen van der A is a good reference.
Regards,
Mustafa.
Hi Mustafa,
Thanks for you feedback and comments.I totally agree with your points. I wanted to change background-property as it easier to demonstrate the purpose of media queries (i.e) each time screen size vary i can get different background color.I just wanted to let other people know that media query can do big thing for responsiveness in design studio. I know the benefit of responsive design layout. To make it more clear and understandable to others, I have demonstrated in the document with very basic css property code and used hard-coded DIV ID.
Hi Nithyanandam,
This is good update with a practical example of implementing a responsive layout. For clarification, I have the following questions and comments:
1) I assume that the width and height properties referenced in the media query CSS relate to the dimensions of an individual cell within the grid. Is that right?
2) Based on the Desktop Window Maximized – 1024px screenshot, since this is greater than the 720 px break-point defined in the CSS, I assume a default cell size is being applied in this case?
3) The Desktop Window Resized – 720px and iPad – Landscape - 1024px screenshots seem consistent with the cell sizes defined in the CSS. However, I am a little confused with the iPad – Portrait – 768px screenshot as the cell dimensions don't appear to be consistent with the width of 100px and height of 50px defined in the media query break-point of 768px for portrait orientation. Can you explain this?
4) The media query tells half the story in terms of the responsive layout by defining the grid cell sizes for the different media query break-points. However, the other half lies within the component.js code to define the actual behaviour of the grid in terms of whether the cells are arranged in a vertical stack or a grid of rows and columns. It would be useful if you shared the component.js code or technique used here, to complete the picture of this responsive layout example. I'm assuming you are applying a HTML List to define the structure of the grid. Is that right?
5) The GridBox add-on example shows text labels as the content of each cell. Are other content types supported and if so which ones?
Thanks,
Mustafa.
Hi mustafa,
1. Yes you are right. its for individual cell.
2. Yes since no break point. it displays default cell size.
3.Am not sure about this. Still have a little confusion about it, that while changing the application into mobile platform i think design studio perform some transformation for mobile devices. Which am not sure, if you know you can clarify me.
4. No, I am not using html list layout. I am using html table layout. I can't share the component.js code here.
5.No,its not the default text label component. Its the label functionality using additional properties, that we have developed for the grid box. I don't think it supports others. I think you are expecting the grid component to behave like a grid container. In this example its not a container, Its just a responsive individual component. I have same thought of making a grid container. I am looking on it.
Thanks,
Nithyanandam
Hi Nithyanandam,
Thanks for the follow-up. Regarding question 5, yes I was indeed thinking of a grid container. Unfortunately, the DS SDK doesn't currently support the development of container components.
Regards,
Mustafa.
Hello,
Thanks for sharing that.
I have applied function @media in CSS to dynamically resize font and color in text component when the windows browser is getting smaller.
@media all and (min-width:100px) and (max-width:1300px) {
.myTileSubtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #DC143C;
font-size: 10px;
}
}
@media all and (min-width:1300px) {
.myTileSubtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #333333;
font-size: 14px;
}
}
All is works as expected when I execute it locally and via document link, when I have opened it through BI LunchPad it doesn't work.
Do you have some hints why it works in such a way or it is matter of configuration.
Thanks
Marcin
Hi, Marcin sorry for the delayed response, It should work well with BI launchpad also. Can you check your code again properly and try it once.
Hi
Is it possible to use the @media to get the actual min-width screen values and place them into a textbox in order to change layout accordingly?
let’s say Grid columns width for example
Thanks
Shlomi
Hi sholmi,
I am not sure what you are exactly want to achieve, can you elaborate it a bit.
Thanks,
Nithyanandam
Yes
I have a grid layout with 3 columns and a gauge component in each of them.
The Gauge has a bug that it is not displayed at all, when you give it auto with or auto height.
The issue is that I want to place the Gauge in the center of each cell and in order to do that, I need the users screen width divided to 3 in order to get each cell width
With the actual cell width and the Gauge width, I can set to right margin to the right value that will place the Gauge in the middle of the cell.
I hope that I've managed to explain my scenario
Shlomi
Hi sholmi,
You can't divide useers screen width using media queries. What you can do is, the detection of width of screen when its resize or changes.I don't think the scenario is possible with media queries.
Thanks,
Nithyanandam
Hi Nithyanandam,
I think what Shlomi is asking is if the screen width value when it resizes can be returned from the media query back to BIAL so that he can perform the division calculation via scripting. I don't think CSS and BIAL has the necessary integration to allow this.
Regards,
Mustafa.
Hi Mustafa,
That's a good point. Thanks for lighting up but without necessary dynamic programming this can't be feasible as you said.
Thanks,
Nithyanandam
Thanks Mustafa and Nithyanandam
I hope that Mike will add the mechanism to the new Gauge.
Shlomi
Shlomi,
The open source gauge you speak of does not detect auth width and height changes as you've stated in a few places. CSS tricks will not help you in this scenario, it must be a JS change to poll for the changes in script, so that it will resize the SVG appropriately. CSS will not help. If it'll help put this whole gauge issue to bed, I'll add the polling mechanism so we can all stop talking about gauges 🙂
Hi Mike,
It will sure help if you could add this mechanism to the Gauge it will be great
Please update when it's done
Thanks
Shlomi
Hi Mike
When do you think that you will be able to add the polling mechanism to the Gauge?
I have a Developement that is ready besides this part
Shlomi
I don't think this discussion thread about Responsive CSS is a place to ask for updates about a different topic. We've also asked people to report bugs and ask for features here: Issues · org-scn-design-studio-community/sdkpackage · GitHub
Just did
Thanks
Shlomi
Very Informative!!! 🙂
Thanks,
Pushkar Dhale