Remove default border from repeating view display format for embedded data

[Praneeth_Pulipati]

In constellation UI, when list type embedded data is configure to use ‘Repeating view’ as display option then we get default borders from 26 release. Refer below image:

Configuration

Runtime

Below is the workaround to remove borders for each row.

/* Removes background color for group header - 1. Product and 2. Product from above image will be removed */
fieldset[aria-label^=‘Product’] legend > div > div { /* ‘Product’ used in selector should be the first word mentioned in ‘Record label value’ config in embedded data */
background: transparent !important;
}

/* Removed left border for each row - Vertical left border will be removed */
div:has(> fieldset[aria-label^=‘Product’]):before {
background: transparent !important;
}

/* Removed curved border before +Add button */
div:has(> ol):before {
border-color: transparent !important;
}

Runtime after applying above CSS

Where to apply CSS?

1. Enable ‘ExperimentalTheming’ toggle
   1. 
2. Go to theme and save as the OOTB theme. Open ‘Experimental’ tab and paste the above CSS. Replace ‘Product’ word in selector with the first word in ‘Record label value’
   1. 

Warning: This post just talks about a workaround and not a recommended approach. Using experimental CSS will lead to additional maintenance during upgrade. Please read the warning in above screenshot.

[RameshSangili]

Would it be possible to have the side bar because it really helps if there are too many properties defined in the repeating view?

[Praneeth_Pulipati]

@Praneeth_Pulipati

/* Removed left border for each row - Vertical left border will be removed */
div:has(> fieldset[aria-label^=‘Product’]):before {
background: transparent !important;
}

Yes you can have side bar. Just done add above CSS.

[RameshSangili]

Thank you for your quick turnaround!

[MarcCheong]

@Praneeth_Pulipati is there are reason you have removed these? These have been added for a reason, removing these risks impacting accessibility and usability.

I love the knowledge share, always useful but we should caveat this as not a recommended approach. In case the warning in your screenshot isn’t picked up by the reader.

A good read for those interested in more

• https://community.pega.com/blog/whats-constellation-form-layout

[MarcCheong]

@Praneeth_Pulipati I can see you updated the article with the appropriate caveats. Thanks so much!

Again, thanks for sharing. More knowledge is always a good thing - I have added it to our constellation 101 series!

Enjoyed this article?

See suggested articles from our Constellation 101 series and view all our Knowledge Shares from our User Experience Expert Circle.