React Native Render HTML bullet list is not centered with text

Question

I'm using react-native-render-html library to display data from Django Rest Framework stored in RichTextUploadingField from django-ckeditor. As basic styling is working properly I have a problem with the <ul> tag - text is not centered with circle/square/number as shown in the image. I tried using renderersProps like:

<RenderHTML renderersProps={{ ul: { markerBoxStyle:{ paddingRight: 3, top: 5 }, markerTextStyle: { color: "red" } } }} />

But it works for specific text size. If I change the text size in style in Django admin, the element and text aren't centered again. Is there any option on how to fix it or what causes the problem?

AndThis · Accepted Answer · 2021-12-02 12:46:01Z

1

You could add a custom CSS class to unordered list items only. Then apply your styles to that CSS class.

// this function goes through every list item in <ul> only and adds your custom class ('ul-li' in my case)
const onElement = (el) => {
  const { children, name } = el;
  if (name === 'ul' && children && children.length) {
      children.forEach(listItem => listItem.attribs = {class: 'ul-li'})
  }
}

// define your styles for your custom class
const classesStyles = {
  "ul-li": {
    lineHeight: '21px', // for me adjusting lineHeight did the job
  }
}

// in your JSX
<RenderHtml
  source={source}
  contentWidth={width}
  tagsStyles={tagsStyles}
  ... // other props you may have
  domVisitors={{onElement}} // first alter your html
  classesStyles={classesStyles} // then apply styles
/>

Sources: classesstyles onElement

answered Dec 2, 2021 at 12:46

AndThis

761 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native Render HTML bullet list is not centered with text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related