cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

responsive layout issue

responsive layout issue

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,

6 REPLIES

Re: responsive layout issue

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

Re: responsive layout issue

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?

Re: responsive layout issue

Following.

Re: responsive layout issue

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

Re: responsive layout issue

Hi @svisveswaraiya-

 

Hope you are doing good. Could you please confirm if the issue has been resolved.

 

If yes, please mark the answer as accept as solution for the future reference. Thank you in advance.

Regards-Mohit Goel

Re: responsive layout issue

Btw - I just had a chance to look into the new ThingWorx 8.4 release (which will be available late January).

It seems like there's more responsiveness in the Mashup Editor (e.g. using Flex Layout options).