I have a DIV on my webpage which is a set width, say 1300px wide. Inside this I have a HTML table which has a width that sometimes exceeds that of the parent DIV. It depends how long some of the data in each column is.
Easy answer is overflow-x: auto or scroll.
The issue is; the scroll bar is at the bottom of the DIV and if my table is 50+ rows tall it's a bad user experience as users may not notice columns are hidden and there's a scrollbar at the bottom of the page.
I've spent some considerable time on google. I can't find anything.
Is there a way of loading a semi transparent bar (DIV) or custom scroll bar that to somehow overlay my table to users can move it and scroll left to right and view all of the table data?
Thinking either JS or CSS most likely both.
Related
Before i start, I wanted to let you know that I have been searching high and low for a solution to my issue but the closest thread I've found is unfortunately without the answer to the actual problem - Position absolute inside div with overflow-x scroll and overflow-y visible
Essentially I got main page where I am dynamically loading some other pages and on some of them I used dropdown listboxes. It happened that I haven't noticed it earlier as content any of the pages wasn't wide enough for me to spot the problem.
The problem I face is absolutely positioned div (which contain dropdown) and visible horizontal scroll bar on the parent of this div. When I scroll my page horizontally the dropdown div stays in the same place on the screen. I read about "popping out" absolute divs under this link:https://css-tricks.com/popping-hidden-overflow/ but even there, I can observe similar issue I am currently facing, which is appearing of the vertical scroll on the parent element. I am trying to achieve similar effect like here:
http://jsfiddle.net/matcygan/4rbvewn8/7/ but stop vertical scroll bar to appear when the listbox is expanded - instead it should overflow the box and party cover horizontal scroll bar. Here I've found another prompt example how can I achieve it http://jsfiddle.net/b5fYH/ but when i try to play with it and make red boxes scrollable with content as well as overflowing outside of the content vertically, without creating vertical scrollbar, I am failing... I am also fine with using JS if CSS on it's own can't deliver such effect.
In the end after 3 days battle, the CSS won and I need to ask for a help...
Any support will be greatly appreciated.
Thanks in advance.
I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.
I don't have any experience in web development and I am trying to build a UI Grid to display a large number of data points.
I am trying to create a scrollbar to be able to scroll all data points (let's say for arguments sake that it's 1,000,000) and should be able to scroll horizontally across all data points. It should only load a 20x20 data points and lazy load the next page when the scrollbar is moved appropriately.
I've managed to get the horizontal scrollbar to show on the screen but now I am trying to get it scroll. I am using fattable (https://github.com/fulmicoton/fattable) as my inspiration.
http://jsdo.it/jpez/Q7g0
How can I get my horizontal scrollbar to actually scroll when you click mouse on it and move it? It doesn't move at all.
Your element stacking order is not correct. Add z-index: 1 to your scrollbar or move .signal-viewport before your scrollbars like this:
<div class="signal-viewport">...</div>
<div class="signal-h-scrollbar">...</div>
<div class="signal-v-scrollbar">...</div>
More info about the z-index
I have a div with fixed width and height, overflow: scroll and position: relative. Inside I have two table elements, first one containing 10 columns, and the second one which is a copy of the first table and has its first 3 columns only. I gave position:absolute to the second table and given that both tables have save styling the second table will overlap the first one. My requirement is when the div is scrolled horizontally, I want the second table which is overlapping the first one to be fixed, i.e, it should not move on horizontal scroll, and on vertical scroll the content of second table should be scrolled properly.
I have created the following fiddle with what I have so far:
JS Fiddle
I don't think that's possible with css. What you are asking is for the left hand table to scroll vertically with it's container div, but not to scroll horizontally.
I'd have a re-think on your requirements here.
You could just put the right hand table inside a div with overflow:scroll, so only that one moves when you scroll horizontally. You'd have the issue then of the two no longer being lined up when you scroll vertically - could you make it high enough so so the whole table displays? Would that work for you?
EDIT:
In your js-fiddle then you've set height:500px; for .container.
If you don't need that, then remove it so things will set their own height and display the whole table. Then you only have the sideways scroll to deal with, and that's doable (e.g. put a wrapper on the right hand table only that has overflow:scroll)
No I'd not use position:fixed here, that sets something relative to the browser window, which is no good for users scrolling up and down.
have a look at this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
that's great to get your head around css positioning.
I have a div whose height is 500px. When I scroll the page down, I would like the div to move as the page scrolls, but I would like it to stop scrolling with the page after the 250px of the div are out of the view. The rest of the page should keep scrolling but the div should act as fixed after it is 250px visible on the page.
Additionally, when I scroll up, I would like the div to remain at 250px invisible until the user has scrolled all the way to the top (with the final 250px remaining) in which case the div should suddenly become a part of the page again and scroll with it.
I am assuming that this can be done only with JavaScript, but how?
OK, using the keywords suggested by Mike Brant up in the comments, my Google search produced some good results. It appears that the functionality I was after is called sticky div, or sticky menu, sticky footer, or likewise.
By looking at the code of those javascripts I was able to understand the concept behind it. Now, it's time to play with it and adjust to my particular needs.