[Resolved] Styling types custom fields

[Author]

Posts

[franzG-4]

Tell us what you are trying to do?
Our website displays a table containing a list of laws. Each of them is described with different criteria such as title of the law, date of implementation,.... and a summary (see printscreen 1, 6th column). Each of these criteria is implemented with types custom fields.

The summary field is a multiline (textarea) types custom field, listing a summary of the law with short remarks. The remarks are separated by line breaks. So we have a list of lines / rows separeted by line breaks. We would like to have the summary fields with bullet points, so each line has a point / symbol at the beginning. The result would be a unordered bullet point list.

I tried to implement css styling in the legacy view of this table (in the section Loop item), but the problem is, that this approach does not work, because it is one level too high. We need to style the custom field itself. How can we achieve this?

Is there any documentation that you are following?
Toolset help ... editor for custom fields has been depreciated. Google search on css styling did not show evidence for a solution.

Is there a similar example that we can see?
We inserted in one field manually bullet points, see print screen 2 (column Übersicht = summary).

What is the link to your site?
hidden link

[Nigel]

I don't think you can fix this with CSS.

When you have a multiline text field spanning several lines, the resulting markup looks something like this:

<p>Line 1<br>
Line 2<br>
Line 3<br>
Line 4</p>

There isn't a way to target those text nodes directly with CSS.

You could target the br elements, but you cannot use the ::before or ::after pseudo-selectors with br elements (hidden link::after).

Ideally, whoever is entering the data, rather than entering and just using line breaks, would add "bullets" themselves, e.g.

* Line 1
* Line 2
* Line 3
* Line 4

That would be easier than expecting them to enter the content as markup, using a ul element with li items.

An alternative would be to write some custom JS that converted the p content on the front end into a ul element, with each line its own li element.

[franzG-4]

My issue is resolved now. Many thanks Nigel for your clear answer!