Skip to main content
P
polasaikrishna1-Visitor
1-Visitor
October 5, 2020
Question

Applying Custom CSS on a single collection

  • October 5, 2020
  • 3 replies
  • 2543 views

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  

    3 replies

    S
    slangleyCommunity Manager
    Community Manager
    October 6, 2020

    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

    P
    polasaikrishna1-VisitorAuthor
    1-Visitor
    October 13, 2020

    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

    G
    GabrielB12-Amethyst
    12-Amethyst
    November 16, 2020

    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

     

     

     

    S
    slangleyCommunity Manager
    Community Manager
    December 9, 2020

    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

    Terms & ConditionsCookie settingsAccessibility statement