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
Related
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?
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 have a rather complicated layout.
At the top and bottom are fixed header/footer.
The central display is broken up into two panels:
the left panel is hideable (may be visible, may not); if it is visible then it has a fixed width. It has a scroll within it if needed.
the right panel is always visible and has a variable width. It is scrolled by the window's scroll bar.
The right panel then consists of two parts that each fill the width of the panel - a set of tabs, of various heights (the visible tab should start at the top of the right panel, as the controlling buttons for those tabs are in the header), and directly below that a 'summary' box of unknown height, which comes immediately after the visible tab, no matter which tab we are looking at and how high it is.
Each of these panels/tabs/boxes consist of an outer div, and various internal divs as needed for the content.
The tabs are made by an outer div containing four inner divs, one after the other.
I can change the HTML and css as needed.
See https://jsfiddle.net/jvw8j62t/ (with thanks to JavaSpyder who provided the basic JSFiddle that I adapted for this demo)
I have tried various methods for the left and right panel, and the best one seems to be https://stackoverflow.com/a/4676510 but I would be happy to use a different method.
I then use jquery to hide/show the left panel (using display:none) and fix the right panel's left margin accordingly, though I am happy to use a different system for that.
However the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none. I cannot easily change this as there are three different libraries from three different sources having this issue.
This means that the different tabs' tops are then positioned incorrectly, because of the visibility css - they follow after each other, per https://stackoverflow.com/a/133064/1910690.
If I try different ways to make the top of the all the tabs fall at the top of the right panel then the summary box is positioned wrong and I can't align it to below the visible tab (changing position when you switch to a tab of a different height); or the right panel's scrolling is messed up; or the bottom of the tab disappears behind the footer; or one of several other problems.
Can anyone suggest a solution to the whole layout?
Is this the kind of thing you're looking for?
I used a flex container to create the left and right sections - the header and footer were easy enough with a fixed position. I used flex-shrink:0 on the left section so its width would be fixed, while leaving the right able to change to the screen width.
I'm not sure I did the tabs the way you specified, but feel free to correct if it isn't right. If you click on a tab, it will toggle visibility:hidden , but of course this leaves an empty gap. You said "the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none." Is this something we can also take a look at, or perhaps post in another question and link it here? If we could fix this problem, it could simplify this layout issue.
The left section is really another fixed position div with overflow:auto to give it the scrollbars. The height is handled by jquery.
Finally, clicking "Toggle Left Panel" will toggle the fixed position div and the width of the left section from 0 or 200.
With thanks to #JavaSpyder for his JSFiddle, and #Dhaval Chheda for the comment that inspired me...
I realised that I could use position:absolute on the tabs - NOT to position the visible tab correctly, but rather to REMOVE the invisible tabs from the layout of the page, leaving the visible tab and the summary ONLY in the layout of the page - and the result is as wanted.
See JavaSpyder's https://jsfiddle.net/JavaSpyder/fq43Lhez/ which also fixes an issue with the width of the right panel (my original solution is at https://jsfiddle.net/jvw8j62t/ ).
Again, thanks to JavaSpyder and Dhaval Chheda - could not have done it without you.
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.
The following is the script I am using:
http://www.webdeveloper.com/forum/archive/index.php/t-152085.html
How can you have a container around a multiple step webform without the height/absolute positioning screwing stuff up?
Some of the steps I have have are different heights, and also with absolute positioning you can't have a wrapper with a background color.
My problem is the height is crazy because div's are being hidden but the height is still taken
Any alternative with the same script that allows a wrapper bg color and a height that alternates, instead of flooding the scrollbar?
EDIT: Here is a live example (notice the scrollbar issue?)
http://fastfolio.com/div-test/test.html
if the steps are different heights, the scrolling hurts. maybe some kind of #top fix or something? how do you get it to read the height and adjust accordingly?
Check jQuery as this will make handling the scroll easier.
In your example HTML page, replace the onclick with a function that checks current height of the div ( $(this).parent().parent().height() ) and the scroll position of the body ( $(body).scrollTop() ).
If the height is smaller than scrolTop then use the scrollTop to move the body up.
jQuery will take you 30 minutes to get your head around, but it's well worth it and wil solve a lot of queries like this.
You should not be using visibility to toggle the element shown but rather the CSS style of "display" (between "block" and "none" will do what you're after).
The pagination should also not rely on IDs - far better for you to use an array, and a "current state" holder. The "next" submit entity for should
http://consulting.euphemize.net/jack.shepherd/pagination-form/
Better options held in here :)