Container wrap without scrolling

[JF_10552164]

Is there a way to allow rows to be wrapped and push down the row below instead of scrolling?

For example: Create two rows. The first row has 3 columns and is set to wrap. The second row has one column. When the content of the first row is wrapped it always adds a scroll to the container. Ideally I'd like it to push the content of the 2nd row down and display all of the first rows content. This is the behavior when using flexbox on a normal webpage. Is this possible in ThingWorx? Using ThingWorx 9.4.

[nmutter]

I do not think so.

I only know this behavior from the Collection-widget. Not sure if the widget would work for your usecase

[JF_10552164]

Yeah, that's what I thought. I hoped I was just overlooking something.

If you have a container with wrapping and widgets inside, it will push down the content below which is in another container. It just doesn't treat the child container the same way.

[JF_10552164]

One potential workaround I found is to set the parent row container to use custom CSS with "display: block" instead of flex. This treats it as a normal webpage layout. Not sure if this could cause any other issues with layout.

[GuillaumeL]

Hello,

Did you try this feature at container level ? (you need to do it at lower container level - it does not work efficiently with size dynamic widget like collection or grids)

Using this feature I moved from

to

FYI I am on a 9.6.1 version !

Regards

[JF_10552164]

Thank you for the response. Yes, I can recreate what you are showing successfully. I can even wrap widgets properly as well. Where it doesn't seem to work is with wrapping sub containers.

For example: Add several columns to your example on each row. Then for each row set them to wrap. I would expect the container would push the content below down just as the widgets do but it seems to keep the scroll bars no matter what.

[GuillaumeL]

Even with some column, it seems to work on my side. Did you set every container size as "responsive" rather than "Fixed size" ?

If you want you can share you mashup with me and I can have a try. I guess there is no IP on your mashup  

[JF_10552164]

 That would be awesome! I just put a mashup together to show the issue. It's the top row that scrolls when shrinking it down.

[GuillaumeL]

I tried ... But I failed !!

It seems that the wrap option for sub container is killing this feature

[nmutter]

I can also give it a try. As I think it should work.

I did missunderstand the issue it seems. I thought the question was if the "green" box (in the last screenshot) could move into a separate row when there is not enough space. But that is not what OP wanted it seems

[JF_10552164]

For any clarification, I just want to add some rows with some columns and never see a scroll bar. I'd like to it wrap each container one by one as they run out of room and push the container below it down so no scroll bars are displayed.

[nmutter]

I also did not get it to work

[JF_10552164]

The question now is, is this a bug or is it expected behavior?

Are there any other workarounds? I mentioned one earlier by adding display: block to the row container in custom css. But when doing so you lose the flexbox features so you have to manually set padding to make it appear like a flexbox item.

[GuillaumeL]

This is a question of point of view !  

Only R&D will be able to answer so I suggest to open a ticket to the Tech Support. Maybe it will end with "work as designed" but in this case you can still open an enhancement request that I will vote for. With this, we can be close to make some responsive design of mashup.

[abandal]

Hello @JF_10552164,

I am following up on your post.

Do you have any further updates regarding this topic? 

You can also refer to this article for detailed information on "How to submit enhancement request for ThingWorx".

[JF_10552164]

No updates, it looks like I will need to submit and enhancement request for this functionality. Thanks everyone!