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.

Component with effect has a wrapping span with custom styles predefined

See original GitHub issue

Bug description When a <LazyLoadImage> has an effect property defined (e.g. "opacity"), the image is wrapped with a span (where all the corresponding classes are applied (e.g. lazy-load-image-loaded)). Said span comes with some styles already defined in the component, as seen in method getWrappedLazyLoadImage() of LazyLoadImage.jsx. This raises problems when the wrapping element is expected to have its default behavior. In my case, I needed it to stay displayed as a block (as an would be), but instead it becomes an inline-block. In my case it breaks my view (see screenshot below)

To Reproduce Create a <LazyLoadImage> with an effect and inspect it.

<LazyLoadImage src="test.jpg" alt="Test" effect="opacity" />

Expected behavior The wrapping element shouldn’t change how the component is rendered.

Perhaps the style for the wrapper should be defined in the CSS of each effect instead.

Screenshots Selection_107

Technical details:

  • Package version: 1.3.2
  • Server Side Rendering? No
  • Device: any
  • Operating System: doesn’t apply
  • Browser: happens with both Firefox and Chrome

Maybe it is related -or can be circumvented- if #31 is implemented

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

Aljullucommented, Aug 7, 2019

@Aljullu May I raise a PR with wrapperProps?

Sure, that would be awesome! There is a WIP PR about adding loadedImageProps and placeholderProps which might be useful to use as a reference: #46.

You can even use the add/loaded-image-props branch as a base if you want. master would be fine as well.

asimoesmcartorcommented, May 25, 2019

@Aljullu Ahh perfect. Thank you so much! I will use the workaround for now. I think I was just missing the “!important” part and it was blocking me. Still learning over here!

I’ll keep an eye on this issue just in case you decide to pass the placeholder and wrapper props. Thanks again!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Wrapping and breaking text - CSS: Cascading Style Sheets
This guide explains the various ways in which overflowing text can be managed in CSS.
Read more >
Advanced Usage - styled-components
styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React components ...
Read more >
"Wrap with Span" text option in Editor - Forum | Webflow
Spans essentially allow you to style pieces of your text within an element with their own class. In the same way using bold...
Read more >
What is the MUI Box component for? - Stack Overflow
It's an element wrapped around its content which by itself contains no styling rules nor has any default effects on the visual output....
Read more >
Span HTML – How to Use the Span Tag with CSS
Also, keep in mind that span itself does not have any effect on its content ... and font-style of some text by wrapping...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found