This problem has surfaced in the past (e.g. Sticky header of p-table not working with [scrollable] = true in Primeng.?) though as the comment to the comment suggests, I too have experienced that previously shared solutions don't work
When we pass [scrollable]="true" primeng applies certain styles, from what I've seen, overflow auto is applied to p-datatable-wrapper thus binding the vertical sticky stylings to that overflow, instead of having horizontal scroll on the tbody and thead and keeping vertical scroll on page so sticky headers would be bound to the page's scroll. Quite tricky...
Here is a quick example, it's a ready playground to test both scenarios https://stackblitz.com/edit/primeng-tablescroll-demo-qm2ndu?file=src/app/app.component.ts
I've tried the obvious things like moving the overflows around but nothing has worked. At this point I don't really have an idea for a solution that's not hard coding a lot of logic to force calculations for constantly setting the top attribute of the headers when we scroll on the page to fake having sticky headers, since they don't work.
I'd love to see primeng update this somehow and provide an easy way to implement the desired behavior.
I've created an issue # https://github.com/primefaces/primeng/issues/11099
Related
This behavior is somewhat confusing to me, so I would appreciate some external help to understand what is happening.
I have prepared a fiddle to illustrate the behaviour http://jsfiddle.net/cseignc/mfoejqum/
I have an html table whose header is maintained fixed by absolute-positioning a second header via some CSS.
The table is generated thanks to the ng-repeat directive that loops through the array of columns and rows.
In order to provide horizontal scrolling, while maintaining the first column and the header fixed, I am filtering the array of columns to ng-repeat on by using the startFrom and LimitTo filters.
I am providing navigation buttons (left and right chevrons) to allow the user to scroll horizontally through the table. Those buttons increment/decrement the value passed to the startFrom filter.
This is working as expected for the table body but the second header fails to render properly. I am even finding it impossible to detect consistency in how the second header is rendering - or not.
I initially thought this was to do with $scope.$apply() not being called for, but all my code is within AngularJs, so I do not believe that there is a need for calling it...Correct me please if I am wrong.
I have found that resizing the screen will cause the header to render properly.
Any insight on this will be greatly appreciated.
Thanks !
EDIT:
The above issues appears to be Chrome specific. I have tested the behaviour in IE and Firefox and the header is rendering correctly in those browsers.
I made some changes to your fiddle that should give you a bit of a start in achieving exactly what you want:
http://jsfiddle.net/a06uvkr3/
The gist is that I:
1) initialized $scope.skip to 0 in the controller
2) Ditched the ng-repeat filters and used ng-show with some logic based on $index
3) tweaked the CSS so that the header's .tr-inner container is absolute rather than the things inside it and gave the header a fixed height. Also tweaked a bit of padding to account for the header items being thrown out a little
Obviously I can't verify that it fits your exact use cases, but you can see the result is much more promising.
I am looking for a good angular directive, that would handle sticky elements and append a compact class to it once they are out of the view...
so imagine a header element on a website, that has a normal height of 200px;... but when you start scrolling down, you would FIRST make the heater sticky (position fixed - top: 0) but when you scroll down for more than 200 px (I guess) you would append a "compact" class to it, so you would than see a compacted version of the header on top - lets say 70px;. This is quite established behaviour with modern [responsive] websites.
Which is fine and easy enough. The problem is when you want to stack more elements on top...
So to better explain myself... you would have the mentioned header with mentioned behavior... but further down on the page you would have a table, with it's theader row... and you would like to stack that on top, but after the header... and only when you scroll pass it...and also with "COMPACT" behavior (but not necessarily)
and imagine you would have some navigation even further down (tabs for example)... and you would like to stuck them on top as well, but only after the header and table...
so the directive would need to calculate the fixed top position depending on the elements already stuck there and if they are a compact version of themselves or not...
plus it should consider also the (css) animation bit (lets say you would put a transition animation on height of the element... so the transition of full to compact is smooth)
Anything similar out there already? I don't think this is something new in terms of expected behavior...so there must be some solutions out there already.
anyone?
I know this is an older topic, but I think I've a proper solution.
I'm the creator of Angular Sticky and already have this feature implemented.
You can view the demo displaying with most of what you're asking right here. The "collections" demo has more header like behavior though.
There is however some smart CSS that needs to be done to make the compacting happen, but I think it should be possible with the current functionalities of the plugin. I might need to look into this too anyway as I can imagine it can be a popular request.
ng-sticky could do with a little mod.
It has a body sticky class so you can change the behavior of the whole page after an element became sticky.
UPD1
As I stated before a little update of ngSticky would do the trick.
So I decided to do such changes
Here is my fork of ngsticky on Github
It is still very WIP and I'm planning to contribute it to the main ngSticky project when done.
But before that( and continuing my work on it) I wanted to check with you if this is the behavior you are expecting.
Any response will be helpful.
I am seeking help with trying to fix my background image fill issue. I wanted to have a sticky footer, which I finally figured out, but now if I view my site in a smaller window and then scroll down, my background image disappears. I understand that this is due to my height settings being 100% which makes my image be based off of the initial viewport size, but I can't quite seem to implement any kind of fix.
Here is the site I am working on (still very much under development): http://student.plattsburgh.edu/stipl001/index.html.
The problem is best viewed when looking at this page in a small window: http://student.plattsburgh.edu/stipl001/resume.html.
I have read many, many posts on various sites trying to figure it out (including this one: CSS: background image does not fill when scrolling), but I am not having any luck. I tried setting all the different properties for background in css that I could think of, including some of the newer ones. Then I experimented with the overflow property, but it just hides all of my text or creates a weird scroll-bar that makes my text scroll up over the header. I also tried moving my page background from body to html and my container background from container to body, but it didn't change anything, so I must be doing something wrong (perhaps the fact that I have the two background images to deal with?).
I'm just a coding newbie and have been teaching myself as I go along, so I would really appreciate specific suggestions on what method of fixing this would be best for my site, and how I can go about implementing it. After spending about 10 hours straight on this one problem, I am at my wits' end.
Thank you so much!
just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...
EDIT:
previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer.
This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.
See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.
Hope it helps...
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.
overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.
Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.
However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
overflow-y: scroll;
overflow-x: hidden;
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.
So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).
Below you can see the layout I'm trying to achieve;
alt text http://dl.dropbox.com/u/2199846/layout.png
As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.
- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)
- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.
I'm at the end of my possibility's here, and tried changing to a full table layout, but that had the problem of always expanding when content got too much...
If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!
EDIT:
What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.
Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)
http://jsfiddle.net/YGgTx/1/
this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.