react-native-render-html icon indicating copy to clipboard operation
react-native-render-html copied to clipboard

Published 20 hours ago • verified publisher icon meliorence

Numbered list and text not aligning when rendering

Open rikinshah23 opened this issue 2 years ago • 9 comments

Decision Table

  • [X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
  • [X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

  • [X] I have read the HELP document here: https://git.io/JBi6R
  • [X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
  • [X] I have confirmed that this bug has not been reported yet

Description

Numbered list is always showing like this for me. Is there a prop or an example I can use to add some padding to the text may be?

image

React Native Information

"react-native": "0.64.2",

RNRH Version

6.3.4

Tested Platforms

  • [X] Android
  • [X] iOS
  • [ ] Web
  • [ ] MacOS
  • [ ] Windows

Reproduction Platforms

  • [ ] Android
  • [ ] iOS
  • [ ] Web
  • [ ] MacOS
  • [ ] Windows

Minimal, Reproducible Example

export function htmlViewer(props) {
  return (
    <HTML
      enableExperimentalBRCollapsing={true}
      tagsStyles={{
        span: theme.textAlignLeft,
        p: theme.textAlignLeft,
      }}
      source={{ html: props.source }}
      onLinkPress={props?.linkpressed}
    />
  );
}

Additional Notes

No response

rikinshah23 avatar Nov 01 '22 23:11 rikinshah23

@rikinshah23 please provide a reproducible example; this example relies on unknown props.

jsamr avatar Nov 01 '22 23:11 jsamr

import React from 'react' import RenderHtml from 'react-native-render-html' import { myColors } from '../../theme/globals'

const tagsStyles = { body: { color: myColors.darkBlue700 }, p: { margin: '0px', padding: '0px', lineHeight: '20px', fontSize: '14px', fontWeight: '400' }, ul: { marginTop: '0px', marginBottom: '0px', paddingTop: '0px', paddingBottom: '0px', display: 'flex', flexDirection: 'column', alignItems: 'baseline' }, li: { display: 'inline-block', lineHeight: '20px', fontWeight: '400', paddingBottom: '0px', margin: '0px' } }

const classesStyles = { 'ql-indent-1': { marginLeft: '22px' }, 'ql-indent-2': { marginLeft: '44px' }, 'ql-indent-3': { marginLeft: '66px' }, 'ql-indent-4': { marginLeft: '88px' }, 'ql-indent-5': { marginLeft: '110px' }, 'ql-indent-6': { marginLeft: '132px' } } const ShowHtml = ({ data }) => { return ( <> <RenderHtml source={{ html: data }} tagsStyles={tagsStyles} enableExperimentalBRCollapsing classesStyles={classesStyles} /> </> ) }

export default ShowHtml Screenshot 2023-02-27 at 6 48 40 PM

List bullets are not moving with text, please help me @jsamr

codesafdar avatar Feb 27 '23 13:02 codesafdar

Here's a minimal example. The baseline of the container does not line up with the baseline of the numbering. https://snack.expo.dev/@tom.a/numbered-list-and-text-not-aligning-when-rendering

Seems that no style changes in tagsStyles can really affect the numbering, which is not intuitive or well documented (opinion).

I was able to fix the li numbering to get the lineHeight css property only by using "renderersProps". So in the example, you would need to do all the changes to the :

const renderersProps = {
    ul: {
      markerTextStyle: {
        lineHeight: '21px',
      },
    },
  };
  
<RenderHtml
  source={{html: data}}
  tagsStyles={tagsStyles}
  enableExperimentalBRCollapsing
  classesStyles={classesStyles}
  renderersProps={renderersProps}
/>

twocs avatar Apr 18 '23 09:04 twocs

This is my complete minimal sample, currently available at https://snack.expo.dev/@tom.a/numbered-list-and-text-not-aligning-when-rendering

import React from 'react';
import RenderHtml from 'react-native-render-html';

export default function App() {
  const tagsStyles = {
    p: {
      margin: '0px',
      lineHeight: '26px',
    },
    ol: {
//      lineHeight: '26px',
    },
    li: {
//      lineHeight: '26px',
    }
  };

  const renderersProps = {
    ol: {
      markerTextStyle: {
        lineHeight: '26px',
      },
    },
  };

  const source = {
    html: `<ol>
    <li>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </li>
    <li>
      <p>Aliquam tincidunt mauris eu risus.</p>
    </li>
    <li>
      <p>Vestibulum auctor dapibus neque.</p>
    </li>
    <li>
      <p>Nunc dignissim risus id metus.</p>
    </li>
  </ol>`,
  };

  return (
    <>
      <RenderHtml
        source={source}
        tagsStyles={tagsStyles}
      />

      <RenderHtml
        source={source}
        tagsStyles={tagsStyles}
        renderersProps={renderersProps}
      />
    </>
  );
}

I left the commented out ol/li styling because they don't do anything to the numbers even though intuitively that's what I would try to do to change their formatting. Unfortunately some editors (e.g. Tiptap) just add <p> tags even inside <li> tags, and that's causing the issue because the numbering doesn't align with the baseline of the text but with the top of the margin.

twocs avatar Apr 18 '23 10:04 twocs

you can try p: { marginVertical: 0 } at tagsStyles.

ntienanh avatar May 15 '23 09:05 ntienanh

My issue is that when I give margin left to the li tag in list item then number in case of ol list does not move with text.

On Mon, May 15, 2023 at 2:32 PM Nguyễn Tiến Ánh @.***> wrote:

you can try p: { marginVertical: 0 } at tagsStyles.

— Reply to this email directly, view it on GitHub https://github.com/meliorence/react-native-render-html/issues/592#issuecomment-1547510349, or unsubscribe https://github.com/notifications/unsubscribe-auth/AV2MNH5KIZNQMHT5BV7ZW3DXGHZ3HANCNFSM6AAAAAARUQ3FD4 . You are receiving this because you commented.Message ID: @.***>

codesafdar avatar May 27 '23 18:05 codesafdar

import React from 'react' import RenderHtml from 'react-native-render-html' import { myColors } from '../../theme/globals'

const tagsStyles = { body: { color: myColors.darkBlue700 }, p: { margin: '0px', padding: '0px', lineHeight: '20px', fontSize: '14px', fontWeight: '400' }, ul: { marginTop: '0px', marginBottom: '0px', paddingTop: '0px', paddingBottom: '0px', display: 'flex', flexDirection: 'column', alignItems: 'baseline' }, li: { display: 'inline-block', lineHeight: '20px', fontWeight: '400', paddingBottom: '0px', margin: '0px' } }

const classesStyles = { 'ql-indent-1': { marginLeft: '22px' }, 'ql-indent-2': { marginLeft: '44px' }, 'ql-indent-3': { marginLeft: '66px' }, 'ql-indent-4': { marginLeft: '88px' }, 'ql-indent-5': { marginLeft: '110px' }, 'ql-indent-6': { marginLeft: '132px' } } const ShowHtml = ({ data }) => { return ( <> <RenderHtml source={{ html: data }} tagsStyles={tagsStyles} enableExperimentalBRCollapsing classesStyles={classesStyles} /> </> ) }

export default ShowHtml Screenshot 2023-02-27 at 6 48 40 PM

List bullets are not moving with text, please help me @jsamr

i have the same problem, do you know any solution? thanks

oliuradu avatar Oct 26 '23 10:10 oliuradu

Here's a minimal example. The baseline of the container does not line up with the baseline of the numbering. https://snack.expo.dev/@tom.a/numbered-list-and-text-not-aligning-when-rendering

Seems that no style changes in tagsStyles can really affect the numbering, which is not intuitive or well documented (opinion).

I was able to fix the li numbering to get the lineHeight css property only by using "renderersProps". So in the example, you would need to do all the changes to the :

const renderersProps = {
    ul: {
      markerTextStyle: {
        lineHeight: '21px',
      },
    },
  };
  
<RenderHtml
  source={{html: data}}
  tagsStyles={tagsStyles}
  enableExperimentalBRCollapsing
  classesStyles={classesStyles}
  renderersProps={renderersProps}
/>

Your solution works perfectly fine, thank you

olegmilan avatar Jul 12 '24 10:07 olegmilan