Unordered and ordered lists in Elements

The Text Component in Elements 0.9.7 does not appear to support bullets and numbered lists.

Is there an elegant work around for this missing feature?

1 Like

Hi @MottNZ

We don’t currently have a built-in List component, but it is on our roadmap.

For now there’s a couple of different ways to achieve this:

  • use Flex and customise the HTML tags being used.
  • create a Custom Component and paste in HTML

I thought it’d be best to do a quick video showing how to both of these solutions work. I also uploaded the project from the video to Elements Cloud, so you can open it directly in Elements :slight_smile:

1 Like

Thanks for your comprehensive reply. The work around is working great.

1 Like

Concerning the order list, the example in the video and the project does not actually generate the number for the ordered list.

I am a beginner with Elements and CSS, so I would greatly appreciate knowing what I need to add to display the number.

Switch the class from list-disc to list-decimal here’s a video showing you how to do it…

1 Like

Curiously if I try this, even using the sample, when I view the result in Firefox I get the bullet and text on separate lines. In Elements if the text is short it appears on the same line but if it is long enough to wrap then the line break appears between the bullet and the text.

I’m currently using 1.6.2.

hmmm, sounds like that could be a bug in Firefox or the CSS needs adjusting :thinking:

I had noticed that the default text was wrapped in <p> and I thought that might be the issue then I noticed that you had changed it to a <span> so that wasn’t it. Of course there are a lot of classes stuffed on the elements so it a nightmare trying to work out what might be causing it.

Also just changed the browser via settings and Safari and Brave do the same thing so I’d be pointing at the CSS rather than a browser bug :slight_smile:

A recent release of Elements has trashed my sites that used unordered lists created as you suggest above. The bullets and text are now on separate lines, rather than the same line.

Hi @MottNZ, sorry to hear you’re having issues, if you share your project via Elements Cloud and share the link, we can take a look for you!

Sorry I can’t do that.

I’m going to stop installing elements updates. It creates unnecessary work, breaking production web sites.

I think I need to treat elements as beta, not for production websites for at least another 2-3 years.

1 Like

Peter you can upload to cloud and send the support team the link if you don’t want to make it public. I di this and the team were able to help sort y problem and I now have fully functioning e-commerce site built solely with Elements on line and I loaded it live yesterday and have had my first sales already. Take Care!

That statement is honestly a bit absurd.

If you don’t update Elements for the next 2–3 years, there’s a good chance that in three years you won’t be able to use your project properly anymore once you do update Elements.

I assume you’re here in the forum looking for a solution-oriented answer. The forum and the Realmac team would definitely be willing to help you with your issue—but that does require some cooperation on your part.

That means either:

  • posting a link to the website where the issue can be reproduced,
  • sharing a few screenshots that clearly show and explain the problem, or
  • publishing your project to the Elements Cloud and sharing the link here.

With that information, the community can most likely help you fairly quickly.

If none of these options are acceptable to you, the last remaining option is to send the project directly to Realmac Support. You might not get a solution immediately, but you will most certainly get one.

5 Likes

Hi

You cant fix whats broke. It is reputational damage.

This is the second occasion where an update to elements has resulted in a web site failing to the extent the users are fully aware of it.

I will figure a way to make the site work again.

It would be helpful if the documentation covered off how to create unordered lists, and was updated when the process for doing so was changed by virtue of an Elements update.

-/-

I know it can be frustrating, but we haven’t changed the way lists work in any recent app update, so I’m not sure why your existing project would suddenly change and break — Did you make any other changes to the project before publishing or is this a new project?

If you could provide the project for us to take a look at I’m sure we could fix it within a couple of minutes for you…

Hi

I fixed it by removing the list-inside class in the advanced section css classes.

list-disc list-inside used to display the bullet and text on the same line. Recently it changed behaviour to put the text on the line below the bullet.

Changing to list-disc only reverts to the previous behaviour.