You are viewing limited content. For full access, please sign in.

Discussion

Discussion

CSS for border separating records in collection (new form designer vs classic)

Forms
Updated May 12, 2022
posted on May 12, 2022

In the classic form designer the following CSS puts a separator line between records in a collection:

.myCollection hr.end_set {border-top:20px solid #ccc}

This does not appear to work in the new form designer.  I've tried playing around with other border options in CSS such as border-bottom and border-collapse but I can't find anything so far that works.

Is there another method to get the same result?

0 0
replied on May 12, 2022

The new form designer no longer uses an hr element to create the separator.

Instead, with the new designer this is done by setting a bottom border on the parent div of the set, which has a few classes, the most identifiable being "collection-set."

So if you set a "myCollection" class for your collection, then your CSS selector would be more like

.myCollection .collection-set

 

In the future, I highly recommend making use of browser dev tools to inspect the pages since the new designer generates drastically different HTML.

By inspecting the page you can more easily identify the objects, classes, etc. associated with different elements/styling on the page.

1 0
View 2 previous replies
replied on May 12, 2022

Thanks for the pointers.  The challenge for me with the dev tools is that I don't know where to look and what to look for.  I did try using the 'picker' in the Inspector window (Firefox) and I selected the collection, which highlighted the fl-collection fl-component div section.  After reading your post I tried searching for collection-set but it only found the collection-set-add for the link to add another record.  It's just not intuitive to me and I can never find the right reference.  So, I will just have to post here if I can't figure it out...

 

0 0
replied on May 12, 2022

Hi Mike,

Going top-down is always going to be a bit of a challenge because you won't necessarily know which children to inspect.

I'd suggest starting at one of the fields, and working your way up because that way you can more easily navigate to the parent of the set.

For example, right-click and inspect a collection field directly, then move up one parent at a time until you find something useful.

I haven't used Firefox in a while, but Edge and Chrome both highlight the element on the page when you hover over its html in the dev tools.

0 0
replied on May 12, 2022

I'll keep playing around with it.  I tried your suggestion, using the actual class name of rebateCollection, and it doesn't appear to do anything unfortunately.

.rebateCollection.collection-set{border-bottom: 2px solid black}

0 0
replied on May 12, 2022 • Show version history

If the code you posted is exactly what you used, then it didn't work because "rebateCollection" and "collection-set" are connected in what you posted and the space between them makes a big difference.

.rebateCollection.collection-set = an element with BOTH those classes (no space)

.rebateCollection .collection-set = an element with the collection-set class that is a child of an element with the rebateCollection class.

 

Your styling is also missing the ; at the end, which is something you need to be careful about because browsers will sometimes ignore that if it is the only styling in the block, but it is technically a syntax error.

.rebateCollection .collection-set {
    border-bottom: 2px solid black;
}

 

If you already have the space and it still isn't working, then the issue could be a matter of specificity/precedence.

The built-in styling could be overriding the style you added because it is more specific and therefore takes precedence, so you could test for that by adding !important, which bumps up the priority of that styling.

.rebateCollection .collection-set {
    border-bottom: 2px solid black !important;
}
1 0
replied on May 12, 2022

Ah, it was syntax errors; I corrected them and now it works.  Thank you very much.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...