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
Related
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.
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
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 want to use bootstrap's well component on a horizontal form.
Most rows of the form only have one or two fields in a set of columns, and I am specifying the width of each column.
I would like to style some of the of rows in a well, but I don't want to have the well go across the entire screen, because it looks weird to have so much extra space to the right of the fields. I only want to style the maximum width of the columns in the rows.
If enclose the grid within a div of a set size, then all of the controls' sizes and positioning are affected.
Is there anyway to style a row this way?
Is there a way to create a div that has the right width, and position underneath the actual rows?
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.