CODEWITHSUNDEEP
djangoreact-nativedjango-ckeditor
Frendom
Frendom

Reputation: 558

React Native Render HTML bullet list is not centered with text

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?

enter image description here

Upvotes: 1

Views: 3534

Answers (1)

AndThis
AndThis

Reputation: 76

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

Upvotes: 1

Related Questions