Skip to main content
S
svisveswaraiya_2859881-Visitor
1-Visitor
August 28, 2018
Question

responsive layout issue

  • August 28, 2018
  • 1 reply
  • 4103 views

Hi,

I wanted to create a mashup completely responsive but when I add text box or label in a layout it is asking for panel so when I check for responsiveness in runtime its giving me scrolls and not being responsive. Is there any way in which I can add label and text boxes and other widgets directly in a responsive layout?

 

Thanks,

V Shalini,

1 reply

M
mneumann16-Pearl
16-Pearl
August 29, 2018

Hi...

only Widgets marked with the icon with the 4 arrows can be fully used in a responsive layout - like the Blog, Collection, Fieldset or Value Display.

All other Widgets will need a static panel - like the Button, Checkbox, Numeric Entry or Text Box.

 

The Panel Widget will fill the full size of a responsive Layout.

You could try to put a panel-in-panel which might give you more flexibility when designing the UI.

Other than that non-responsive Widgets will require a Panel.

 

Cheers,

Michael

S
svisveswaraiya_2859881-VisitorAuthor
1-Visitor
September 21, 2018

Whenever I use panel, and try to check responsiveness by shrinking the screen, I am getting scrolls. Is there any other way to avoid this and make responsiveness efficient?

M
mneumann16-Pearl
16-Pearl
December 6, 2018

Yes, using a panel with fixed size elements will show scrollbars if the content exceeds the bounds of visible area.

 

Maybe there is also a wording issue here...

Responsive Mashups just adjust their content size to the available space.

This is not what's commonly referred to as "Responsive Design" where you use breakpoints to design different experiences for mobile and desktop users.

 

For delivering for mobile users, a new Mashup needs to be designed.

The user than has to Mashups in his profile: "Home" for desktop and "Mobile" for mobile devices.

 

 

I've played with the "Custom CSS" styles and it seems I can add Media Queries - so based on screensize I could e.g. change background colors:

 

.myLayerClass {
 background-color: green;
 border: 5px solid #ccbbaa;
 padding: 5px;
}

@media screen and (min-width: 600px) {
 .myLayerClass {
 background-color: red;
 }
}

Note: this doesn't work for the panel directly - but for panels (or buttons etc.) placed inside a panel

Terms & ConditionsAccessibility statement