IE скрывает пункты меню, когда PDF загружается в Webform - PullRequest
Новая
       13

IE скрывает пункты меню, когда PDF загружается в Webform

0 голосов
/ 05 сентября 2018

У меня есть пункт меню. Когда пользователь нажимает кнопку элемента меню (Заявка), он открывает файл PDF под пунктом меню.

Image of menu item

Проблема в том, что когда я загружал ту же веб-форму в Internet Explorer, она открывалась PDF под кодом, но мой список пунктов меню идет за PDF.

image of menu item behind the PDF iframe viewer

Вот мой код о том, как PDF загружается в веб-форму: 

<iframe id="myframe" width="100%" height="600px" runat="server" frameborder="1" ></iframe>

Я использовал iframe для загрузки PDF. 

string fileName = "IGI-Travel-Sure-Claim-Procedure.pdf";
    this.myframe.Attributes["src"] = "../uploads/pdf/" + fileName;

Выше кода, когда форма загружается, он загружает PDF в веб-форму.

Моя проблема в том, что всякий раз, когда я открываю свой веб-браузер в Internet Explorer, он скрывает мой список пунктов меню за средством просмотра PDF iframe. Между тем, та же веб-форма с тем же кодом и iframe отлично работает во всех других браузерах, таких как Chrome, FireFox, Opera и Edge, но не в Internet Explorer 11. Приложение разработано в framework 2.0 Проверить это изображение

Это также поможет вам понять мою проблему

1 Ответ

0 голосов
/ 12 сентября 2018

После поиска ответа на этот вопрос я очень глубоко копаю, но кое-как я могу найти его ответ. Надеюсь, те, у кого есть эта проблема, могут также решить из моего ответа.

Применен простой CSS на моем <iframe> для отображения PDF. Простой CSS-код 

 #Iframe-Master-CC-and-Rs {
  max-width: 100%;
  max-height: 100%; 
  overflow: hidden;
}

/* inner wrapper: make responsive */
.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */

  /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS:
    -webkit-overflow-scrolling: touch; overflow: auto; */

}

.responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
  border: none;
}

/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-572x612 {
  padding-bottom: 107%;

}

А вот и код 

<div class="responsive-wrapper responsive-wrapper-wxh-572x612">
<iframe src="yourpdflink.pdf" style="width:100%; height:100%;" frameborder="0"></iframe></div>

Теперь работает нормально на каждом браузере, если таковой еще не решен, комментарий к обсуждаемому вопросу.

...