Closed JafrinJohn closed 6 months ago
<Page key={`page_${pageNumber}`} pageNumber={pageNumber} customTextRenderer={textRenderer} renderAnnotationLayer={false} loading={''} /> const textRenderer = (textItem: { str: string }) => highlightPattern(textItem.str, citationData ?? [])
this is my code snippet do i need to make changes to the CSS
import 'react-pdf/dist/esm/Page/AnnotationLayer.css' import 'react-pdf/dist/esm/Page/TextLayer.css'
this two css i have used
.Example input, .Example button { font: inherit; } .Example header { background-color: #323639; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); padding: 20px; color: white; } .Example header h1 { font-size: inherit; margin: 0; } .Example__container { display: flex; flex-direction: column; align-items: center; margin: 10px 0; padding: 10px; } .Example__container__load { margin-top: 1em; color: white; } .Example__container__document { width: 100%; max-width: calc(100% - 2em); margin: 1em 0; } .Example__container__document .react-pdf__Document { display: flex; flex-direction: column; align-items: center; } .Example__container__document .react-pdf__Page { margin: 1em 0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } .Example__container__document .react-pdf__message { padding: 20px; color: white; } .react-pdf__Page__canvas { margin: 0 auto; width: 100% !important; height: 100% !important; } .react-pdf__Page__textContent { /* margin: 0 auto; width: 100% !important; height: 100% !important; */ } .highlight { background: yellow !important; font-size: larger; z-index: 2; }
Have attached the screen shot and code
It should be highlighted i think it is getting appended
The text given in should be highlighted
No response
The issue you're having is caused by scaling PDF using CSS, which is not allowed. Use scale, width, height props instead.
scale
width
height
Before you start - checklist
Description
this is my code snippet do i need to make changes to the CSS
this two css i have used
Steps to reproduce
Have attached the screen shot and code
Expected behavior
It should be highlighted i think it is getting appended
Actual behavior
The text given in should be highlighted
Additional information
No response
Environment