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

Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X

responsive layout issue

svisveswaraiya
17-Peridot

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 6

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

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?

Following.

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

mgoel
17-Peridot
(To:mneumann)

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

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).

Top Tags