We Keep Coding

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.

IsotopeJS justified width cells in fitRows layout

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 ?

Text wrap to columns

I have unlimited length of text, and a fixed height container with no vertical scrollbar option, basically the text overflow the container, but it is hidden.
The requirement is to wrap this text to same height columns like the parent container, container has the option to have horizontal scrollbar.
Al this need to work in responsive layout - what means the text parent container height will be less, and all text columns will be restructured.
E.g. if the current text columns was initial 3 column on smaller devices can go to 4, or 5 column.
I searched Google, but haven't found any possible solution.
Any solution, or guide will be big help - at least to know in which direction to start
CSS, or JavaScript, jQuery solutions are welcome.
Initial has the height auto - click button to set the height/ after the height is set need to wrap the text and set in columns to not exced vertical height, instead will be horizontal aligned columns.
ADD CODE HERE
jsfiddle sample

You can wrap your data in another div inside the opendoc and increase its width.
<div class="opendoc"> // width fixed Change Height
<div class="resizablediv"> // Change the width
{{Your data}}
</div>
</div>

I have an idea, but not really perfect. Such problems always need a lots of try/fail tests…
You need to have two nested elements:
<div class="opendoc">
<div class="opendoc-inside">
[Content]
</div>
</div>
.opendoc will receive a fixed height.
.opendoc-inside will have columns and fixed width;
depending of your device width, you choose a number of columns, I choos 2 for the exemple;
Now with javascript:
set columns 2 and width 100% on .opendoc-inside
if height of .opendoc-inside is greater than height of .opendoc:
add 1 column and 50% to the width of .opendoc-inside
goto 2
else your are ok
This solution generate a reflow on each test. this could become very slow.
You need to avoid to launch this operation on each resize event…

Found an jquery plugin for - http://welcome.totheinter.net/columnizer-jquery-plugin/ . This one solve all what i need.

Fixed Position Table Row Labels

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.