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
Related
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.
I would like to implement a split "viewport" and i'm wondering if it is possible in javascript/css/html.
What I mean is, a scroll area that scrolls similar to a book, where the content that overflows vertically on the left half is shown in continuation on the right. Similar to CSS columns but for a scroll area.
I've played with the idea quite a bit, and the only solution I can think of is to essentially duplicate the content in the left pane in the right pane, synchronize the scroll event, and offset the right area by the element height.
Here is a basic example I made:
https://amazing-thompson-651a40.netlify.app/
However, I'm wondering if there is a solution that doesn't require duplicating the DOM structure of the left pane onto the right. For example is it possible to access the view port/rendering engine directly and show what is "actually" overflowing the scrollarea, and offset it on the page?
I am using full calendar io plugin for my scheduling tool.
I have fixed the header but I can't make the first column as sticky as it has time and I need to make it stay fixed when I scroll towards right end (due to many Names).
click here Normal picture without scroll
click here second picture little scrolled to right
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.
The website I am building requires to have grid of images where one image is in the middle no matter how many images there are in the grid. This is in fluid layout and images are supposed to be editable by website admin and only height is fixed.
Image explanation:
I was thinking to use something as Masonry or Packery but those don't provide any centred layout options. What approach would you take to sort this out?
To approach this problem, I would have each row of images be inside of a container. Then you could absolutely position the container based upon calculations to center the "stamp."