PDF HELP with Sidebar

HTML & CSS
22

I tried this. The pdf does not have a sidebar but when i extend the size of it then the ide bar is showing

23

Theres no css. I told you use a pdf an try this code!!! The pdf automatically added side bar when it’s width is extend.

24

The pdf automatically added hat grey are when i change the width!! Please try the code and change the width with any pdf and see for you self okay! You will understand

25

name.pdf (141.1 KB)

26

here is pdf download and save it in a folder along the code and run

27

Please note that I changed the HTML and added one CSS rule.

The .pdf file is in the same folder as the HTML file.

Does this help at all?

<!DOCTYPE html>
<html>
<head>
    <style>
body {
   padding:0;
   margin:0;
}
    </style>
</head>
<body>

<embed src="name.pdf#toolbar=0&navpanes=0&scrollbar=0" style="width:800px; margin: 0 auto; height:100vh; display:block;">

</body>
</html>
28

@ronpat @TechnoBear — @surajkay19 is describing a situation where he uses an embed element to embed a PDF doc on a page. The “gray sidebars” appear in some browsers (e.g. Chrome) where the doc doesn’t fill the width of the embed element. (So the embed element kind of has a gray background).

@surajkay19 — you’re making the mistake here of trying to design for a particular screen width. You’ll always be chasing your tail doing this, as there are endless screen sizes. I think the only way to get what you’re asking for is to set the original document to the width you desire and then save as a PDF again, but that will make it way too wide on some screens. My recommendation is that you not embed the PDF but instead link to it and let the browser display PDFs in its native way. Browser display of PDFs is pretty nice these days, so I’d stick with that.

EDIT:

Actually, there is a parameter you can use (#view=FitH), but not all browsers will obey it. Here’s a discussion about it:

5 Likes
29

Thanks for the clarification, @ralphm. In his first post, @surajkay19 said:

which I read as him wanting to add the grey sidebars - hence my three-column suggestion.

1 Like
30

I serve a purpose that is why it have to fit on the page! Does anyone know about a code that will make this workk?

31

Perhaps if you were to explain that purpose - what it is you need to achieve - we would be able to suggest a better way of doing it.

Did you try the method in the link @ralphm posted above?

32

The purpose is to display this on a webpage in a readable format so it can be read only and not download. It should be full screen without showing that grey side bar. Can you help? @ralphm @ronpat @TechnoBear

33

How do you plan on stopping it from being downloaded?

1 Like
34

Yes, for any content to be seen by a site visitor it must download to their computer.

IMHO the better way would be to output your source content as HTML rather than outputting as a PDF in an <embed>

3 Likes
35

It’s not a problem if its download it. I am trying to make it full screen! Can you guys help? @ralphm @ronpat

36

You can have it 100% width OR 100% height - but not both!

37

100% Width will be fine

38

But how do i do it?

39

Why do you need to use an embedded PDF, rather than simply creating an HTML page which can adapt to any width?

40

Can you understand? I would have done that but this will be keep changing frequently. I don’t want to go in the code and change it frequently!

41

What will keep changing frequently?

(complete, unambiguous information, please.)