Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

List item(OL/UL) text align center is not working as expected.

See original GitHub issue

Oath

I swear that I have completed these tasks before submitting:

I have read the contribution guidelines here: https://git.io/JJ0Pg
I have read the documentation here: https://meliorence.github.io/react-native-render-html/
I have confirmed that this bug has not been reported yet

Bug Report

While applying text align center or right to ol,ul or li elements the actual text is aligned but not the bullet points or numbers
In CSS there is an option list-style-position: inside;, but unable to provide this style to ul/ol as its not a valid property in react native
Was able to reproduce the same issue in iOS and Android

Simulator Screen Shot - iPhone 12 Pro Max - 2021-07-15 at 15 01 21

Setup

const source = `<ul>
  <li>ONe</li>
  <li>abc</li>
  <li>there</li>
</ul>
<ol>
  <li>One</li>
  <li>Tow</li>
  <li>there</li>
</ol>`;

<HTML
     tagsStyles={{
            li: {
              textAlign: 'center',
            },
      }}
      source={{html: source}}
      baseFontStyle={{fontSize:28}}
/>

React Native

“react-native”: “0.64.2”, “react-native-render-html”: “^5.1.1”,

System:
    OS: macOS 11.2.3
    CPU: (8) x64 Apple M1
    Memory: 149.82 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.1.0 - ~/.nvm/versions/node/v16.1.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.19.1 - ~/.nvm/versions/node/v16.1.0/bin/npm
    Watchman: 4.9.0 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 23, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
      System Images: android-27 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs ARM 64 v8a, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.2 => 0.64.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

RNRH

react-native-render-html: “^5.1.1”

Reproduction

Description

Provide html with UL or OL elements
Apply textAlign center
Render the html
The bullet points or the number in the ordered list are left aligned while the actual text is center aligned
I tried with listsPrefixesRenderers and new beta version 6. unable to resolve

Issue Analytics

State:
Created 2 years ago
Comments:7

Top GitHub Comments

1reaction

jsamrcommented, Jul 17, 2021

@shameersn I’m glad that worked out for you! If you’d like to help us, you could consider writing a review on Openbase 😉

1reaction

shameersncommented, Jul 17, 2021

@jsamr Thanks for this wonderful library and the support 🙌. Works perfectly in “react-native-render-html”: “^6.0.0-beta.8”.

Top Results From Across the Web

text-align: center not working - Stack Overflow

text -align: center affects pure text nodes as well as child elements that have display: inline; or display: inline-block; .

How to Center Align Items in CSS with 4 Solid Methods.

There are different ways to center align texts and elements in CSS, but not all of it will work for all elements, for...

How to Center HTML Elements with the CSS Text-Align ...

In this video, you will learn: - The Text Align Property in CSS - Aligning Text & HTML Elements Left, Right & Center...

The Centered Text element - HTML - MDN Web Docs - Mozilla

Applying text-align :center to a <div> or <p> element centers the contents of those elements while leaving their overall dimensions unchanged. Specifications ...

You cannot center the text in a column of an inserted table in ...

Describes a problem in which you cannot center the text in a column of an inserted table in Word. Provides three workarounds.