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 ?
Related
Using Ag Grid:
Have the columns respect the minimal content width required to display as does autoSizeColumns()
Render at least the full width of the parent container similar to setColumnsToFit(), but still respect the content width of a column as a minimum width
Allow for data that changes which columns would be narrow or wide
Avoid CSS rules to override default responsiveness set by Ag Grid
In solving this problem it would be nice to:
Get the width of the visible part of the grid after the first render as well as the width of all content - how to do this with Ag Grid and without directly looking at the dom?
Get the max-content width of a column after first-render (without using autoSizeColumns first)
Note - It does not appear that we can combine setColumnsToFit() autoSizeColumns() and flex to achieve the goals above. The manner in which Ag Grid has implemented these features conflicts with eachother. Perhaps I am wrong somehow?
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?
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.
In HTML <table>
Using Javascript, i want to make square (or nearly square) the tallest cell (having max no. of lines) in every row, which results in decreasing rows height and make table compact.
Link: http://jsfiddle.net/okoer70u/ . See unnecessary white-space in ROWS, if we add white-space:nowrap to table then columns will have extra white-space.
All my tables are wider than screen and totally different cells text length and no. of cells so i can't use css like width min-width etc.
fyi, I am not using jquery.
What about wrapping the text inside the cells in a div. then count characters to find biggest?
please help