Overflow issue in CSS - javascript

i have an iframe on my page and seem to be facing somewhat common issue...
E
Actually there are 2 iframes ...
1. Header iframe which has table with some columns...
2. Content iframe which has table with column data..
Now the 2 iframe tables are aligned vertically...
The alignment works fine if the columns are less and there is no scrollbar in the 2nd iframe..
But if the columns increase, I get a horizontal scrollbar in "only" the content iframe and as i scroll it I have a sync JS which scrolls the top iframe as well..Now at the end bcoz of the scrollbars occupying space, the vertical alignment gets disturbed..
As this seems to be a typical issue, does anyone have asolution which would be really helpful. I am open to CSS/Js approach as well..Thank you..

you could adjust the height of the iframe if the scrollbars are present, just check the iframes scrollWidth against it's offsetWidth and if the scroll width is higher, increase the height of the iframe by the height of the scrollbar, prolly 5-10px, I'd have to check to be sure.
Something like:
$('#my_frame).ready(function(){
if(this.scrollWidth>this.offsetWidth){
$(this).css({height:'+=10'});
}
}

Related

Vertical scroll not being displayed when overflow:auto

Hi I have a problem with a vertical scroll not being displayed in a container with overflow:auto. the problem is that the height of the container is exactly the same than the height of the content, but the content width is larger, so the horizontal scroll appears, that fact should force the vertical scroll to appear too, but it does not. any ideas?
Here a codepen because an example is better than the words.
https://codepen.io/xmorelll/pen/yLbObdJ
I try this code on chrome and firefox browsers. The problem is that different browsers might have different implementations for this. In chrome(Version 91.0.4472.114, Linux), the container is 485px but in firefox, it is with a width of 500px. The vertical scroll is also visible in my firefox browser(Version 89, Linux). When I change a CSS property of the container class in chrome, it is showing the vertical scroll. Basically, the (overflow: auto) will show scroll when the content exceeds either parent's width or height.

Fixed elements scrolling in IE

We have this weird issue with fixed elements.
We have a site, where we display data in the table. Above the table, we have a fixed header and on the left side of the window, we have a sidebar. Now when sidebar is opened we move table 544 px to the right with tranformX.
Issue is present in next conditions. When width of the table is smaller then window width (no horizontal scrollbar) and then we open sidebar and move table right for 544px, and with that horizontal scrollbar is present now, which is ok. The problem is when we scroll vertically now, because it moves fixed elements up for 47px(height of scrollbars).
Does anyone have any clue, on how to fix this issue.

Allow height% with jQuery scrollbar

I am using the Malihu custom content scroller with automatic scrolling. So far, I basically am experimenting with it. I noticed when I take the height of the scrolling div and use a percentage instead of a fixed amount in px, it expands the div the entire height of the scroll area (off the screen).
I'm literally just taking the code from this GitHub location then opening the file "auto_scrolling_example.html".
Then in the <style> section of the header, I'm simply changing .content: height:500px to .content: height:50%.
Does anyone know why this doesn't work and/or have a good workaround for it?
When you specify the height or width as a percentage, that's a percentage with respect to the element's parent.
If the parent doesn't have any height or width inner children will not work in percentage.

Scroll two columns independently using the browsers scroll

I have 2 columns of content, the left content has some fixed content at the top with some text at the bottom, the right column is a big long list of text & small images. Currently when I vertically scroll the browser the content below the fixed content on the left scrolls with the content on the right.
What I want is, if the content on the left fits within the browse window, not to scroll, if it does have enough content, scroll with the right column, but stop before all the content hides behind the fixed content, but without stopping the right column from scrolling.
Not sure if this is even possible, can't recall having seen it done before.
Thanks,
Chuck
something like this?: http://jsfiddle.net/S3xda/
things to be careful of:
only tested in the latest FF and chrome
not tested with contents of different length
in that example, i'm using a fixed height wrapper, as i needed to attach the scroll() event to it but you could use window on your own page.
ZenMaster has the right idea. The other part of this I would do "overflow-y: auto" on the fixed div, this will make it have its own scroll bar if the content you have in it is higher than the browser window.
What else you can do is just absolutely position the stuff at the top, to top, left and then position the stuff at the bottom for bottom, left - And dont do anything more than a total of 500px high in that box and the content should never need to be scrolled, the bottom stuff will always be at the bottom of the window and likewise the top stuff will always be at the top, while your user can scroll the big section up and down with the other side staying constant and static on screen...
Well zenmaster removed his answer for some reason, I thought it was pretty good.
anyhow, you want the one column to either be position: fixed or you could do it with absolute positioning. Set the height to 100% (body must also be 100% and any other containers, you need the 100% height to bubble all the way to the "window" and not some container in between. Also if you do position absolute, remember that the container of the absolute element needs to be relative if you are giving positioning coordinates to the absolute element.
I would prefer a plugin like THIS in that way you get a scroll bar for each and not scrolling on both. GL & HF
And btw this works in all browsers ie7-9 ff,chrome,safari,opera and so on (even works on mobiles)
I had a same problem as you and finally I have found this jQuery plugin http://dhlavaty.github.io/jQuery-SmartColumnScroller/ . It has nice demo which shows exactly the solution. It moves all columns on scroll. However when a column content ends the column stops while other still go. TADA!

Adjust an iframes height so its the size of the viewport

my page has a div on the top of 100px height and an iframe beneath it. I want the iframe to fill teh rest of the page viewport i.e that the iframe's height should adjust as the browser window adjusts so we don't see two scroll bars - I just want that the scrollbar should be visible in the iframe and not in the browsers own viewport.
If I understand you correctly, you should wrap the iframe in a div for which you make a class in CSS that has overflow:scroll;, height:100%; and margin-top:100px;
The height makes you fill the whole page, the margin-top clears room for your top div and the overflow ensures you get scrollbars around your iframe. You might need to play a little with the height.
As far as I know it is not possible to actually change the iframe's height, since you import it from another page.
Hope I could help a bit.

Categories