The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Remove scroll bar from iframe, Show iframe without a vertical scroll bar
CharlesEF
post Feb 3 2019, 06:56 PM
Post #1


Programming Fanatic
********

Group: Members
Posts: 1,671
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi All,

Ok, what is the trick to removing the scroll bar from an iframe. HTML5 specs state that CSS should be used but 'overflow: hidden;' has no effect. The only thing that does work is 'scrolling="no"' but HTML5 doesn't support it. The container that holds the iframe is big enough and the scroll bar should not appear but it does.

Does this mean I have to use HTML4 instead of HTML5?


Thanks for any help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 4 2019, 06:20 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,224
Joined: 10-August 06
Member No.: 7



This works in my browsers:

CODE
iframe {
height: 300px;
width: 500px;
overflow: hidden;
border: 0;
}

<iframe src="http://example.org"></iframe>

If you increase text size, the framed content will of course need more space. Also make sure the scrollbars are from the iframe itself, and not from the parent page (or element) because the iframe is too large.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 4 2019, 01:33 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,671
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



No, it doesn't work for me. I tried it on the current versions of FF, IE, Edge and Dragon (Chromium based). The container height is 450px while the iframe height is 400px. When I display the iframe I see a scrollbar that stops before the bottom of the container. This tells me that the scrollbar is from the iframe. 400px is more than enough space for the iframe, the page should fit in 250px.

I will be gone the rest of the day but tonight I will put together a sample document and post it.


Thanks for your input,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 5 2019, 10:35 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,671
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I put together a basic page to show my problem. Seems the basic HTML (all PHP and 99.9% CSS removed) didn't show the same problem. So, I uploaded the application to my website. please click here. Before you click on the 'Test Database Connection' button be sure to fill in the 'Host Name' field, just type a character or 2 then click the button. The modal window will open and you will see the scrollbar. You can click the 'Cancel' button to close the modal.

I've gone over it so many times I'm going blind.


Thanks for any help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2019, 01:34 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,377
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Feb 4 2019, 12:20 PM) *

This works in my browsers:

CODE
iframe {
height: 300px;
width: 500px;
overflow: hidden;
border: 0;
}



Actually, that doesn't work for me. Not with any page loaded in an iframe. Odd, I seem to recall this used to be possible with CSS?

Charles, try to add the following to the CSS for db_tests.php . That ought to work.

CODE
body   { overflow: hidden }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 6 2019, 02:16 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,671
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Yeah, it worked! biggrin.gif
I added a 'style' section to db_tests.php, then added the rule. I never even thought of your solution.


Thank you very much,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 6 2019, 05:20 AM
Post #7


.
********

Group: WDG Moderators
Posts: 8,224
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 6 2019, 07:34 AM) *

Charles, try to add the following to the CSS for db_tests.php . That ought to work.

CODE
body   { overflow: hidden }


MSIE used to display a default scrollbar track for all pages (not just iframes) that you had to remove, is that the cause here? But I never got it in my other browsers (and not MSIE11/Win10 either now). unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 6 2019, 11:33 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,671
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I always thought that <iframe>Text in here</iframe> was valid. It should show the text when <iframe> isn't available. HTML5 reports this as an error, says text not allowed. Has this changed?

This post has been edited by CharlesEF: Feb 6 2019, 11:34 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2019, 11:42 AM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,377
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Feb 6 2019, 11:20 AM) *

QUOTE(pandy @ Feb 6 2019, 07:34 AM) *

Charles, try to add the following to the CSS for db_tests.php . That ought to work.

CODE
body   { overflow: hidden }


MSIE used to display a default scrollbar track for all pages (not just iframes) that you had to remove, is that the cause here? But I never got it in my other browsers (and not MSIE11/Win10 either now). unsure.gif


Got it in all browsers I tried. FF, Iron, Edge and even K-Mel that's pretty dated now. I tried locally with just an three iframes in a page and loaded Charles' page in one and a long and a short local page in the others. It worked only if the page was small enough to fit, but then it would work without anything extra.

What's an even greater mystery is that today it works in all the browsers I mentioned. I get that Charles has modified his page, but I also have another really long local page in another iframe. I haven't changed a character in the test page. What's even more mysterious is that I don't get scrollbars even if I remove the CSS, i.e. just have the iframe tag with no attributes more than src. My Win10 is still majorly screwed up, but I don't understand how that could cause this. It can't be caching in all browsers. I added some text and it shows up.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2019, 12:19 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,377
Joined: 9-August 06
Member No.: 6



Ah! I had of course added overflow: hidden to BODY in the long test page. What can I say? I'm stupid. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2019, 12:45 PM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,377
Joined: 9-August 06
Member No.: 6



QUOTE(CharlesEF @ Feb 6 2019, 05:33 PM) *

