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
?
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 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 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.
I have two tables adjacent to each other both being populated dynamically in C#, I want both of these two tables to have the corresponding row height be exactly the same depending on what the first tables row height is (no specific height has been set, just needs to fit text in).
I have tried various ways of getting the height in C#, javascript, jquery, etc however they all return null or 0, i can get it to work by actively setting the height however this is not very effecient and occasionally buggy, is there a way I can get the height of a dynamically created html table row/cell?
#JoseRuiSantos comment is a better implementation if your design allows it (i.e. combine data in both tables in to a single table and accordingly render rows and columns to display as two different tables using css).
One way I could think is to try using javascript:
For this to work, do not set any table/row/column heights in both tables.
Add an empty column at the end of each table with a div element in it. In the page load completed event, identify the max column height in corresponding row of both tables and set the corresponding div element's (in both tables) height (in corresponding row) to the column max height.