Reproduction link
Steps to reproduce
Open the codesandbox link.
Reduce the preview window width.
You can see, instead of horizontal scrolling it's just breaking the column header and taking the the same width of a value cell.
What is expected?
First it should set the column width to the column header cell width then if the any column value cell width is longer than header cell width it fall back to cell value width.
What is actually happening?
When table header is sticky, scroll={{ x: 'max-content' }} and there is no width property specified in each column definition then unless column cell value width is bigger than column header title, column title is breaking(Simply, Column width is equal to max cell width without respecting the column header width).
Environment
Info
antd
4.24.1
React
17.0.2
System
MacOS
Browser
Chrome 108
This situation is happening because of 'sticky'.
My row data & column definition is from remote API call and i want horizontal scrolling instead of 'Ellipsis' & don't wanna set hardcoded width to each column, fixed scrollX.
Related
I have Tabulator working with column visibility toggle via a dropdown with checkboxes. Checkbox click call toggleColumn() which works however the width of the column doesn't update correctly for every row and the header (i.e. for some rows the now visible column width is wider and for some narrower). Only after changing the column width manually does the width align for all rows and the header. What am I missing? Thanks!
I have implemented my own fixed header table using simple JS logic (Can't use Pure CSS due to some restrictions):
Created two tables. One for header (It will not have scrollbar)
and one for table body(It have overflow as auto)
I have not mentioned width of columns explicitly as i wanted to have dynamic column width as per data.
I'm getting column's width by using following code:
var col1 = document.getElementById("column1").offsetWidth;
And applying this width to header columns.
But when a scrollbar appears to a table(As table is of fixed height) then the offsetWidth returns different value than actual, and misalignment happens with header and body.
I tried parentWidth also. But again getting not getting width correctly.
Is there any way to get width of columns correctly when scroll appears
?
I am creating a 3x3 grid of images using html tables. I want to increase both the width and height of an image when the cursor is over that particular image. Now, when i increase the width of one table cell, the width of all other table cells in that particular row automatically gets reduced. Unfortunately, when i increase the height of a table cell, the height of the table cells below it remains the same causing the table itself to increase in height.
How to cause the height of other cells to get reduced automatically?
Maybe try using flexbox instead of html tables?
You can set custom flex-grow and flex-shrink parameters to achieve what you want.
You can read more about it there: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If I understood well, you want to increase width and height when cursor is over image. Than you need to increase width and/or height only on hover, not for all cases.
Let's assume I have a tree grid with a single column, the treecolumn. The width of the panel is 200px, and when expanding, some records have a wider text than 200px. Currently, Ext will apply an ellipsis property on those cells. What I want to do is to show horizontal scrollbar in the bottom which will update at every expand/collapse event. To accomplish this I used column autoSize() function which increase the column size to fit the content and automatically show the scrollbar in the bottom. But, increasing the column width increase also the column header width, which I don't want. Is there a way to keep the header width at 200px and increase only the column content width, keeping the scrollbar in the bottom?
Thanks in advance!
Eventually I found a way, but as #Alexander suggests in his comment, I had to enter the Ext code and mess with it. In fact what I've done was to remove the horizontal scroll partner corresponding to header as follows:
var headerScroll = myTree.getDockedItems()[0].getScrollable();
mytree.getView().getScrollable().removePartner(headerScroll, "x");
removePartner() is a private function so I should not use it, but in this particular case I don't think will harass the rest of the code.
I'm a beginer of IsotopeJS and I'm trying to make a fitRows layout.
The problem here is I want rows to be justified so there is no blank space. But every cells should be the same width. So there need to be a minimum width for each cells and if we go under this width the grid change to get less cells in the row.
Is there a way i can achieve that ?