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

Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X

Is there a way to popup / enlarge selected row in collection widget

Velkumar
18-Opal

Is there a way to popup / enlarge selected row in collection widget

Hi, 

 

I have collection widget with some data in it. Now I want to highlight the selected row mashup by enlarging content in it. 

 

Could anyone help on this ?

 

Thanks,

VR

1 ACCEPTED SOLUTION

Accepted Solutions

You can use a CSS transform to get this. The selected cells get a class called `BMCollectionViewCellSelected` that you can make use of to apply styles specifically to the selected cells.

 

Note that the root cell element, with the .BMCollectionViewCellWrapper class already has a transform property that you shouldn't override, because it controls the positioning of the cells. Instead, you should target the first (and only) child element of that and apply the transform there.

 

Additionally, because you want to enlarge the content, you need to make sure it doesn't get clipped by the parent's box so you should set its overflow property to visible to prevent this.

 

If you are using the background styles, border radiuses or box shadows they will be applied to the outer cell wrapper element which doesn't get zoomed so you should use the CSS rules to apply those to the inner element.

 

Finally, to properly scope this to a specific collection view, use the custom class property and write your rules using it.

 

An example of what I described is below:

.MyCollectionViewClass .BMCollectionViewCellWrapper {
    overflow: visible !important;
}

.MyCollectionViewClass .BMCollectionViewCellSelected > div {
    background-color: white !important;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
    transform: scale(1.2);
}

 

View solution in original post

4 REPLIES 4
slangley
23-Emerald II
(To:Velkumar)

Hi @Velkumar.

 

Can you provide an example of this, possibly from another website?  We're not clear on your need.

 

Regards.

 

--Sharon

Hi @slangley 

 

I'm looking for something like this.

 

Velkumar_0-1636087691610.png

 

You can use a CSS transform to get this. The selected cells get a class called `BMCollectionViewCellSelected` that you can make use of to apply styles specifically to the selected cells.

 

Note that the root cell element, with the .BMCollectionViewCellWrapper class already has a transform property that you shouldn't override, because it controls the positioning of the cells. Instead, you should target the first (and only) child element of that and apply the transform there.

 

Additionally, because you want to enlarge the content, you need to make sure it doesn't get clipped by the parent's box so you should set its overflow property to visible to prevent this.

 

If you are using the background styles, border radiuses or box shadows they will be applied to the outer cell wrapper element which doesn't get zoomed so you should use the CSS rules to apply those to the inner element.

 

Finally, to properly scope this to a specific collection view, use the custom class property and write your rules using it.

 

An example of what I described is below:

.MyCollectionViewClass .BMCollectionViewCellWrapper {
    overflow: visible !important;
}

.MyCollectionViewClass .BMCollectionViewCellSelected > div {
    background-color: white !important;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
    transform: scale(1.2);
}

 

Hi @BogdanM 

 

Thanks for your explanation. It works perfectly!

Top Tags