Skip to main content
G
GP_96306721-Visitor
1-Visitor
June 2, 2021
Solved

Making a collection responsive

  • June 2, 2021
  • 2 replies
  • 1710 views

Hi!

 

I am trying to create a mashup that has a responsive collection in it.

 

I want it to be horizontally aligned (I have done it disabling wrapping) but I cannot make it vertically responsive to fill the parent container. Can it be done?

 

I made this quick paint drawing to be clearer:

 

Responsive Collection.png

 

Additionally, I want the mashups in the collection to contain responsive widgets (text labels mainly). But it seems that they don't work... Only the non-responsive labels are displayed.

GP_9630672_0-1622625181348.png  GP_9630672_1-1622625200876.png

 

Am I doing something wrong? Is it even possible?

Thanks!

 

Best answer by GabrielB

Hi @GP_9630672 ,

 

There is no way of doing that with the OOTB Collection through its settings. But it can be done with CSS if you can be assured that there will be no wrap on that row.

 

My Collection settings:

FlowLayoutAlignment: Top

FlowLayoutContentGravity: Top

FlowLayoutGravity: Spaced

DisableWrapping: Enabled

 

My CSS:

 

.myCollection > .BMCollectionViewWidget { 
 overflow-x: auto !important;
}

.myCollection > .BMCollectionViewWidget > div {
 height: 100% !important;
}

.myCollection > .BMCollectionViewWidget > div > .BMCollectionViewCellWrapper {
 height: 100% !important;
}

 

"myCollection" is the CustomClass I have on the widget.

 

If you want your mashups to all fit in the width of the widget without scroll, set the FlowLayoutGravity to Expand and make the mashup width something like 5.

 

Good luck,

Gabriel

2 replies

S
slangleyCommunity Manager
Support
June 3, 2021

Hi @GP_9630672 

 

We're not sure you're going to be able to do exactly what you need.  You could try using CellWidthField and CellHeightField to see if that would get you closer. 

 

Regards.

 

--Sharon

G
GabrielB12-AmethystAnswer
12-Amethyst
August 20, 2021

Hi @GP_9630672 ,

 

There is no way of doing that with the OOTB Collection through its settings. But it can be done with CSS if you can be assured that there will be no wrap on that row.

 

My Collection settings:

FlowLayoutAlignment: Top

FlowLayoutContentGravity: Top

FlowLayoutGravity: Spaced

DisableWrapping: Enabled

 

My CSS:

 

.myCollection > .BMCollectionViewWidget { 
 overflow-x: auto !important;
}

.myCollection > .BMCollectionViewWidget > div {
 height: 100% !important;
}

.myCollection > .BMCollectionViewWidget > div > .BMCollectionViewCellWrapper {
 height: 100% !important;
}

 

"myCollection" is the CustomClass I have on the widget.

 

If you want your mashups to all fit in the width of the widget without scroll, set the FlowLayoutGravity to Expand and make the mashup width something like 5.

 

Good luck,

Gabriel

    Terms & ConditionsAccessibility statement