My page has a fixed header, a fixed right sidebar, and an HTML table with each column having a set width (so that the table stays left of the sidebar). The table scrolls vertically, while the rest of the page remains fixed.
Each row has an expand button, which shows another row under it, with a bunch of images. This row may get very long, so the overflow needs to be hidden behind the side bar (already doing that). However, since I changed to the fixed sidebar paradigm, I am unable to scroll the row to the right without moving the whole table with it.
I will try to create a JSFiddle, but my app is an Ember/Bootstrap app, so may take a while to reconstruct in JSFiddle format. If you know the answer off-hand, please let me know.
Related
I have a normal prime Ng table which is scrollable vertically. However, if the screen size is too small, I end up with the normal page scroll aswell as the table scroll.
Is there a way around this? To make the table the size of whatever the screen is, with an infinite scroll. So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?
So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?
Explanation
By default p-table stretches downwards infinitely, unless you limit it's height, in which case it will have a vertical scroll if there's more data than can fit within the height you set.
Moreover, if all your elements together on the page (including the table), don't fit the current view, page will also get it's own scroll.
E.g. I have a menu on top of the page, under it a card with other things, then a table toolbar, then the table, that's a lot of elements and they won't fit within the view, so page will get it's own scroll. Meanwhile your table has scrollHeight of 600px, yet you have data for 900px, it will get it's own scroll too. Boom 2 scrolls.
Fix You can fix it in a few different ways but it all comes down to the desired behavior/look of your page... when I had this prob I just removed height restrictions and let table expand downwards infinitely, it wasn't a problem because: 1- table was the last element of the page from top to bottom; 2- I had paginator to limit size regardless. So I ended up with only the page scroll.
I will try to explain my problem in a way that is as clear as possible.
We are using a ERP that is web-based and when you access a Sale Order document you get to see a form view with a status bar in the top (which shows the current status of the document and also some buttons to perform some actions) and a table with the sale order lines within the document.
The problem is that some quotations are too big and the header of the table gets lost when scrolling down. I'm facing a lot of trouble try to get the header of a table stuck at the top using CSS only.
Here's a snippet of the source code:
If I set the header position to sticky and scroll down, what I get is this:
As you can see, it is underneath the statusbar. I'd like it to stick to it. But I don't see how would I define a div that goes from the bottom of the status bar to the end of the view so the header sticks in there.
I know I can set the "top" property of the header to the exact height of the status bar but this one can change if there's a lot of content on it, that's it, it's a dynamic height.
Here's the div structure:
I can provide a html file if needed.
Thank you in advance for any help!
I am working on building sticky sidebar behavior that will run alongside a vertical feed which is very similar to a facebook feed on desktop web. position: sticky works well for the easy use case where the sidebar is shorter than the height of the viewport. However if your sidebar is larger than the viewport the sidebar needs to have some scrolling mechanism so you can see the bottom of the sidebar as you scroll down the feed.
I am trying to recreate the facebook sidebar sticky scroll here.
The best way to understand the desired behavior is to test out your facebook feed and shrink your screen height so that your viewport is smaller than your sidebar height. I'll try to summarize here:
When your viewport is taller than your sidebar (simple case)
The sidebar behaves exactly as you'd expect with position: sticky. The sidebar stays in the same place and follows as you scroll down and up.
When your viewport is smaller than your sidebar
When you scroll down initially the sidebar scrolls with the feed (they appear fixed together)
When you get to the bottom of your sidebar, it then locks at the bottom and as you scroll down more, the sidebar now appears sticky with the bottom fixed
When you now scroll back up, the sidebar once again appears attached to your main feed, and scrolls up with the main feed. Once you hit the top of the sidebar it's then sticky with the top fixed.
So between those two states (top fixed when scrolling up, bottom fixed when scrolling down), the sidebar scrolls in unison with the main feed.
It's a very nice scrolling experience but very hard to recreate.
I have accomplished the states listed in steps 1-3 above by applying position sticky with a top position, and when you scroll down, using scroll events and some viewport/sidebar height calculations to determine the height difference and adjusting the top css value so it locks when the bottom is lined up with the screen (essentially initialTop - (sidebarHeight - viewportHeight). I cannot figure out steps 4, and 5. The best I could do was transition between the two top values depending on your scroll direction but it's a very bad UX.
I have a sandbox example of a layout here: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
There's a basic layout with 2 columns (left sidebar and main feed). And there's a react component called StickyScroll which wraps around the column and has all the logic to update the top value. This may be a completely wrong start to a good solution, but any help is greatly appreciated.
I was interested in this as well, so I spent some time studying how fb does it.
It's very clever, my hat off to whichever fb dev originally implemented this.
You have to set the top / bottom css properties on the sticky depending on the direction of scroll, and to keep things from jumping around, you also have to calculate the height of an the element above the sticky, based on scrollTop.
Here is a rough example, which demonstrates the logic in action
I try to make a mock up by your sandbox code based on facebook redesign 2020.
hope you find the answer here. I like this approach because it's not very complex. More precisely, I use the css solution when I have to create a component similar to the Facebook sidebar.So i'm not using your StickyScroll component. Hope you find something.
Codesandbox Independent Scroll
Goal
I am trying to implement a layout that works as follows:
Page content is responsive and adjusts to window width
If the page contains a large data table, the table will overflow to the right
In this case, a scroll bar on the window (not on the table) will be shown
If the user now scrolls to the right, only the table scrolls, not the rest of the page
Sidebar, header, footer (all with fixed height/width) should be present
Example
Here is a jsbin with a very hacky implementation, that should illustrate what I mean: http://jsbin.com/gonezaqala/1/edit?html,css,js,output
Issues
Frequent problems that I ran into:
I figured that I need to use position: sticky to make this layout work but since elements are only ever sticky relative to their parent, I need to try to keep the sticky elements at a top level
Alternatively, I can create a separate container that does the horizontal scrolling (like in the jsbin example), but then trying to make this fit with the other parts of the layout (sidebar, footer) because really painful
I also want to implement this in a way that all the elements in the main content area (so everything but header, footer, sidebar) are together in one single container, since I am using AngularJS and this is where my router would inject the view
Question
I am sure, I have seen this kind of behaviour before, but I can't remember where it was. So my questions are as follows:
Is this a somewhat common UI pattern? Does it have a name?
Is it possible to implement a layout like this with only CSS?
Would it anyway be desirable to create such a layout or are there any concerns from a UX perspective?
I am using reporting services 2012 and want to display a group of elements at the bottom of the last page.
I have tried putting this in the footer and hiding the elements for all but the last page, however this doesn't work very well as there is a large blank space at the bottom of all of the preceding pages.
If there was a way of aligning the elements to the bottom of a page that would work, but I cant see any way of doing that. If there was a way to push the elements to the bottom of the page using a rectangle that has a dynamic height, that would also work, but I also cannot find a way of doing that.
Any suggestions?
Unfortunately, page headers and footers must be one constant size in SSRS. That is why you are getting all of that whitespace, and as far as I know, there is no workaround for this.
However, what you can do is page break at the end of your main table / report. Then have another table display the elements you want. Make this second table the height of a full page and put the elements at the bottom. Go into the Tablix Properties and check "Keep together on one page if possible".
If the second table doesn't work, try a subreport.
If you want to have the footer on the same page as the last page of data, this doesn't work. The only way I know of to do that is a major hack: check how many rows come back from the database and calculate how much space they will need to display. Then at the end calculate how big of a rectangle you need to make in between your main table and your second table to push it to the bottom of the page.