Applying Custom CSS on a single collection

[polasaikrishna]

Hi,

I am using ThingWorx 8.5.2 and I have 2 collections in my Mashup  and I am trying to keep custom CSS for only one Collection (adjusting width to 100% for inner Mashup on Collection 1) . But it is getting applied to Collection 2 as well. I tried using custom class name but couldn't get the right syntax.

Can anyone help on this issue.

I am using below CSS

.BMCollectionViewCellWrapper{
width :100% !important;
}

Thanks in Advance.

@CarlesColl Can you please help me.

Regards,

Sai Krishna  

[slangley]

Hi @polasaikrishna.

This guide on the developers portal may be helpful.  Notice Steps 4 and 5 review the process for applying CSS at the mashup level or the widget level.

The Help Center also has this information available.

Regards.

--Sharon

[polasaikrishna]

Hi @slangley 

Thanks for the information.

But I got into other scenario where I have a Collection inside a Collection and the CSS I am trying to apply is getting applied to Outer Collection and inner Collection as well . Is there any way to restrict the CSS to outer collection alone.

i.e : Adjusting width to 100% for inner Mashup on Collection 1(Outer Collection) and no need to do the same on Collection2 (inside the Collection 1)

Thanks in Advance.

Thanks,

Sai Krishna

[slangley]

Hi @polasaikrishna.

Since this is getting pretty complicated, it would be best to open a case so we can review your mashup.  Please let me know if you would like me to open one on your behalf.

Regards.

--Sharon

[GabrielB]

Hi @polasaikrishna,

You have to be more specific to CSS so it applies only on the mashup you want.

Add a custom class to the collection widget, and have your selector start from that. CustomClass: myAwesomeCollection

Example:

.myAwesomeCollection .BMCollectionViewCellWrapper {
width: 100% !important;
}

But the problem you're trying to solve I feel that you can do it from within the Collection widget settings.

Set your View property to Table then back to Flow. It's a Collection bug that doesn't show you all the properties from the start.

3 new properties appear:

 - FlowLayoutAlignment set it to Top

 - FlowLayoutContentGravity set it to Top

 - FlowLayoutGravity set it to Expand

and

MashupWidth to 9999

What will Expand do, is set your mashup with to the maximum it can occupy in the container. The other ones will just make all the mashups start from the top.

This setup will work for LOTS of cases where you need the flow layout, instead of the table layout.

Hope this helps!

BR,

Gabriel

[slangley]

Hi @polasaikrishna.

If you feel your question has been answered, please mark the appropriate response as the Accepted Solution for the benefit of others with the same question.

Regards.

--Sharon