0

I'm working on a BlackBoard installation and only have access to the CSS files (which are a mess by default). The problem I encounter only occurs on pages where the main content div is rendered by an iFrame. When I load the page I am unable to scroll down, however, after resizing my browser window the scrolling starts working again.

I did my Google search, tried some different styles but without any result. So any pointer would be really helpful as to where I should look.

Unfortunately I cannot provide a live example as everything happens after authentication, so I realise this will be somewhat of a longshot.

The offending element:

<iframe id="contentFrame" target="_self" style="display: none; width:100%; height: 400px;" frameborder="0" name="content" title="ContentFrame" src="https://bb1415ap.uantwerpen.be/webapps/blackboard/execute/launcher?type=Course&id=_4244_1&url=" framespacing="5"></iframe>

The div that wraps around it:

<div id="globalNavPageContentArea" style="height: 528px; overflow: auto;">

Removing all CSS specific to either the wrapper div or the iframe itself has no effect on the problem.

Jenszor
  • 89
  • 2
  • 3
  • 9
  • is the iframe loaded with AJAX? Are you specifying a height in CSS? – David Alsbright Aug 21 '14 at 13:59
  • Both the parent div and the iframe get a height as inline css by default. These are equal to the height of the viewport, I have tried overriding it with CSS but nothing changes. I believe the content is indeed loaded with AJAX on page load. – Jenszor Aug 21 '14 at 14:41
  • This is common with dynamically loaded content, if setting an explicit height doesn't work (use exact pixel dimensions as percentages tend to behave badly when loaded with AJAX) you could try to fire a window resize event during your AJAX success callback, although that's a dirty hack! Can you post your iframe html and css? – David Alsbright Aug 21 '14 at 14:49
  • I added the HTML to my original post. All relevant css is inline and set by the software itself. Also, I have no access to the files where the AJAX is loaded, but could instruct others to do so as a last resort. PS I'm doing this for an educational institution, the bureaucracy is murdering. – Jenszor Aug 21 '14 at 15:32
  • Hmm, the 400px height should work, if it's images that are being loaded into the iFrame, do they have explicit heights set? – David Alsbright Aug 22 '14 at 12:47
  • Jenszor, your will have an easier life if you load the content outside of an iframe. I've noticed in the past that the libraries from the Blackboard API could enforce restrictions like this on external code. – gpu3d Aug 24 '14 at 09:09
  • @David the only images being loaded are a couple of icons that have fixed width abd height. – Jenszor Aug 24 '14 at 13:57
  • @Marius unfortunately there is no other way to load a BlackBoard organisation into the top frame (main menu in BlackBoard). As a temporary fix I have set the height of the iframe to ~4500px to accommodate for all the content. – Jenszor Aug 24 '14 at 13:58

0 Answers0