PDF HELP with Sidebar

Does anyone know a code that will make the gray side bar on a pdf without changing the height and also extend the width. Or how can i extend the width without it affecting the height.

Your question is not very clear, @surajkay19.

Normally, you would create a PDF from a text document, so you design the document as you wish and export it as a PDF.

Can you clarify what you’re trying to achieve here?

The pdf is embeded in a webpage! And the grey side that is showing on the image is the only thing that is chaning when i change the width and height. I wanna make to show the blue part only

What is the code (HTML & CSS) that you’re using for this?

HTML and Css

It is in html sorry about that

I meant, please show us the code you are using - or a link to a working demo page.

<embed src="pdf/name.pdf#toolbar=0&navpanes=0&scrollbar=0" width="1920" height="1050">

I’m trying to understand how your PDF relates to the rest of your page content. I really need to see the code for the whole page for that.

A width of 1920px is going to be too wide for many monitors, even without adding a sidebar.

1 Like

Thats the entire code! its not realted to anything! My screen resolution is 1920 by 1080

<!DOCTYPE html>
<html>

<head>



<embed src="pdf/name.pdf#toolbar=0&navpanes=0&scrollbar=0" width="1920" height="1050">

</body>



</html>

That’s not valid HTML, as I’m sure you know. At the very least, you need a closing </head> tag and an opening <body> tag.

I still don’t understand what you are trying to achieve, or why you are choosing to do it this way. You know you can simply link to a PDF, which will open it in the visitor’s document reader, don’t you?

However, in the absence of any further information from you, the best I can suggest is that you create three containers, place your PDF in the centre one and use the other two for the grey areas. You can use CSS tables to ensure they are equal in height.

1 Like

Can you do an example? Sorry i know missed the header

You need an outer div with display:table containing three more divs side by side, each with display:table-cell. Your PDF goes in the middle of these, and you can adjust the widths to get the look you want.

Can you please show me an example? I don’t know how to do it.

You could simply give the embed element a width of the actual PDF dimensions. (You can check the dimensions of the PDF somewhere in the settings. For example, on a Mac using Preview, Tools > Show Inspector > Crop shows you the dimensions of the PDF in points.)

So then do something like this:

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

this works but when I change thee width it, the grey side bar start showing again. I want to make the pdf full screen. Like 1920 by 1010 px

@surajkay19, why does the .pdf have printed sidebars? Why are the sidebars not being added with HTML and CSS? Why are they shown on the .pdf? What is the purpose of the “sidebars”?

When i change the width then the grey side bar started to show! I dont want it to show. I wanna make the pdf a size of 1920 by 1010

The sidebars is not leting the pdf to show full screen. Check post number one that is the grey side bar. use any pdf and try it with this code below youll see:

<!DOCTYPE html>
<html>

<head>


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

</head>



</html>

Then remove the so-called “sidebars” from the .pdf and make the content area 1920x1010.

The image in post number 1 looks like the .pdf has a blue content area and black sidebars all drawn on it.

We need a better description of what you are showing us. We cannot make any part of your “code” render anything on our computers. How can we help you when you seem to be unable to show us code that does anything?

Please pretend that you are in our shoes and look at what you are submitting. It doesn’t make sense to us.

Show us the HTML and CSS code that makes the “sidebars”, maybe.

Please read this short description about the embed tag. Specifically, it belongs in the <body> portion of the page, NOT the <head> portion. It also requires a parent in which the object being summoned can be displayed.

You have demonstrated no understanding of any of this. Please read and learn more about whatever it is you are trying to do so you can help us help you.