Components outside html component get resized #1420

kinga112 · 2024-05-10T16:19:46Z

Expected Behavior

Components outsize html parser do not get resized

Actual Behavior

Some Elements outside of html parsed component are resized.

Steps to Reproduce

click button to display email, which fetches html string from backend/imap.
only a small percentage of emails resize other elements in the application, but its a major issue.

I tried scaling down the component but it still effects other components.

{ ReactHtmlParser(selectedEmail.get()) }

I attached images that show different results that have updated other components in the UI.
Capture4 shows the normal expected result.

Reproducible Demo

Environment

Version: 5.0.11
Platform: React
Browser: chrome
OS: Windows

Keywords

Unwanted resize

remarkablemark · 2024-05-10T16:49:27Z

Thanks for opening the issue @kinga112, can you provide a reproducible example using StackBlitz (JavaScript)?

kinga112 · 2024-05-10T17:59:16Z

Thanks for opening the issue @kinga112, can you provide a reproducible example using StackBlitz (JavaScript)?

I am not sure how I can display the issues I can try to get the html string for you, but I don't know how to reproduce and I don't know why certain html strings affects other components.

kinga112 · 2024-05-10T18:09:41Z

Here is the html string from the 3rd image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="min-height: 100%; background-color: #ddd;"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="width=device-width" name="viewport" /> <style>.u-hover-bgColorAqua:hover { background-color: cyan !important; } .u-hover-bgColorBlue:hover { background-color: #0954D3 !important; } .u-hover-bgColorBlueLight:hover { background-color: #99B1C4 !important; } .u-hover-bgColorBlueLighter:hover { background-color: #c3d2dd !important; } .u-hover-bgColorBlueLightest:hover { background-color: #eff3f6 !important; } .u-hover-bgColorGreen:hover { background-color: #1A8A20 !important; } .u-hover-bgColorRed:hover { background-color: #e83a30 !important; } .u-hover-bgColorOrange:hover { background-color: #e86830 !important; } .u-hover-bgColorYellow:hover { background-color: #e8b730 !important; } .u-hover-bgColorPurple:hover { background-color: #8400bc !important; } .u-hover-bgColorWhite:hover { background-color: #fff !important; } .u-hover-bgColorBlack:hover { background-color: #000 !important; } .u-hover-bgColorGrayDarkest:hover { background-color: #4b4b4b !important; } .u-hover-bgColorGrayDarker:hover { background-color: #777 !important; } .u-hover-bgColorGrayDark:hover { background-color: #999 !important; } .u-hover-bgColorGray:hover { background-color: #ccc !important; } .u-hover-bgColorGrayLight:hover { background-color: #ddd !important; } .u-hover-bgColorGrayLighter:hover { background-color: #f1f1f1 !important; } .u-hover-bgColorGrayLightest:hover { background-color: #f8f8f8 !important; } .u-hover-bgColorPremium:hover { background-color: #f67e00 !important; } .u-hover-bgColorTransparent:hover { background-color: rgba(0,0,0,0) !important; } .u-hover-bgColorGoogleRed:hover { background-color: #dc4b38 !important; } .u-hover-bgColorGoogle:hover { background-color: #4285F4 !important; } .u-hover-bgColorGreenDiscount:hover { background-color: #4BC012 !important; } .u-hover-bgColorGreenPremium:hover { background-color: #4BC012 !important; } .u-hover-bgColorBlueStudent:hover { background-color: #288AE2 !important; } .u-hover-bgColorReefGold:hover { background-color: #AD9333 !important; } .u-hover-opacity0_5:hover { opacity: .5 !important; } .u-hover-opacity1:hover { opacity: 1 !important; } .u-onHover-tcAqua:hover { color: cyan !important; } .u-onHover-tcBlue:hover { color: #0954D3 !important; } .u-onHover-tcBlueLight:hover { color: #99B1C4 !important; } .u-onHover-tcBlueLighter:hover { color: #c3d2dd !important; } .u-onHover-tcBlueLightest:hover { color: #eff3f6 !important; } .u-onHover-tcGreen:hover { color: #1A8A20 !important; } .u-onHover-tcRed:hover { color: #e83a30 !important; } .u-onHover-tcOrange:hover { color: #e86830 !important; } .u-onHover-tcYellow:hover { color: #e8b730 !important; } .u-onHover-tcPurple:hover { color: #8400bc !important; } .u-onHover-tcWhite:hover { color: #fff !important; } .u-onHover-tcBlack:hover { color: #000 !important; } .u-onHover-tcGrayDarkest:hover { color: #4b4b4b !important; } .u-onHover-tcGrayDarker:hover { color: #777 !important; } .u-onHover-tcGrayDark:hover { color: #999 !important; } .u-onHover-tcGray:hover { color: #ccc !important; } .u-onHover-tcGrayLight:hover { color: #ddd !important; } .u-onHover-tcGrayLighter:hover { color: #f1f1f1 !important; } .u-onHover-tcGrayLightest:hover { color: #f8f8f8 !important; } .u-onHover-tcPremium:hover { color: #f67e00 !important; } .u-onHover-tcTransparent:hover { color: rgba(0,0,0,0) !important; } .u-onHover-tcGoogleRed:hover { color: #dc4b38 !important; } .u-onHover-tcGoogle:hover { color: #4285F4 !important; } .u-onHover-tcGreenDiscount:hover { color: #4BC012 !important; } .u-onHover-tcGreenPremium:hover { color: #4BC012 !important; } .u-onHover-tcBlueStudent:hover { color: #288AE2 !important; } .u-onHover-tcReefGold:hover { color: #AD9333 !important; } .u-textDecorationLink:hover { text-decoration: underline !important; cursor: pointer; } .u-textDecorationNone:hover { text-decoration: none !important; } .u-linkUnstyled:hover { color: inherit; cursor: pointer; } .u-commaList>li:only-of-type:before { content: ''; padding: 0; } .u-commaList>li:only-of-type:after { content: ''; padding: 0; } .u-commaList>li:after { content: ', '; padding-right: 0; } .u-commaList>li:last-child:after { content: ''; clear: both; } .u-showOnFocus:focus { position: static; width: auto; height: auto; } body { width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; box-sizing: border-box; } .ExternalClass { width: 100%; } .ExternalClass { line-height: 100%; } #backgroundTable { margin: 0; padding: 0; width: 100% !important; line-height: 100% !important; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; clear: both; display: block; } body { color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 150%; } body { font-size: 16px; line-height: 150%; } a:hover { color: #166dba; } a:active { color: #166dba; } a:visited { color: #1E88E5; } h1 a:visited { color: #1E88E5; } h2 a:visited { color: #1E88E5; } h3 a:visited { color: #1E88E5; } h4 a:visited { color: #1E88E5; } h5 a:visited { color: #1E88E5; } h6 a:visited { color: #1E88E5; } table.button:hover table tr td a { color: #fefefe; } table.button:active table tr td a { color: #fefefe; } table.button table tr td a:visited { color: #fefefe; } table.button.tiny:hover table tr td a { color: #fefefe; } table.button.tiny:active table tr td a { color: #fefefe; } table.button.tiny table tr td a:visited { color: #fefefe; } table.button.small:hover table tr td a { color: #fefefe; } table.button.small:active table tr td a { color: #fefefe; } table.button.small table tr td a:visited { color: #fefefe; } table.button.large:hover table tr td a { color: #fefefe; } table.button.large:active table tr td a { color: #fefefe; } table.button.large table tr td a:visited { color: #fefefe; } table.button:hover table td { background: #166dba; color: #fefefe; } table.button:visited table td { background: #166dba; color: #fefefe; } table.button:active table td { background: #166dba; color: #fefefe; } table.button:hover table a { border: 0 solid #166dba; } table.button:visited table a { border: 0 solid #166dba; } table.button:active table a { border: 0 solid #166dba; } table.button.secondary:hover table td { background: #919191; color: #fefefe; } table.button.secondary:hover table a { border: 0 solid #919191; } table.button.secondary:hover table td a { color: #fefefe; } table.button.secondary:active table td a { color: #fefefe; } table.button.secondary table td a:visited { color: #fefefe; } table.button.success:hover table td { background: #39910e; } table.button.success:hover table a { border: 0 solid #39910e; } table.button.alert:hover table td { background: #e23317; } table.button.alert:hover table a { border: 0 solid #e23317; } table.button.warning:hover table td { background: #cc8b00; } table.button.warning:hover table a { border: 0px solid #cc8b00; } .thumbnail:hover { box-shadow: 0 0 6px 1px rgba(30,136,229,0.5); } .thumbnail:focus { box-shadow: 0 0 6px 1px rgba(30,136,229,0.5); } body.outlook p { display: inline !important; } @media only screen and (max-width: 624px) { .small-float-center { margin: 0 auto !important; float: none !important; text-align: center !important; } .small-text-center { text-align: center !important; } .small-text-left { text-align: left !important; } .small-text-right { text-align: right !important; } .hide-for-large { display: block !important; width: auto !important; overflow: visible !important; max-height: none !important; font-size: inherit !important; line-height: inherit !important; } table.body table.container .hide-for-large { display: table !important; width: 100% !important; } table.body table.container .row.hide-for-large { display: table !important; width: 100% !important; } table.body table.container .callout-inner.hide-for-large { display: table-cell !important; width: 100% !important; } table.body table.container .show-for-large { display: none !important; width: 0; mso-hide: all; overflow: hidden; } table.body img { width: auto; height: auto; } table.body center { min-width: 0 !important; } table.body .container { width: 95% !important; } table.body .columns { height: auto !important; box-sizing: border-box; padding-left: 24px !important; padding-right: 24px !important; } table.body .column { height: auto !important; box-sizing: border-box; padding-left: 24px !important; padding-right: 24px !important; } table.body .columns .column { padding-left: 0 !important; padding-right: 0 !important; } table.body .columns .columns { padding-left: 0 !important; padding-right: 0 !important; } table.body .column .column { padding-left: 0 !important; padding-right: 0 !important; } table.body .column .columns { padding-left: 0 !important; padding-right: 0 !important; } table.body .collapse .columns { padding-left: 0 !important; padding-right: 0 !important; } table.body .collapse .column { padding-left: 0 !important; padding-right: 0 !important; } td.small-1 { display: inline-block !important; width: 8.333333% !important; } th.small-1 { display: inline-block !important; width: 8.333333% !important; } td.small-2 { display: inline-block !important; width: 16.666666% !important; } th.small-2 { display: inline-block !important; width: 16.666666% !important; } td.small-3 { display: inline-block !important; width: 25% !important; } th.small-3 { display: inline-block !important; width: 25% !important; } td.small-4 { display: inline-block !important; width: 33.333333% !important; } th.small-4 { display: inline-block !important; width: 33.333333% !important; } td.small-5 { display: inline-block !important; width: 41.666666% !important; } th.small-5 { display: inline-block !important; width: 41.666666% !important; } td.small-6 { display: inline-block !important; width: 50% !important; } th.small-6 { display: inline-block !important; width: 50% !important; } td.small-7 { display: inline-block !important; width: 58.333333% !important; } th.small-7 { display: inline-block !important; width: 58.333333% !important; } td.small-8 { display: inline-block !important; width: 66.666666% !important; } th.small-8 { display: inline-block !important; width: 66.666666% !important; } td.small-9 { display: inline-block !important; width: 75% !important; } th.small-9 { display: inline-block !important; width: 75% !important; } td.small-10 { display: inline-block !important; width: 83.333333% !important; } th.small-10 { display: inline-block !important; width: 83.333333% !important; } td.small-11 { display: inline-block !important; width: 91.666666% !important; } th.small-11 { display: inline-block !important; width: 91.666666% !important; } td.small-12 { display: inline-block !important; width: 100% !important; } th.small-12 { display: inline-block !important; width: 100% !important; } .columns td.small-12 { display: block !important; width: 100% !important; } .column td.small-12 { display: block !important; width: 100% !important; } .columns th.small-12 { display: block !important; width: 100% !important; } .column th.small-12 { display: block !important; width: 100% !important; } table.body td.small-offset-1 { margin-left: 8.333333% !important; } table.body th.small-offset-1 { margin-left: 8.333333% !important; } table.body td.small-offset-2 { margin-left: 16.666666% !important; } table.body th.small-offset-2 { margin-left: 16.666666% !important; } table.body td.small-offset-3 { margin-left: 25% !important; } table.body th.small-offset-3 { margin-left: 25% !important; } table.body td.small-offset-4 { margin-left: 33.333333% !important; } table.body th.small-offset-4 { margin-left: 33.333333% !important; } table.body td.small-offset-5 { margin-left: 41.666666% !important; } table.body th.small-offset-5 { margin-left: 41.666666% !important; } table.body td.small-offset-6 { margin-left: 50% !important; } table.body th.small-offset-6 { margin-left: 50% !important; } table.body td.small-offset-7 { margin-left: 58.333333% !important; } table.body th.small-offset-7 { margin-left: 58.333333% !important; } table.body td.small-offset-8 { margin-left: 66.666666% !important; } table.body th.small-offset-8 { margin-left: 66.666666% !important; } table.body td.small-offset-9 { margin-left: 75% !important; } table.body th.small-offset-9 { margin-left: 75% !important; } table.body td.small-offset-10 { margin-left: 83.333333% !important; } table.body th.small-offset-10 { margin-left: 83.333333% !important; } table.body td.small-offset-11 { margin-left: 91.666666% !important; } table.body th.small-offset-11 { margin-left: 91.666666% !important; } table.body table.columns td.expander { display: none !important; } table.body table.columns th.expander { display: none !important; } table.body .right-text-pad { padding-left: 10px !important; } table.body .text-pad-right { padding-left: 10px !important; } table.body .left-text-pad { padding-right: 10px !important; } table.body .text-pad-left { padding-right: 10px !important; } table.menu { width: 100% !important; } table.menu td { width: auto !important; display: inline-block !important; } table.menu th { width: auto !important; display: inline-block !important; } table.menu.vertical td { display: block !important; } table.menu.vertical th { display: block !important; } table.menu.small-vertical td { display: block !important; } table.menu.small-vertical th { display: block !important; } table.menu[align="center"] { width: auto !important; } table.button.small-expand { width: 100% !important; } table.button.small-expanded { width: 100% !important; } table.button.small-expand table { width: 100%; } table.button.small-expanded table { width: 100%; } table.button.small-expand table a { text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } table.button.small-expanded table a { text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } table.button.small-expand center { min-width: 0; } table.button.small-expanded center { min-width: 0; } .hide-for-large-fix-2-2-2 { display: block !important; width: auto !important; overflow: visible !important; max-height: none !important; font-size: inherit !important; line-height: inherit !important; } .fs32-lineHeight1_2-on-small { font-size: 32px !important; line-height: 1.2 !important; } } </style></head> <body style="width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; box-sizing: border-box; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; font-size: 16px; margin: 0; padding: 0;"> <img border="0" height="1" src="https://www.academia.edu/t/fRSsw-RQk5MDc-w1CH7/images/clear.gif" width="1" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; clear: both; display: block;" /><table class="body" data-made-with-foundation="" style="background-color: white; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; margin: 0; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;"><td align="center" class="center" valign="top" style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><center style="width: 100%; min-width: 600px;"> <table class="container--header container float-center" align="center" style="background-color: transparent !important; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 600px; float: none; max-width: 600px; margin: 0 auto; padding: 0;"><tbody><tr style="vertical-align: top; text-align: left; padding: 0;"><td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; padding: 0;"><tbody><tr style="vertical-align: top; text-align: left; padding: 0;"><th class="small-12 large-12 columns first last" style="width: 576px; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; font-size: 16px; margin: 0 auto; padding: 0 24px 0px;"><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;"> <th style="color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; font-size: 16px; margin: 0; padding: 0;"><center data-parsed="" style="width: 100%; min-width: 528px;"><table class="button--noBorder float-center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 100%; float: none; margin: 0px; padding: 0;" align="center"><tr style="vertical-align: top; text-align: left; padding: 0;"><td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;"><td style="background-color: inherit; word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #fefefe; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0; border-style: none;"><a style="color: #fefefe; font-family: Helvetica,Arial,sans-serif; font-weight: bold; text-align: center; line-height: 150%; text-decoration: none; font-size: 16px; display: inline-block; border-radius: 3px; margin: 0; padding: 0px; border-style: none;" title="Academia.edu" href="https://www.academia.edu/t/fRSsw-RQk5MDc-w1CH7/"><img alt="Academia.edu" style="max-width: 265px; width: auto; height: auto; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; clear: both; display: block; border-style: none;" src="http://a.academia-assets.com/images/emails/inky/Academia.Logo.Shadow.png" /></a></td></tr></table></td></tr></table></center></th> <th class="expander" style="visibility: hidden; width: 0; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; font-size: 16px; margin: 0; padding: 0;"></th> </tr></table></th></tr></tbody></table></td></tr></tbody></table> <table style="width: 100%; max-width: 600px; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; float: none; margin: 0 auto; padding: 0;" align="center" class="float-center"><tr style="vertical-align: top; text-align: left; padding: 0;"> <td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"></td> <td style="width: 600px; word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"> <tr style="vertical-align: top; text-align: left; padding: 0;"><td class="container-row u-ph1x" style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 20px 4px;">Alden, is this publication yours? Help us keep your profile up to date.</td></tr> <tr style="vertical-align: top; text-align: left; padding: 0;"><td class="container-row u-ph1x" style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0 4px;"><center style="width: 100%; min-width: 600px;"><table align="center" class="float-center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; float: none; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;"><td class="container-row u-ph1x" style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0 4px;"> <table class="box u-borderBottom1 u-borderColorGrayDark" style="width: 100%; background-color: #FCFCFC; border-spacing: 0; border-collapse: separate; vertical-align: top; text-align: left; border-radius: 20px; overflow: hidden; margin-bottom: 24px; padding: 0; border: 1px solid #999;"><tr style="vertical-align: top; text-align: left; padding: 0;"><td class="paper-top" style="width: 100%; word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 24px;"> <table style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"> <tr style="width: 100%; vertical-align: top; text-align: left; padding: 0;"><td class="work-card-title-container" colspan="2" style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 0;"><span class="work-card-title" style="display: block; font-family: Georgia, Times, 'Times New Roman', serif; color: #333; text-decoration: none; margin-bottom: 10px; font-size: 24px; line-height: 1.3em;">Reducing Library Overheads through Source-to-Source Translation</span></td></tr> <tr style="width: 100%; vertical-align: top; text-align: left; padding: 0;"><td class="work-card-info-container" style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><table style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"> <tr style="vertical-align: top; text-align: left; padding: 0;"><td colspan="3" style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><p class="work-card-author" style="color: #000000; font-family: Helvetica; font-weight: normal; text-align: left; line-height: 28px; font-size: 15px; letter-spacing: 0.4px; margin: 0; padding: 0;">King, Alden</p></td></tr> <tr style="vertical-align: top; text-align: left; padding: 0;"><td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><div class="work-card-publication-info" style="color: #595959; overflow: hidden; font-size: 13px; line-height: 20px; font-family: 'Helvetica Neue', sans-serif;">2012, Procedia Computer Science</div></td></tr> <tr style="vertical-align: top; text-align: left; padding: 0;"><td style="height: 24px; word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"></td></tr> <tr style="vertical-align: top; text-align: left; padding: 0;"> <td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><table style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;"> <td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;">  </td> <td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><a class="button" href="https://www.academia.edu/keypass/UUVmbUNUMkRYNjEvaC96S01sa0lRUG5UU3BMMk5iZW11TFU4dldnK3pDTT0tLUdNZjdvYXVqV0J2cHd5bk5Kd1ZRMEE9PQ==--794c76d73956c3f994853a9ff8b8a3ff001e635b/t/fRSsw-RQk5MDc-w1CH7/mentions/claim_papers/claim?paper_id=136321684" style="color: #fff; background-color: #0954D3; width: 100%; min-width: 150px; font-family: Helvetica,Arial,sans-serif; font-weight: 600; text-align: center; line-height: 150%; text-decoration: none; justify-content: center; align-items: center; align-self: center; box-sizing: border-box; font-size: 16px; display: block; margin: 0; padding: 12px 0; border: 2px solid #0954D3;">Add to Profile</a></td>  </tr></table></td> <td style="width: 12px; word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"></td> <td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><table style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;"> <td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;">  </td> <td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><a class="button" href="https://www.academia.edu/keypass/UUVmbUNUMkRYNjEvaC96S01sa0lRUG5UU3BMMk5iZW11TFU4dldnK3pDTT0tLUdNZjdvYXVqV0J2cHd5bk5Kd1ZRMEE9PQ==--794c76d73956c3f994853a9ff8b8a3ff001e635b/t/fRSsw-RQk5MDc-w1CH7/mentions_verification?anticlaim_paper_id=136321684" style="color: #0954D3; background-color: #fff; width: 100%; min-width: 150px; font-family: Helvetica,Arial,sans-serif; font-weight: 600; text-align: center; line-height: 150%; text-decoration: none; justify-content: center; align-items: center; align-self: center; box-sizing: border-box; font-size: 16px; display: block; margin: 0; padding: 12px 0; border: 2px solid #0954D3;">This Is Not Me</a></td>  </tr></table></td> </tr> </table></td></tr> </table> <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"> <tr style="vertical-align: top; text-align: left; padding: 0;"><td style="height: 14px; word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"></td></tr> <tr style="vertical-align: top; text-align: left; padding: 0;"><td style="font-size: 14px; color: #979797; word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; word-break: break-word; margin: 0; padding: 0;">Adding this paper will upload it to Academia.edu.</td></tr> </table> </td></tr></table> </td></tr></table></center></td></tr> </table></td> </tr></table> <table class="spacer float-center" align="center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 100%; float: none; margin: 0 auto; padding: 0;"><tbody><tr style="vertical-align: top; text-align: left; padding: 0;"><td height="40" style="font-size: 40px; line-height: 40px; word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; mso-line-height-rule: exactly; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; word-break: break-word; margin: 0; padding: 0;"> </td></tr></tbody></table> <table class="container--footer container float-center" align="center" style="background-color: transparent !important; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 600px; float: none; max-width: 600px; margin: 0 auto; padding: 0;"><tbody><tr style="vertical-align: top; text-align: left; padding: 0;"><td style="word-wrap: break-word; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; font-size: 16px; word-break: break-word; margin: 0; padding: 0;"><table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; padding: 0;"><tbody><tr style="vertical-align: top; text-align: left; padding: 0;"><th class="small-12 large-12 columns first last" style="width: 576px; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; font-size: 16px; margin: 0 auto; padding: 0 24px 16px;"><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;"> <th style="color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; font-size: 16px; margin: 0; padding: 0;"> <p class="text-center u-fs11 u-tcGrayDark" style="font-size: 11px !important; color: #999 !important; text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; margin: 0 0 10px; padding: 0;"><a style="color: #999; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; text-decoration: none; margin: 0; padding: 0;">580 California St., Suite 400, San Francisco, CA, 94104</a></p> <p class="text-center u-fs11" style="font-size: 11px !important; text-align: center; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; margin: 0 0 10px; padding: 0;"><a class="u-linkUnstyled u-tcGrayDark" target="_blank" href="https://academia.edu/keypass/UUVmbUNUMkRYNjEvaC96S01sa0lRUG5UU3BMMk5iZW11TFU4dldnK3pDTT0tLUdNZjdvYXVqV0J2cHd5bk5Kd1ZRMEE9PQ==--794c76d73956c3f994853a9ff8b8a3ff001e635b/t/fRSsw-RQk5MDc-w1CH7/confirm_unsubscribe/confirm_papers" style="color: #999 !important; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; text-decoration: none; margin: 0; padding: 0;">Unsubscribe</a> <a class="u-linkUnstyled u-tcGrayDark" href="https://www.academia.edu/t/fRSsw-RQk5MDc-w1CH7/privacy" target="_blank" style="color: #999 !important; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; text-decoration: none; margin: 0; padding: 0;">Privacy Policy</a> <a class="u-linkUnstyled u-tcGrayDark" href="https://www.academia.edu/t/fRSsw-RQk5MDc-w1CH7/terms" target="_blank" style="color: #999 !important; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; text-decoration: none; margin: 0; padding: 0;">Terms of Service</a> </p> <p class="text-center u-tcGrayDark u-fs11" style="font-size: 11px !important; color: #999 !important; text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 150%; margin: 0 0 10px; padding: 0;"><span>© 2024 Academia</span></p> </th> <th class="expander" style="visibility: hidden; width: 0; color: #000; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 150%; font-size: 16px; margin: 0; padding: 0;"></th> </tr></table></th></tr></tbody></table></td></tr></tbody></table> </center></td></tr></table> <div style="display: none; white-space: nowrap; font: 15px/0 courier;"> </div> </body> </html>

kinga112 · 2024-05-13T13:21:59Z

It mostly affects icon images, but I have noticed that font/text sizes can change too based on the parsed html.

kinga112 · 2024-05-13T13:34:58Z

Some cases where component styles can affect other components is with identical class names, but I am using tailwind.

remarkablemark · 2024-05-13T16:10:23Z

Do you think it's related to #1302?

kinga112 · 2024-05-26T02:23:45Z

I tried replaceAll('!important', '') but it did not change anything.

kinga112 · 2024-05-26T02:24:56Z

Seems like the css values are affecting my react components somehow.

remarkablemark · 2024-05-26T04:32:16Z

My recommendation is to try to use dangerouslySetInnerHTML to test whether the issue is coming from your React components or this library. There's a possibility that it's unrelated to this library.

kinga112 · 2024-05-26T19:55:18Z

This still occurs with dangerouslySetInnerHTML

kinga112 · 2024-05-26T19:56:04Z

Does this library just use <div dangerouslySetInnerHTML={markup} />;?

remarkablemark · 2024-05-26T22:38:07Z

If this still happens with dangerouslySetInnerHTML, then your issue is unrelated with this library. It's either coming from your markup or React code.

This library does not use dangerouslySetInnerHTML except for 1 edge case, take a look at the source code: https://github.com/remarkablemark/html-react-parser/tree/master/src

kinga112 · 2024-05-26T22:46:34Z

Okay thanks!

kinga112 added the bug Something isn't working label May 10, 2024

kinga112 assigned remarkablemark May 10, 2024

remarkablemark added invalid This doesn't seem right and removed bug Something isn't working labels May 26, 2024

remarkablemark closed this as not planned Won't fix, can't repro, duplicate, stale May 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Components outside html component get resized #1420

Components outside html component get resized #1420

kinga112 commented May 10, 2024

remarkablemark commented May 10, 2024

kinga112 commented May 10, 2024

kinga112 commented May 10, 2024

kinga112 commented May 13, 2024

kinga112 commented May 13, 2024

remarkablemark commented May 13, 2024

kinga112 commented May 26, 2024

kinga112 commented May 26, 2024

remarkablemark commented May 26, 2024

kinga112 commented May 26, 2024

kinga112 commented May 26, 2024

remarkablemark commented May 26, 2024 •

edited

Loading

kinga112 commented May 26, 2024

Components outside html component get resized #1420

Components outside html component get resized #1420

Comments

kinga112 commented May 10, 2024

Expected Behavior

Actual Behavior

Steps to Reproduce

Reproducible Demo

Environment

Keywords

remarkablemark commented May 10, 2024

kinga112 commented May 10, 2024

kinga112 commented May 10, 2024

kinga112 commented May 13, 2024

kinga112 commented May 13, 2024

remarkablemark commented May 13, 2024

kinga112 commented May 26, 2024

kinga112 commented May 26, 2024

remarkablemark commented May 26, 2024

kinga112 commented May 26, 2024

kinga112 commented May 26, 2024

remarkablemark commented May 26, 2024 • edited Loading

kinga112 commented May 26, 2024

remarkablemark commented May 26, 2024 •

edited

Loading