Hi team,
Firstly – just stumbled across this library to solve my nested list problem and HALLELUJAH !!! This is something that has been bothering me for 3> months. It’s shocking to see so many people requesting this feature for 6+ years now.
I have added the library to my site-wide custom code HEAD area of my site.
I created an arbitrary page, added an RTF field and applied the custom attributes, and everything worked. Perfect.
I want to add this attribute to an RTF field located on a Collection Page. I created a Collection Page called “Galleries” (not to be confused with “Galleries (test)”. I added the custom attribute to the “Post Text” object. I added a bulleted list to a Collection List Item titled “San Francisco 2017”.
I got the desired result, but the result did not look entirely… desirable.
A couple of questions:
- How do I get rid of the bullet on the far left?
- Is there anyway to control the indent size for each list? They look quite large.
Here is the link to my preview:
https://preview.webflow.com/preview/letters-to-ayesha?utm_medium=preview_link&utm_source=designer&utm_content=letters-to-ayesha&preview=262ffe1507d4174ac7f0cff3d1dba350&pageId=651c969fb9033e419f1495ff&itemId=659b8b25cc1362b2e99dbd5a&workflow=preview
Also – I’m literally itching to buy everyone at Sygnal a beer once this is figured out!!
Update:
I’ve been fiddling around, and found this.
There must have been something funny with the copy & paste I did to the content field, so I inserted a bulleted list and started my list, and the results look a little better:
There are still two issues:
- The first bullet is still there
- The spacing between bullets is still pretty atrocious.
Any help with these two would be incredible
Thank you!
Hi Mehran!
I’m traveling so I can’t easily navigate a designer view on my small screen. However a few things-
First, it look like you have an empty top-level bullet somehow.
Is it possible you’ve skipped creating a top level item for your list?
The notation describes indentations, so it’s;
- Top level list item
- > Second level list item ( one indent )
- >> Third level list item ( two indents )
If your first list item is prefixed with an indent, it might account for the empty bullet.
Second, and this might be solved by #1, your bullet alighment looks a bit strange. The floating bullets to the far left appear to be on the same line as the “monday, july 3rd” bullet.
I’d check for any Webflow styles applied to “All List Items”, perhaps, or “All Unordered Lists” to see if there is anything that might be affecting your list layout in an undesirable way.
Custom CSS like UL > LI ( targeting the first level items beneath an unordered list ) could also have that kind of impact.
Apologies for the delayed reply – I was out of town myself.
I’ve managed to fix the first problem of the empty top-level bullet:
The second problem persists (i.e. the indent between the top-level list item and the second level list item being disproportionately large).
I’ve looked at the Style Guide that is part of this template, and cannot note anything peculiar about any global Webflow styles applied to my website.
Would I have to modify this CSS to get my desired effect?
Here’s a look at my list item global style, located in my Style Guide (note that this is a template that I bought so I did not create the Style Guide myself):
The left-hand padding of 40px that is set for the first-level indent does not seem to apply for the second-level indent.
FWIW, it works just fine when I use an free-standing RTF on a page:
The one that I am trying to fix above is an RTF that is bound to a collection list item.
The only custom code is the Sygnal Attributes CSS snippet:
Would I have to modify the underlying CSS file at all to get my desired effect?
PS. I also just saw the Webflow’s recent announcement of adding support for this. I will have to play around with this later.
Here is a link to my preview:
https://preview.webflow.com/preview/letters-to-ayesha?utm_medium=preview_link&utm_source=designer&utm_content=letters-to-ayesha&preview=262ffe1507d4174ac7f0cff3d1dba350&pageId=651c969fb9033e419f149638&workflow=preview
Interesting – so I used Webflow’s new native support, and it looks like it mimics the exact same behavior that I see with the Sygnal Attributes code.
I’m assuming now that it could be something to do with the global style, but I’m not sure where to find. I will plan to cross post to the Webflow community forum.
1 Like
Just back finally from my adventures-
Webflow’s implementation is quite good and very convenient.
What you want to do is use Chrome inspector and look at what CSS styles are being applied to your list HTML, that will help you trace it.
