Description html width

[dohboy97]

Hi,

We're attempting to use the description on the product model to set the innerHTML of a div in our app. Weirdly, the body has a hardcoded width of 1839px. Any way to avoid this?

[dohboy97]

There's also several other hard coded widths. It's becoming an issue inside of modals on smaller screens 🤕

[dohboy97]

See here. This is a product in our test store (productId: '663275af4108ed00127d575f'). Note that the `ul` element has a random width set of 562px. This is rigid - it does not change as the width of its parent container changes - and causes unwanted overscrollX. I want to set the innerHtml with the `description` on the product without having to fight against these widths on the description html if possible.

Our storeId is 'perk-up'

[logeshswell]

Swell doesn't have anything to do with CSS stylings in your custom storefront.
Can't you use the custom CSS styles to override the width?

[dohboy97]

@logeshswell Those widths are on the description of the product. Look at this:

      "description": "<div id=\"isPasted\" style='box-sizing: border-box; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; color: rgb(69, 69, 69); font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'><div style=\"box-sizing: border-box; position: relative; width: 1839px; min-height: 1px; padding-right: 15px; padding-left: 15px; flex: 0 0 100%; max-width: 100%; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; color: rgb(4, 22, 87);\"><div style=\"box-sizing: border-box; display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;\"><ul style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; padding: 0px 12px; width: 1839px;\"><li style=\"box-sizing: border-box; padding-right: 3rem !important; list-style: none !important; width: 604.938px; float: left;\"><div style=\"box-sizing: border-box;\"><div style=\"box-sizing: border-box;\"><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem;\">Keep your hands warm on cold days with the unisex Optimal Knit Gloves. On top of being super cozy, they earn extra style points with the turn-back cuff, and they&rsquo;re anti-pill to keep them looking new for a long time. They feature a 2x1 rib knit. Pair them with the matching Optimal Knit Cuffed Beanie for a stylish, coordinated look.</p></div></div></li></ul></div></div></div>",

Cmd + f width - you'll see several on the description. This is coming straight from the product response in swell. Video clipped is of the developer console, get products.

Screen.Recording.2024-05-16.at.10.47.57.AM.mov

I would prefer not to go in and override these crazy widths with custom CSS - why do these rigid widths exist in the first place?

[logeshswell]

Understood, it's a default behavior and you can override CSS as per your needs.

[csoregaroli]

@logeshswell it doesn't make sense to us why those defaults are being set though. Here's a screenshot of the HTML of our description in Swell's UI. We haven't set any width

[logeshswell]

The description field editor is built using the library: https://github.com/froala/react-froala-wysiwyg/
This library sets the width automatically, so please feel free to override it using custom CSS.