We Keep Coding

Adaptive text rows

I want to create adaptive rows with text.
It's need to repeat text to end of row. Row width is equal to window width. And after that repeat rows to end of page. Page height is equal to window height. Also text is rotated to 45deg.
Example
I can make it with checking parent element width & height and fill it before size will be equal or bigger than window. But if text rotated to 45deg its to hard to me. Any suggestions how to that right?

Trying to achieve some kind of scrollable container with dynamic height

I have <div> with some dynamic content inside - sometimes it is table, sometimes it is text. I'm trying to setup some kind of container which would be scrollable on y-axis if its contents are too big for the screen.
Some googling suggests that its simple to do if you hardcode height of the div, but what should I do if I want to avoid specifying exact pixel sizes anywhere?
From what I understand, I'll have to calculate remaining vertical visible screen space first, then set it as div height. This seems like a fairly common task, yet I can't find any components(don't care if they are jquery dependent or not) that would accomplish this.
Any suggestions? Already existing solution(plugin, library, etc) is preferred.

If you would like the container height to start scrolling when it matches the viewport height, you can just give it height or max-height equal to 100vh (100% viewport height).
In case there are other elements outside of the container and it shouldn't take the full screen height you can use calc() to limit it:
.container { max-height: calc(100vh - 100px); }

How to automatically reduce height of all other table rows when one table row's height is increased?

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.

How can I make ExtJS treecolumn scroll horizontally only the content and not the header

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.

How do I take the scrollbar into account with viewport width units?

I am trying to develop a carousel similar to Netflix, but I cannot make it responsive. I have been using a codepen example:
Link to example
In this example, it has a hardcoded width and height. I would like to make it use a responsive measure (percentages). I wanted to use the vw viewport width units, but this doesn't work for me because it does not exclude the scrollbar. So, when I want every carousel item to have a width of 20vw (so that each one is 20% of the viewport size), they are always wider than I want because the viewport does not exclude the scrollbar.
How can I fix that problem?

I have made an example: Link
In this example, I want to show five items and showing an arrow on the right. The 6th item should be hidden behind the arrow, but the arrow width is not correct.
The width of every item is 18.4vw ( (100-8)/5=18.4). As you can see, I have put a padding on left and right with 4vw(so, I am subtracting 8 for total width), so, I have made the arrow layer with:
position:absolute;
right:0;
width:4vw;
In this manner, the arrow always is fixed to right.
The problem is that 18.4vw is the measure respect the viewport, and as there is a scrollbar, the width is not correct, because the scrollbar width is breaking the correct measure.
I dont know if you understand what I want to make.
BR.