My page has a fixed 50px tall top navigation bar. It also has a table that currently scrolls up behind the navigation bar. I would like to pin the header below the nav bar when it touches it while scrolling up, so it is always in view.
I'm interested in guidance on the following:
1) In general, What is the best way to achieve this in React?
2) My current approach uses jquery to read positions and sizes of certain DOM elements. Is this considered an anti pattern in React? More specifically, this is what I'm attempting to do currently:
I fix the position of the table header row when the table scrolls to a certain position. This approach is not very pretty - as it requires me to assign a width to each column header element when I fix position the header row, otherwise the header width doesn't match the table width. I also need to listen for window resize events and update the header widths appropriately when the page is resized.
Related
I have a mat-dialog which contains a mat-stepper. Inside this stepper, I have a step which contains a form. In this form I have multiple elements (list, mat-card and table) which I want to always fill the height of the dialog. Basically, I want the height of the table and also the height of the list on the left side of the table to adjust to the dialog height. The mat-card, which is shown when selecting an item in the list, should always be at the bottom left of the dialog and the list above it should either show all elements (if possible) or display a scroll bar if there is not enough space left to show all elements. The table should also either show all elements if there is enough space or display a scroll bar if there isn't enough space. I do not want any of the elements in this dialog to cause an overflow which would require me to scroll in the actual dialog.
A colleague attempted to solve this by using max-height: calc(90vh - <x>px) before but this really does not work very well at all. How can I do this properly?
Here is a stackblitz which shows the problem:
Stackblitz
Hopefully, my question is clear. If not, please let me know and I will try my best to explain it in more detail.
Your problem is quite simple, the content of the dialog does not fit the height of your dialog.
Every child of the dialog mat-dialog-content, mat-stepper etc, should be maximizing their height (either with height:100% or flex:1 in a flex container).
Here is a quick example of this.
In this sandbox I have a two-column grid, that I want to make only the right column scrollable. This means the left column/menu should not go out of the screen by scrolling on the browser.
by giving position: fixed to the left column and marginLeft:somePixels to the right column it somehow works but if the content stacks on the smaller resolution, the layout gets destroyed.
How can I achieve this with semantic css classes or a custom style
You need to add to every element, from root to the container you want to scroll, the height: 100%.
Because it need to know what is the full dimension you need to scroll.
This is the sandbox fixed.
I'm using Angular UI Grid in a project. The grid sizes itself so that all the columns fit horizontally in a div.
This works great, until there are more rows than fit on one screen. Then, a vertical scroll bar comes up (good), which covers part of the last column (bad). Horizontal scroll bars can be enabled to reach those last 20 or so px, but when you scroll horizontally, the header cells don't scroll. This throws everything out of alignment.
Since the grid was perfectly sized before the scroll bar, there should not be a need for the horizontal scroll bar. But the way the scroll bar covers the content means that without it, you can't see anything that might be in the right 20 or so px.
I need to fix this. Here are some solutions I have looked into implementing, unsuccessfully:
Find some way to know if there is a vertical scroll bar and add padding or margin somewhere to push in the content of both the header cell and the data cell, to keep things in alignment. I haven't found an easy way to grab the container who may or may not have a scroll bar and then I think the logic to ask it if it has a scroll bar would be brittle. Plus, just playing around with adding padding where I think it should go did not effectively push over the content.
Find a way to let the container with the scroll bar push outside of the grid when it has a scroll bar. This has basically the same issue as #1 in that that guy is pretty slippery.
Find a way to replace the scroll bar with my own. It seems that there is someone who did a branch that lets you do this with a specific library, but we are tied to a specific commit of UI Grid and adding libraries takes an act of congress.
Thoughts?
How you can know if there is a vertical scrollbar :
If you haven't customized the rows with a rowTemplate, then you might be having a rowHeight of 30px (if not please inspect).
var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;
if (dataRowHeight > gridElementHeight) {
// you have a verticalscrollbar
}
Safe side : specify width for all columns by % and leave 1% behind for the scrollbar.
Ugly side : Get the width of the 'viewport', loop through and calculate the actual pixels from your provided percentage for all columns, if you detect a vertical scrollbar using the technique above, leave 15px behind.
I use VS2010, C#, ASP.NET; I read some data from SQL server and fill my DIV, I don't want to give this DIV a fixed height or scroll bar, rather I want it to have its height automatically set to maximum data, what should I do? how should I set my styles?
also I have another horizontal DIV that should be displayed at the bottom of page, how can I set it so that it is always fixed to bottom of page (not bottom of screen)?
a good example is the Related questions column in this site! and the gray horizontal DIV at the bottom of page
thanks
The default behavior of divs is to contain all their data. If they are not, then you are overriding that behavior somewhere, either by setting an explicit height, or by having content items that are taken out of the normal flow (floats or absolutely positioned items).
How do I create a scroll in GridView using ASP.NET without using fixed sized div's around it like shown here http://www.aspnettutorials.com/tutorials/controls/gridviewscroll-aspnet2-csharp.aspx .
You can set the div's width or height to a percentage as well, and with overflow:auto, the div contents will scroll if the browser is sized to less than the content.
Without any size settings, your div will simply expand to hold all content, so a percentage, fixed, or inherited size in at least one dimension is required for scrolling to ever occur.
In order to get a scroll bar, you need a fixed height container with overflow set to scroll.
Whether you do it with the grid's properties, like in the example you linked, or by just wrapping it in a Panel with a height and overflow set on it, it doesn't matter much. The key thing is just to get it inside a fixed height container. How you want the UI to look (where the scrollbar is, etc.) will dictate where you create the div.