See the example here:
http://dojo.telerik.com/uFuYa/2
When you resize the column header (reduce the width) it's pushing the whole grid downwards. Also when you lower the column header width, then increase it, it reduces the height of the whole grid. Same issue happens when virtual scrolling is disabled. Is there any workaround to stop this happening? The content section (data section) seems to just push the footer down. Even if the footer is fixed, the content section still pushes past it.
It is recommended all Grid rows to be of equal height, so that the virtual scrolling functionality works as expected:
Virtual scrolling - Kendo UI documentation
You can set the CSS white-space property to nowrap for the Grid header and regular cells:
Modified dojo example
Related
I am trying to make this table that I am working on more responsive and visually appealing. I am using react.js. My table component has varying number of columns based on the data, so some tables I am finding it difficult to fit the information on the page without having resorting to horizontal scroll, or possibly things like the headers and the icons in the th's collide with one another. Initially I set a min width for the table so that the headers don't collide but that automatically made the table wider than it had to be causing immediate horizontal scroll.
Got this image from https://css-tricks.com/accessible-simple-responsive-tables/, looking to have the table initially with the squish method (no minimum width, just 100% width), but try to determine what min-width would be needed for the table not to collide on itself with a horizontal scroll. So maybe dynamically set a media query (if that's possible?) or open to other suggestions.
Here I set a minwidth for the table but even at full screen it goes straight to a horizontal scroll.
Here I removed the min width made the table 100% width and this would be ideal at full screen but when there are more columns or at smaller viewpoints it causes it to squish up to a point where it's unreadable.
Here I have a table with even more columns but even at 1461px screen width it starts overflowing. I also need to avoid having to break words in the headers.
Was hoping to learn to see if
There was a way to know at what screen size the column headers will overflow
If there is a way to dynamically set a media query to allow a min width at that point for horizontal scroll?
Or if I am just going about this the wrong way if there is a better way to address this? I would like to avoid collapsing columns if possible.
Goal:
Vertically Scroll multiple tables (AG-Grid) with a "global" scroll-bar on the main window.
Problem:
I have 4 child elements (AG-Grid Tables) within a Window, these children can be up to 3 times the with of the main Window.
Now the children would need to be scrolled separately and a scroll bar would be displayed in the rather slim child elements.
The goal is to display a horizontal scrollbar on the main window itself (if the children need scrolling), and this main scrollbar scrolls one of the child windows (AG-Grid offers the functionality to synchronize the scrolling of one table to another).
All 4 children always have the same width as the width is determined by the columns shown within the AG-Grid tables.
The application is written in React using AG-Grid for displaying/virtualizing these tables. So if someone has a solution specific to AG-Grid this would still be helpful.
Thanks for any input!
Edit for clarity: It is already possible to scroll the grids separately / the second thing working is to give the window the full with and scroll the window itself instead of the grids (This is unfortunately not a solution as the first column of the grid should be pinned to the left side of the screen so rows can still be identified when scrolled to the right)
Edit: Screenshot for clarity
It seems you need to combine this two features column pinning and aligned grids. I don't know if they work together.
I'm working with the DataTables library, and I'm using the autoWidth option to have DataTables set column widths automatically, as well as the Scroller plugin to fix headers and page data from the server.
This combination looks beautiful when my table has a large number of columns, but when it has just a few columns, the autoWidth setting makes them cartoonishly large.
Here's an example:
http://live.datatables.net/rizuvaza/2/edit
What I'd like is for the table to be only as wide as necessary for its content, and no wider. Sometimes this will mean that the content is too wide for the viewport and must be horizontally scrolled, and sometimes this will mean that the content is narrower than the viewport, in which case I don't want it to consume the whole horizontal space.
I've found a couple of approaches that work if I'm willing to hard-code a maximum width for the table, but doing so relies on me writing code to estimate the width of the columns myself. Obviously this is dependent on a wide variety of difficult measurements (font size, content width, etc) that I'd really rather leave up to DataTables.
Is there some way to configure DataTables, or use wrapping DOM elements and styles, such that it will always draw a table using only the width necessary?
Well - dont know if that it was you are looking for - but if you set
#example {
display: block;
}
and run a columns().adjust() right after initialisation
var table = $('#example')
.DataTable()
.columns()
.adjust()
.draw();
then the columns will be shrinked to the absolute minimum size.
demo -> http://jsfiddle.net/j5h9ob12/1/
Update, edited titles in the fiddle to emphasize the point.
My particular problem first occured to me when using with http://mkoryak.github.io/floatThead/
On certain pages I have tables with a of of columns. The client opted for horizontally scrolling these tables. Therefore those tables are wrapped in a div that has overflow-x: auto;
Works nice on desktop browsers and Safari/iOS.
When using floatThead at some point it requests the width of the table with outerWidth() to set the width of the table header when it is floated. On the iPad that floated table header is just as wide as the wrapper element, the rest of it is cropped. I debugged the outerWidth() values of both the container and the table.
On a desktop browser I get values like e.g. 1200px for the container, but 1900px for the much wider table inside of the container.
But in Safari iOS I get 935px for both the container and the table. The container elements doesn't have to be set to scroll larger contents to produce this error. I work with Twitter Bootstrap 2.3.2. If there is a page with a container fluid, its width is adjusted to the window width. If there is a table inside with a larger width, it is visible through overflow: visible;. But – on the iPad – when floatThead is triggered, the floated table headers width gets restricted to the width of the fluid container (minus its padding).
Therefore I presume that the reason for this is a different calculation of the width of bigger elements that are inside smaller containers.
If I understand it correctly, jQuery's outherWidth() uses css() to retreive the width of elements, and css() uses getComputedStyle or currentStyle.
I assume the browser returns the "wrong" with values, and that's all jQuery/floatThead can work with.
And I was wondering if my assumption is correct, or if there could be other factors triggering the "wrong" calculation of the width in Safari iOS.
Apologies for not checking into it any further myself before asking the question. After making a static copy of one of the problematic pages and successively deleting html, javascript and css code I was able to track down the reason.
Twitter Bootstrap 2.3.2 sets max-width: 100&; for table elements. In the said case (table being inside a smaller container that allows for scolling its contents), the table width doesn't need to be restricted in any way.
It didn't cause any problems in desktop browsers. Even in Safari the width of the table itself was fine and scrolling worked. Just jQuery's outerWidth() received a wrong value, which resulted in the floated thead being cropped to the width of the outer container.
I have a frustrating problem with the following scenario:
Right col, with table. Always 100% of available browser width.
Smaller Left col (sidebar) with width set to just 140px. Left col has slide-in / slide-out animation, i.e. it can be minimised if not required to maximise available horizontal space for the table in the right col. Right col alters its width correspondingly to use all the space.
The page header and the table heading row are fixed at the top of the page using a jquery plugin. I could have used position:fixed but then when the table forces the page to scroll horizontally it all breaks as you cant scroll horizontally with position:fixed. Hence the jquery plugin.
The problem is, the jQuery plugin remembers the original widths on the elements, so when the sidebar is shrunk and the page is scrolled, the fixed elements (header rows and sidebar) return to their original size rather than staying shrunk.
I made a basic example of the problem, with all the elements explained above, on jfiddle.
http://jsfiddle.net/cr0wn3r/ktbdx/18/
Instead of using jquery plugin which doesn't include refreshing option you can do the trick by yourself.
HERE there is short and great tutorial how to obtain the position effect you want to have.