iframe scrollbar solution

collerette_stan / 2008-09-04 09:51:57   

Hello !
I spend some hours to integrate wordpress on my indexhibit.
For people who has 'double' scrollbars appearing on IE and Firefox, you have to check two things :

_ in the indexhibit css file, the div containers (id=content & class=container) must have top and bottom padding and margin equals to 0

_ there must be no tags enclosing the iframe embed, so maybe disable process html (I delete it directly in the database).

Hope it Helps..

Vaska A / 2008-09-04 14:08:54   

Good information...but this is what we usually recommend.

jasmu / 2009-11-07 17:39:19   

i have trouble removing the scroll bar. it worked once, i edited the plugin and change it to:

  1. // apply height and width     
  2. } 

now, it's not working.
here's the page
page processing is off, obviously.


Vaska A / 2009-11-07 22:42:23   

I don't understand why you are editing that stuff...it should work without these edits.

jasmu / 2009-11-08 00:12:26   

uhm, because it's not working. see for yourself, i uploaded the unmodified plugin, now i got 2 bigger scrollbars. yes, page processing is off.

Vaska A / 2009-11-08 00:18:47   

Read the links in red on the Useful Threads page. Note, you broke the layout by editing #content with padding.

And the code for that form is very messy...

Saarasaara / 2010-03-18 15:24:06   

Sorry to be bugging everyone with this one, as I understand it's not an issue that can be easily resolved. However, I keep getting double scrollbars with Wordpress in IE (Chrome works fine). Page processing is off, and #content and .container have no margins or paddings in top/bottom (#content does have a left margin, but removing it will not solve the issue).

I studied the Useful Threads, and saw a thread where Vaska says many people have managed to integrate successfully, so I guess I'm just trying to see if anyone reading this might happen to be one of those people. If you have any ideas on what I should be looking at, I would appreciate to hear them.

link to site

Saarasaara / 2010-03-18 20:21:45   

This appears to have done the trick for me:

  1. #bground {
  2. overflow-x:hidden;
  3. }

But I have another exhibition on my site, which uses horizontal display mode, so I need this styling to apply only to the exhibition with the iframe. This led me to look at the plugin, and there's a strange occurrence:

  1. <style type='text/css'>
  2. #content .container {
  3. padding: 0;
  4. }
  5. </style>

The # symbol before 'content' makes the whole line 15 into a comment (Dreamweaver). I wonder why, and if it's a problem.

Anyway, any help in how and what to modify, is appreciated as always.

Saarasaara / 2010-03-18 20:53:15   

Actually it looks like I came up with something that at least works for me. For anyone with the same situation:

1. remove 'overflow' setting entirely from #bground (in style.css)

  1. 2. add before line 28 in ndxz_iframed plugin file:
  2. $('#bground').css('overflow-x', 'hidden');
  1. 3. modify line 25 in plugin file:
  2.  ¬†¬†¬†¬†frame_y = $('#bground').height(); 

When the plugin is in action, it uses the specified overflow-x setting, but when another exhibition is clicked, the setting is no longer effective. My Firefow crashed and won't install back, so I can't test with it. With IE and Chrome seems to work fine.

Saarasaara / 2010-03-18 20:55:59   

Ok pretty confusing formatting there; I'll repost:

1. remove 'overflow' setting entirely from #bground (in style.css)

2. add before line 28 in ndxz_iframed plugin file:

  1. $('#bground').css('overflow-x', 'hidden');

3. modify line 25 in plugin file:

  1. frame_y = $('#bground').height();
hwm187 / 2010-10-14 22:11:47   

Hi Guys,

I was able to remove the 2nd scroll, but now the verticle size of the scroll bar is very small and i'm confused as to how to fix.

please see the link here

pretty sure it has to do with the #bground but help is very appreciated. thanks!

arsondpi / 2010-10-14 22:54:55   

what's #bground? Change it back to #menu and things should work..
And change margin:80px 0 0 275px; to margin:0 0 0 275px; for you #content (apply the top margin to #content .container)

hwm187 / 2010-10-14 23:08:29   

to clarify, I didn't change #menu to #bground, (i don't even have a #bground in my css), i only added the 2 lines stated above to my iframed plugin file.

moving the 80px from my margin to my container padding put all my content straight to the top, seemed to ignore the padding, and this did it for every page not just the iframe one.

i'm still confused why my scroll bar is so small?

arsondpi / 2010-10-14 23:32:30   

The solution above was about that specific site. Anyway your site seems to work fine now...
The correct way of lowering your content area is by adding

  1. #content .container { padding-top: 80px; }

Edited by ArsonDPI

hwm187 / 2010-10-14 23:35:47   

I see what you mean about the margin, but the #menu. container padding doesn't seem to be doing anything. how can i get my content back down to 80px top?


arsondpi / 2010-10-15 09:18:13   

I'm sorry - my mistake!!! I meant #content .container

-delete .container as it is now
- add:

  1. #menu .container { padding: 5px 5px 25px 5px; }
  2. #content .container { padding: 80px 5px 25px 5px; }
fleetobjects / 2010-11-18 04:39:05   

I've tried all of the solutions listed above but nothing seems to work for me. I still have the double scroll in all web browsers (especially worse in IE) link. Any new suggestions?

Vaska A / 2010-11-18 04:47:11   

In "Useful Threads" find the one about proper styling of margin and padding - you've violated these rules.

You need to take off padding and/or margin on #menu and #content. Then, you need to balance them so that they work together (right now your #menu is 250px wide while the #content has a left margin of 215px).

Fixing these things might be enough to solve the scrollbar problem. But you have to take things one thing at a time until you find the one particular problem.

SanderN / 2010-12-18 07:36:52   

I've got the same problem, but I'm really not good at all with the encoding, somebody got an easy solution as I only need it to be removed from the Iframe plugin page, no other page.

Thanks in advance!

This thread has been closed, thank you.