CODEWITHSUNDEEP
javascripthtmliframe
Utkarsh Tyagi
Utkarsh Tyagi

Reputation: 1489

How to remove only the horizontal scroll from iframe?

I have an input tag where people can use either images or pdf, and I want to display that document using iframe but it add both horizontal and vertical scroll to the document, whereas I would like the document width to fit to the iframe width and keep a scroll for vertical axis. Somewhat like a css property contain for background images.

#div-test-img {
  height: 100px;
  width: 100px;
  background-image: url('https://source.unsplash.com/user/c_v_r');
  overflow-y: auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#iframe-test-img {
  height: 100px;
  width: 100px;
  overflow-y: auto;
}
<div id="div-test-img"></div>
<iframe id="iframe-test-img" src="https://source.unsplash.com/user/c_v_r">

I want iframe to display similar to div, the same should be working with pdf's. If possible please answer with an example of both image and pdf. Any help would be appreciated..

Upvotes: 0

Views: 146

Answers (1)

1058u4
1058u4

Reputation: 172

If you only want to use images and pdfs you can do it like that:

#div-test-img {
  height: 100px;
  width: 100px;
  background-image: url('https://source.unsplash.com/user/c_v_r');
  overflow-y: auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#test-img {
  height: 100px;
  overflow-y: auto;
}

#iframe-pdf {
  width: 100%;
  height: 100px;
  overflow-y: auto;
}
<div id="div-test-img"></div>
<img id="test-img" src="https://source.unsplash.com/user/c_v_r">
<iframe id="iframe-pdf" src="http://www.africau.edu/images/default/sample.pdf"></iframe>

Upvotes: 1

Related Questions