native-html / plugins

Plugins for react-native-render-html
MIT License
55 stars 18 forks source link

Are the table heights synchronized? If they are, how to disable syncing? #26

Closed srdjandjuka closed 3 years ago

srdjandjuka commented 4 years ago

When I open first tab with table, it works great.

Screenshot_20201008-155042_Mona

But when I open second tab with second table, which is higher then first table it creates white space. On iOS it works great, problem only appears on Android.

Screenshot_20201008-155055_Mona

jsamr commented 4 years ago

@srdjandjuka Could you provide a reproduction in the form of an Expo snack, or git repository? It is impossible for me to investigate without access to some source code, and context about versions used.

jsamr commented 4 years ago

@srdjandjuka But to answer your question, there is no apparent reason why the heights would be synchronized. Actually, if you try the expo playground, you'll notice multiple tables with distinct heights. The answer likely resides in your code, but I cannot assert that for now!

srdjandjuka commented 4 years ago

export const cssRules = cssRulesFromSpecs(defaultTableStylesSpecs) + table, th, td { border: 1px solid #F1F1F1; } th, td { padding: 5px; } table>tbody>tr>td{ font-size: 10px !important; background: #ffffff !important; } table>tbody>tr:nth-child(2n)>td{ background: #00000005 !important; } table{ width: 100%; height: 100%; } table>thead>tr{ font-size: 12px; } p { background-color: red; } `;

const renderers = { table: makeTableRenderer({ WebView, animationType: 'none', cssRules, }), };

const htmlConfig = { alterNode, renderers, ignoredTags: IGNORED_TAGS, };

<View style={[ styles.productDetails_aboutProductTabDescriptionContainer, {display: open ? 'flex' : 'none'}, ]}>

    </View>

`

Container view has vertical padding 15 and thats it. When i disable one of this tabs, it works perfect, if I use both tabs the problem appears and only on android.

jsamr commented 4 years ago

@srdjandjuka Unfortunately, there is nothing I can reproduce with the code you provided since I can't run it on a simulator. I'm willing to help as soon as I can actually run something and investigate. See also https://stackoverflow.com/help/minimal-reproducible-example

jsamr commented 4 years ago

@srdjandjuka Usually, the approach I take to do so is:

jsamr commented 3 years ago

Closing due to inactivity. Feel free to post and reopen if you find the time to provide a proper reproduction.