2016-05-02 5 views
0

Горизонтальная прокрутка Iframe всегда скрыта, но я хотел бы видеть ее прокруткой-x на моей веб-странице. Я не понимаю, почему свиток-х никогда не появляется? Прокрутка-y отображается, но не горизонтальная.Горизонтальная прокрутка Iframe всегда скрыта

Любое предложение?

 <div class="row"> 
      <div class="col-sm-8 col-sm-push-4"> 
       <div class="embed-responsive embed-responsive-4by3"> 
        <iframe class="embed-responsive-item" src="http://fr.lichess.org/training/29058" style="overflow-x: scroll;"></iframe> 
       </div> 
      </div> 
     </div> 

ответ

2

Переполненный в смежных стилях/классах

После изучения CSS для цели вашего , это выглядит как <body> кажется явно ограничить это через overflow-x собственности, как показано ниже:

enter image description here

Кроме того, класс embed-responsive, который является объектом ING ваш также ограничит это как это overflow свойства скрыто полностью:

enter image description here

решения (если вы можете настроить свою внутреннюю-страницу)

Однако, если вы явно удалить overflow-x: scroll; на вашем он должен работать должным образом и установить overflow-x на вашей внутренней странице до auto:

/* Adjust this in your inner page (common.css, line 906) */ 
body { 
    /* Other styles omitted for brevity */ 
    overflow-x: auto; 
} 

Тогда вы должны увидеть, что работает, как ожидалось:

enter image description here

+0

затем, если цель моего фрейма ограничить переполнение-й собственность, я ничего не могу решить эту проблему делать? – zm455

+0

У вас есть доступ к настройке свойства 'overflow-x' целевой страницы? Это было бы самым простым решением, так как стиль '' этой внутренней страницы явно вызывает игнорирование свойства overflow-x'. –

+0

Доступ к переполнению-x целевой страницы? Я не веб-мастер этого шахматного сайта. Поэтому я не могу получить доступ к свойствам CSS этого веб-сайта. Надеюсь, я понимаю, о чем вы говорите ...? – zm455

0

.embed-responsive имеет overflow набор свойств для hidden.

.embed-responsive-item не имеет overflow Недвижимость.

Попробуйте это:

<div class="row"> 
    <div class="col-sm-8 col-sm-push-4"> 
     <div class="embed-responsive embed-responsive-4by3" style="overflow-x: scroll;"> 
      <iframe class="embed-responsive-item" src="http://fr.lichess.org/training/29058"></iframe> 
     </div> 
    </div> 
</div> 
Смежные вопросы