Numbered list and text not aligning when rendering #592

rikinshah23 · 2022-11-01T23:16:03Z

Decision Table

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

Good Faith Declaration

I have read the HELP document here: https://git.io/JBi6R
I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
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?

React Native Information

"react-native": "0.64.2",

RNRH Version

6.3.4

Tested Platforms

Reproduction Platforms

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

The text was updated successfully, but these errors were encountered:

jsamr · 2022-11-01T23:36:48Z

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

codesafdar · 2023-02-27T13:52:36Z

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

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

twocs · 2023-04-18T09:54:26Z

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 · 2023-04-18T10:26:23Z

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.

ntienanh · 2023-05-15T09:32:24Z

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

codesafdar · 2023-05-27T18:44:00Z

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 <#592 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AV2MNH5KIZNQMHT5BV7ZW3DXGHZ3HANCNFSM6AAAAAARUQ3FD4> . You are receiving this because you commented.Message ID: ***@***.***>

oliuradu · 2023-10-26T10:37:37Z

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

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

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

olegmilan · 2024-07-12T10:23:31Z

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

rikinshah23 added the bug Crush'em all. label Nov 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Numbered list and text not aligning when rendering #592

Numbered list and text not aligning when rendering #592

rikinshah23 commented Nov 1, 2022

jsamr commented Nov 1, 2022

codesafdar commented Feb 27, 2023

twocs commented Apr 18, 2023 •

edited

Loading

twocs commented Apr 18, 2023 •

edited

Loading

ntienanh commented May 15, 2023

codesafdar commented May 27, 2023 via email

oliuradu commented Oct 26, 2023

olegmilan commented Jul 12, 2024

Numbered list and text not aligning when rendering #592

Numbered list and text not aligning when rendering #592

Comments

rikinshah23 commented Nov 1, 2022

Decision Table

Good Faith Declaration

Description

React Native Information

RNRH Version

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example

Additional Notes

jsamr commented Nov 1, 2022

codesafdar commented Feb 27, 2023

twocs commented Apr 18, 2023 • edited Loading

twocs commented Apr 18, 2023 • edited Loading

ntienanh commented May 15, 2023

codesafdar commented May 27, 2023 via email

oliuradu commented Oct 26, 2023

olegmilan commented Jul 12, 2024

twocs commented Apr 18, 2023 •

edited

Loading

twocs commented Apr 18, 2023 •

edited

Loading