Blogs / SAP / SAP BusinessObjects / SAP Design Studio / Advanced / Designing Responsive Components in SAP Design Studio

Designing Responsive Components in SAP Design Studio

Nov 24, 2014

SHARE

With the explosion of mobile devices and the increasing use of these devices for on-the-go analytics, designing responsive components in SAP Design Studio has become really important. Here I have explained the use of CSS @media Query on one of our custom add-on components – the GridBox – to make it responsive.

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.

Designing Responsive Components in SAP Design Studio
CSS filename 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.

Designing Responsive Components in SAP Design Studio
Desktop window maximized – 1024px
Designing Responsive Components in SAP Design Studio
Desktop window resized – 768px
Designing Responsive Components in SAP Design Studio
Device screen (iPad) – Landscape – 1024px
Designing Responsive Components in SAP Design Studio
Device screen (iPad) – Portrait – 768px


Corporate HQ:
5920 Windhaven Pkwy, Plano, TX 75093

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com


Copyright © Visual BI Solutions Inc.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This!

Share this with your friends and colleagues!