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

Making a collection responsive

GP_9630672
4-Participant

Making a collection responsive

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!

 

1 ACCEPTED SOLUTION

Accepted Solutions
GabrielB
5-Regular Member
(To:GP_9630672)

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

View solution in original post

2 REPLIES 2
slangley
23-Emerald I
(To:GP_9630672)

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

GabrielB
5-Regular Member
(To:GP_9630672)

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

View solution in original post

Announcements