My goal is to display my details list with Sticky Headers on scroll, and I've run into issues with every solution I've found.
The recommended solution of a ScrollablePane wrapping the list, and onRenderDetailsHeader with Sticky components (https://github.com/microsoft/fluentui/issues/1146) places the list on an absolute position on the UI.
The recommended solution of styling on FluentUI's site (https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane) requires a specified height to be provided.
Both of these solutions require set positioning for the list whether in height or margin in order to work as expected. But, I also need to account for error message bars that may appear above the table and ensure they are not covered, or a double scroll bar appears. Anyone have a seamless example they've used?
There is no good way to do this with FluentUI. The recommended solution of a ScrollablePane wrapping the list, and onRenderDetailsHeader with Sticky components (https://github.com/microsoft/fluentui/issues/1146) places the list on an absolute position on the UI. The recommended solution of styling on FluentUI's site (https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane) requires a specified height to be provided. Both of these solutions require set positioning for the list whether in height or margin in order to work as expected. But, I also need to account for error message bars that may appear above the table and ensure they are not covered, or a double scroll bar appears. Anyone have a seamless example they've used?
Related
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?
CSS - Floating two elements side by side
This conversation is similar to what I am trying to achieve. I have a % based layout and have an issue either the menu will get mixed in with the content or the content will fall below the menu when the page is shrunk or viewed on a mobile phone. I've spent several hours on this and cant figure out what I am doing incorrectly.
Problem child: https://www.tendercare-inc.com/new/
Update:
My biggest thing was getting something that worked well with Word Press as it uses very awkward controls and element names. I tried starting with _Underscores but it doesn't seem to have helped as much as I thought it would.
The basic problem is that you are specifying percentage based layouts for some elements like menu-sidebar and main-content but you're not consistent. The menu has a min-width of 200px. What do you want to happen when 200px is greater than 15%? Inside the menu you also have elements specified with exact pixel widths — the various cssmenu maker elements.
The site is very simple — basically a header, footer, side menu, and body. Yet you have two style sheets - one with over 800 lines — and a structure with site-content containing content-area containing site-main containing content-container. It's no wonder it's causing you grief. My advice would be to start over with a simple css framework (like bootstrap mentioned by #jaun above. Keep the structure of the html as simple as possible and avoid copy-paste design with things like menus. Also rather than trying things a seeing what's wrong, describe the behavior you want at various screen sizes and make it happen.
You should use bootstrap (getbootstrap.com) you can use col-md-6 clases to do that. Also mobile phone and tablet ajustment is supported
I'm using jquery mobile for a project which has a list-view and list-divider in it. I would like to make it so the list dividers stop scrolling when they get to the top of the page, and then keep scrolling again when another list divider bumps into it. For an example of what I mean, check out the iphone "contact's" app. Each letter (which is a list divider) stays at the top of the screen while you are still scrolling through contacts within that letter.
I've tried fixing the position but that obviously is not quite what I want. Is there a way to fix it only when it is at the top of the page? and then "un-fix" it as soon as a different list divider comes up below it?
The jQuery ScrollToFixed plugin is exactly what you are looking for. The examples will show you how to use the plugin.
Based on your description, I would say that the easiest way to accomplish this is to give each list divider a z-index greater than the one it overrides. That way you do not have to deal with minimum and maximum offsets, instead the overriding element will simply be layered on top of the previous one.
I was trying to customize a theme for a CMS(ocPortal/vanilla) where I wanted the sidebar to be fixed along with the header. Making it fixed it not a tough job, but the problem is that the end user can add widgets to the sidebar which can run out of screen height. And then the fixed attribute would become useless.
Is there a solution to this problem as I have not been able to come around with anything.
There are multiple solutions to this problem, seeing you have not given an example, I will assume these widgets can be added and removed dynamically (meaning at anytime after page load). Assuming this, I have two possible solutions that you can try.
Solution 1 :
Try making each widget inside a tabbed/spoiler type container, so they become small when the end user does not need them at that point in time
Solution 2 :
As Rick Calder mentioned, you can also use the CSS rule overflow-y: scroll; so when the contents of your sidebar becomes larger than the height, a scroll-bar appears allowing the user to scroll through your widgets.
You may also combine these solutions together, to enable a LOT of widgets, dependent on what your personal preference is.
I hope this helps!
NOTE :
A simple search for html javascript spoilers will give you MANY examples of spoilers.
I am extending a scheduling app that displays multiple Fullcalendars in agendaDayView to show the day's schedule for multiple people. Having each Fullcalendar use its own scrollbar has been rejected; accordingly, all the calendars are displayed full-length, with a single scrollbar set in the surrounding div.
The problem now is to have the headers stay fixed during vertical scrolling. There are other requirements for extended header functionality (additional data, icons, links, etc.), so it made more sense to me to make my own headers above each Fullcalendar div.
Using CSS and placing the divs correctly, I was able to get the calendars to vertically scroll separately from the headers, thus achieving a 'fixed header' effect. The problem was then horizontal scrolling: if I made the divs extend outward horizontally, then the vertical scrollbar for the div containing the calendars was all the way to the right, outside of visibility.
I have also tried plugins for fixed headers by setting using a with arbitrary text for the headers and then putting the Fullcalendar divs inside elements in a single row. These all failed in different ways (hiding the calendars, reprinting the headers, other ways).
Here is the base setup: http://jsfiddle.net/jzqJC/. I am looking for some direction in how to have the main content area have (1) both vertical and horizontal scrollbars as necessary, (2) keep the column headers fixed when vertical scrolling, and (3) synchronize the horizontal scrolling of the column headers and calendars underneath them. I have spent several days tinkering and trying things based on stackoverflow and google searches, but I am at a loss and need help. Please advise.
[Side question: how can I link to fullcalendar.min.js in a fiddle? Do I need a public URL for the file and add it as a resource? If so, what's the best way to put out that file in a public URL?]
Thanks,
J
I created this Fiddle, take a look if it is what you are looking for: http://jsfiddle.net/7NgUB/
I changed .headerItem,.calendarItem display to inline and #headerRow,#calendarRow position to absolute in the CSS.
Then everything is done with jquery:
Asign #headerRow,#calendarRow width the total width of its children,
Set #calendarRow top position to appear below #headerRow,
Change #headerRow top position each time #content is scrolled