react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

How to inline Image and Text next to each other. Using View Component

Open shai93 opened this issue 3 years ago • 7 comments

Wanted to inline Image and Text next to each other. I try to wrap both inside Text component it is showing inline but the alignment of image is little weird. Image move to little upward doesn't align to text content. Also I tried to apply css to Image that doesn't work not able to move image vertically.

Repl

shai93 avatar Mar 15 '23 14:03 shai93

it is not ideal but vertical alignment can be helpful here

repl

vertical-align can not be applied to Image, so i setup opposite vertical-align to the text. This is a weird trick but it works 🙌🏻

jeetiss avatar Mar 15 '23 14:03 jeetiss

Thanks @jeetiss for quick answer. But vertical alignment not working for me. :( . @jeetiss please check repl

shai93 avatar Mar 15 '23 16:03 shai93

vertical alignment doesn't work in your repl because it has an outdated react-pdf version (3.0.0). please use the latest one (3.1.7)

here PR with the vertical alignment https://github.com/diegomura/react-pdf/pull/2214

jeetiss avatar Mar 15 '23 16:03 jeetiss

Thanks alot @jeetiss. you are a saviour.

shai93 avatar Mar 15 '23 17:03 shai93

@jeetiss there is also one issue with image and text inline. Actually image is getting overlap on Text. When i wrap image and Text inside Text component. repl Screenshot 2023-03-16 at 12 03 26 AM

shai93 avatar Mar 15 '23 18:03 shai93

@jeetiss can you please help me with above issue

shai93 avatar Mar 17 '23 10:03 shai93

Hi @diegomura, can you look into this? This seems like still an issue, as mentioned by @shai93

nishantjoshtech avatar Oct 27 '25 13:10 nishantjoshtech