I have a table in a div with overflow-x: scroll. So, you can scroll the long table left and right. The first "column" (td's in first position of each tr) should contain labels for the rows. I would like that when you scroll right or left, the contents of the table scroll, but the labels stay fixed so you can always see them.
I initially wanted to create another table to the left of this one, but the catch is the contents of each row is variable, so I don't know the height of each row until after the contents load (making it difficult to set the height of each cell in the "label column." The reason I can't dynamically just update the heights of the label column cells after the content loads is that it is really slow on FF and IE. The slowdown comes from calling clientHeight on the content tr or first td. It takes 5-6 seconds on my first clientHeight call of the content (the rest of them take 0-1ms). Regardless, I don't know of another approach.
Any suggestions?
You could maybe put all the contents of your other cells into the first cell as well, at offset (0,0), so that the height of the label cell is automatically set to the height of the largest component. and then put a layer above them so that they are invisible, and put the label in there.
Related
I have a table which contains many rows. Only the nth-oldest rows are visible. The newer rows are hidden and one has got to use a scrollbar to move them into sight.
I have written the following Cypress-statement:
cy.get("span.class1.class2").last().click();
It returns the last row, which is visible, when the view becomes shown. Marked red in the screenshot.
But what I like to have is the very last row in the table. Marked blue.
Is that possible with a simple Cypress-statement?
Or do I have to move the scrollbar down first?
If so: How can I scroll downwards using Cypress?
Get the parent class of that table and you could try using scrollTo()option.
cypress documentation:
https://docs.cypress.io/api/commands/scrollto.html#Syntax
Examples:
cy.scrollTo(0, 500) // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom') // Scroll 'sidebar' to its bottom
There is another option called .scrollIntoView(), but I think in your cases the scrollTo() might help.
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 have a table without fixed width columns (an this is ok so). Long text is at the moment printed out twice: First 50 Letters and the complete text in an hidden field.
Something like this: https://jsfiddle.net/vrtf6q14/
When clicking on the short version, colwidth (and height) decreases, when the text is faded out and then increased to full size. And then vice versa.
Is there any trick, to "smooth" resize the cell to its new size? And is it possible to toggle both texts the same time on top of each other? Using divs and position:absolute maybe?
Maybe it's totally simple, but I'm stuck.
You cannot apply CSS transitions to TR or TD elements.
You can however wrap the content of the TD elements in DIVs and apply animation/transforms to the div. The TDs should animate scale/width/whatever along with the Div's inside them.
<tr>
<td><div>Your Content</div></td>
<td><div>Your Content</div></td>
</tr>
I have dynamic data in my table. The amount of data in a cell may change. I have implemented a rowHeightGetter method to calculate the height of a row. When I add content to a cell and rerender my table, the content appears and the cell is larger, but if the additional content caused overflow, scrollbars do not show up. Please see the jsfiddle and click on a row. You'll see that you can no longer access the bottom row of the table until you click a second time.
https://jsfiddle.net/3cooper/ed7Ltc6o/1/
It appears that _calculateState() is not getting the actual row heights from the rowHeightGetter methods when it calls
var scrollContentHeight = this._scrollHelper.getContentHeight()
At this point it is getting the height of the rows by checking the rowHeight property on the table. I see in _calculateState() there are other calls that eventually call this._scrollHelper._updateHeightsInViewport() to properly get the height. Should this be done again. Just really started looking into this today - so I could be missing something obvious. Thanks.
Is there a better way to handle this?
Update:
Also, I notice that once a scrollbar appears so that the contents can scroll, if you click a row again, the table with shift down but the scrollbar will not adjust. Then once you start to scroll up the scroll jumps to the correct position and allows you to scroll the entire table correctly.
I am having trouble to fix the header of a table, here is my issue:
I used the same code from this post:
Table header to stay fixed at the top when user scrolls it out of view with jQuery
It is almost working, but the problem is the width of the header changed when I scroll down.
I wonder what I am doing wrong. I tried the following code to fix the width, but does not work.
$("#header-fixed td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $("#table-1 td").eq(index).width();
});
});
Here is the link:
http://vvb.me/test.html
The width of table cells is determined by not only the content of that particular table cell, but also the other cells in the same vertical column as it. This is because tables form blocks so the widths of the columns must line up.
What's happening here is that the calculated width of your attached thead cells is different from the widths calculated for your detached, fixed thead cells.
In the attached thead, the widths of the cells are largely determined by the data below. In the second instance, which isn't attached to the tbody, the width is solely determined by the header tds.
One solution would be to specify the width of the cells in both theads. As an example, specifying,
<td style='...; width: 50px;'>
on all of your thead cells would make them equal.
You could also use javascript to determine the width of each attached thead cell and set the bottom thead cells to be equal to their corresponding cell. Calculating the dimensions of DOM elements can be done with Javascript/Jquery. Check out answers like this one for methods on how to do that.