I always thought that <iframe>Text in here</iframe> was valid. It should show the text when <iframe> isn't available. HTML5 reports this as an error, says text not allowed. Has this changed?


Yeah, seems content isn't allowed in HTML5. I tried reading the spec, but my head hurt too much. https://www.w3.org/TR/html5-diff/ doesn't say anything about it either. Found this though.
https://www.drupal.org/project/youtube/issues/2953495

Oh my. I used to love the spec. Not true for HTML5. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 6 2019, 12:49 PM
Post #12


.
********

Group: WDG Moderators
Posts: 8,224
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Feb 6 2019, 05:33 PM) *

I always thought that <iframe>Text in here</iframe> was valid. It should show the text when <iframe> isn't available. HTML5 reports this as an error, says text not allowed. Has this changed?

Can't say really, the parts I bolded seem to contradict each other:
"An <iframe> element never has fallback content, as it will always create a nested browsing context, regardless of whether the specified initial contents are successfully used.
[...]
Descendants of <iframe> elements represent nothing. (In legacy user agents that do not support <iframe> elements, the contents would be parsed as markup that could act as fallback content.)

When used in HTML documents, the allowed content model of <iframe> elements is text, except that invoking the HTML fragment parsing algorithm with the <iframe> element as the context element and the text contents as the input must result in a list of nodes that are all phrasing content, with no parse errors having occurred, with no script elements being anywhere in the list or as descendants of elements in the list, and with all the elements in the list (including their descendants) being themselves conforming.

The <iframe> element must be empty in XML documents."
https://www.w3.org/TR/html5/embedded-conten...-iframe-element

unsure.gif

I ranted a little about HTML5 iframes here: http://forums.htmlhelp.com/index.php?showtopic=19970 but I still don't understand what pandy is trying to say. tongue.gif


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2019, 01:18 PM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,377
Joined: 9-August 06
Member No.: 6



From the drupal page I linked to.

According to the HTML living standard, the content model here is "nothing", meaning it shouldn't contain text.

The spec itself is incomprehensible to me. cool.gif
I've said it before, the loss of DTDs was a bad move. I know there were reasons, but this convoluted blah blah kills me.

Or do you mean about the scroll bars? Your CSS still doesn't work for me. I thought it magically did because I had forgotten I had made overflow hidden on BODY in the framed page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 6 2019, 01:41 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 1,671
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Thanks to both of you. I guess I must be remembering the old spec. I agree, HTML5 screwed this up.

This post has been edited by CharlesEF: Feb 6 2019, 01:42 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 6 2019, 01:55 PM
Post #15


.
********

Group: WDG Moderators
Posts: 8,224
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 6 2019, 07:18 PM) *

Or do you mean about the scroll bars?

No I meant the old thread I linked to, but nevermind.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 6 2019, 02:40 PM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,377
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Feb 6 2019, 07:55 PM) *

QUOTE(pandy @ Feb 6 2019, 07:18 PM) *

Or do you mean about the scroll bars?

No I meant the old thread I linked to, but nevermind.


Oh. Afraid I don't remember that or what browsers did or did not in 2014. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 8 2019, 01:07 PM
Post #17


Programming Fanatic
********

Group: Members
Posts: 1,671
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



FYI, I ran across a situation where I needed the vertical scrollbar. The modal is for a ajax database test and sometimes the response fills 4 or 5 lines. When is happens the 'Close' button is pushed below the bottom of the container. To fix the problem I had to do this:
CODE
body
{
  height: 98%;
  overflow: auto;
  width: 100%;
}
This prevents the scrollbar on the login part and allows for a scrollbar on the results part. The only drawback is that now I get a horizontal scrollbar also. The reason for this is that the iframe container width is not wide enough to allow for a scrollbar. I can increase the width to not have the horizontal scrollbar but this leaves a blank area on the right side of the modal when no scrollbar is shown. I just left the width alone, since I already have a vertical scrollbar I don't mind the horizontal scrollbar.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 8 2019, 01:42 PM
Post #18


.
********

Group: WDG Moderators
Posts: 8,224
Joined: 10-August 06
Member No.: 7



I suppose you could use "overflow-y" to make sure only the vertical scrollbar is affected. As for the blank area, my head is spinning. :-p
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 8 2019, 04:01 PM
Post #19


Programming Fanatic
********

Group: Members
Posts: 1,671
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ Feb 8 2019, 12:42 PM) *
I suppose you could use "overflow-y" to make sure only the vertical scrollbar is affected. As for the blank area, my head is spinning. :-p

Yes, that works but it makes the response text look funny because part of the right side is hidden by the scrollbar. I'll just leave it as is. The user can decide if they want to do horizontal scrolling.


Thanks,

Charles

This post has been edited by CharlesEF: Feb 8 2019, 04:01 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd September 2019 - 10:01 PM