Is it possible to keep the first two columns fixed in a grid and scroll from the third column (horizontal) and keep all the headers fixed when scrolling vertical.
I'm trying to use DevExpress to do that. Do you have any ideas because I saw some different documentation, but it does not describe what I need.
https://documentation.devexpress.com/WPF/6302/Controls-and-Libraries/Data-Grid/Views/Table-View/Fixed-Columns-and-Bands
https://demos.devexpress.com/ASPxGridViewDemos/PagingAndScrolling/Scrolling.aspx
Related
I have the following sandbox. It has three columns. The first two are auto widths (and will be menus) and the third is using a React Splitter component.
This third column will eventually contain a grid at the top and bottom.
I need the third column to be scrollable horizontally, NOT the entire window.
So if you imagine a table full of columns, the column itself should scroll to the right but not the window. It must work with the splitter.
I have tried creating a parent with overflowx-auto and white space : nowrap but it breaks Bootstrap with margins etc.
Is anyone able to help please?
Here is the sandbox
I am new on this forum, hopefully someone can help me out.
I am trying to create a page with three independent columns. Each column will have its own divs of different heights. See this image - 3 columns
I achieved this layout using separate divs for each column and then divs for each window, then I tried to make the layout wrap when I make the screen smaller into two then three columns but this is where I got stuck. I want it to prioritise the top divs when the window gets smaller, see this image - 2 columns. Wrapping is of course made very simple with flex and grid but these two don't allow me to create different height divs in each column, it's always based on even horizontal lines, or if I use flex in column direction it messes up the order of windows when it wraps.
I am very particular about the order being as per the image, because I will need to keep adding content to the page and most recent content will need to always be at the top.
Maybe there is a way to add order to each div in flex which reaches beyond its container? Or can someone suggest another way to do it?
Hope this is clear enough...
Thanks
I've been provided the following layout (see link) but I'm not 100% certain which approach I should take for layout. I've spent 6 hours playing around with grid and flexbox but I keep thinking "This bit should be grid not flexbox and this bit should be flexbox not grid" and I've been going back and fore. Its a bit confusing so I was looking for some advice.
In the screenshot which will need to be clicked through to, to see. The grey portions of the UI are always present, the main nav column can expand and push whats to the right of it over. As shown it will be an icon based menu and when expanded will show the icon labels.
For this reason at a high level the the logo and main nav are one column and everything to the right is another column. Hence I display grid on this. The "rows" inside the first column are two flex item elements where the parent has display: flex, flex-direction: column on it. The first item just has a min-height with the "second" item having a flex 1 on it to fill the remaining height of the container which is equal to the viewport height. This then creates the visual of a row. I follow a similar pattern in the second column but the second "row" is it's self a flex wrapper for the "rows" it contains such as the orange ,blue sections.
The orange and blue bars wont always be shown depending on the page and what happens on it but the ui has to cater for them seamlessly.
I repeated this pattern for the inner two column section (green / pink areas) where the outer container is display grid with just two columns, 1 row. Everything inside is then display: flex, flex-direction: column.
To me everything seems one dimensional as I've only really got one actual row in each column when the ui is broken down. It seems odd to me to define a grid with only one actual row hence I was thinking it should all just be flex box as I don't really have any two dimensional layout as far as I can tell. Does it actually matter? I'm an experienced CSS developer but not with grid, so theres a bit of confusion in my head right now.
This all has to work with IE10 unfortunately too and be accessible so I have to set min-heights on all the row looking bits if they have text in them as the user might increase the font size.
As with the main nav the green side panel is hidden by default but a button when clicked will cause it to slide into to view and nudge the pink column over.
If you saw this UI how should it be broken down? Any advice or insights would be very welcome. Thank you.
Mocked UI layout wireframe
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'm trying to create a pretty basic layout with Bootstrap 3. I want one center column with a max width and two outer columns to fill up the rest of the space and I want it all to be centered.
Without the max-width on the middle column, everything is centered nicely, but when I add the max-width, white space appears on the right forcing the rest of the layout off-center.
Here is a Bootply showing the issue.
Is there a way to do this using Bootstrap rows and columns?
Thanks for the help.