I have an ag-grid like below which has two headers. And I wanna change the height of header which is in that red rectangle as u can see.
Im able to change all headers height with this one
gridOptions.api.setHeaderHeight(100);
but this one changes both of them, I only want to change that red one how can I do that?I also tried other methods from ag-grid api like below but none of them worked.
setGroupHeaderHeight(heightInPx)
setFloatingFiltersHeight(heightInPx)
setPivotHeaderHeight(heightInPx)
setPivotGroupHeaderHeight(heightInPx)
I also tried to change height of that div with jQuery but didnt work seems like ag-grid has different algorithm to set header height.
Here is a working plunker example.
Here's what you can do. Get the default header height the top header row should be set to. Then set the header height to whatever you want, then set the grouping header height to the default header height, which will override what you set the header height to.
const defaultHeaderHeight = gridOptions.api.getSizesForCurrentTheme().headerHeight;
gridOptions.api.setHeaderHeight(100);
gridOptions.api.setGroupHeaderHeight(defaultHeaderHeight);
Demo.
I'm trying to develop a fixed header table.It is a kind of widget, where use will be allowed to set width to columns whichever he wants.
Scenario:
Table(width is set to 500px) has four columns where if we don't specify width at col tag level,all columns are optimized to total table width like this:
If we specify width to 2 columns at col level whose total width is less than table width, then table looks like as follow:
But, if width of the 2 columns are greater than table width, then remaining columns are getting hidden, though table wrapper(<div class="v-grid-content">) has overflow:auto.Scrolling is enabled but only two fields are shown:
I am not getting what is wrong, can somebody help. Here is the jsfiddle.
I tried to keep min-width to col,but that didn't work.
Do we need to set width to every col??
Do we need to set width to every col?
No, you don't. You can set a width to some – any other column widths will get computed by the browser as usual. (Taking into account the widest content of that column and the overall table width.)
I am using angular ui-grid. I would like to set the height of the grid's contents or the number of rows visible. Ideally, I would like this to set dynamically based on the window size, but, will settle for hard-coding it for now. All of the grids in the ui-grid tutorial appear to have the same height/columns visible so I'm not sure this is possible through UI-grids API.
You have
gridOptions.minRowsToShow .
you can set this to the length of your data. you can set the row height with
gridOptions.rowHeight
You can set the height of the container with css.
.grid {
width: 500px;
height: 250px;
}
so you can calculate the height in pixel
$scope.gridheight=(data.length+1) *rowHeight **
in your controller and set with the style attribute the css height.
style="height: {{gridheight}} px;" //for the container with element with ui-grid
or
ng-style="{'height':gridheight+'px'}"
**data.length+1 because of the label row.
I generally set fixed column widths via CSS with flawless results:
#tableID thead tr th:nth-child(1){width: 75px;}
#tableID thead tr th:nth-child(2){width: 75px;}
/* etc… */
But now I'm in a situation where I won't know the desired column widths until runtime. Here's an excerpt from the code I'm using to dynamically set the column widths:
var tr=$("<tr>");
var colArr=Home.ColDefs[this.statBatchType].colArr;
for(var i=0;i<colArr.length;i++){
var col=colArr[i];
tr.append(
$("<th>")
.html(col.title)
.css("width",col.width)
);
}
this.jqTHead.append(tr);
Sorry this code is a bit out of context but the bottom line is that I'm adding columns, represented by <th> elements, to a table header and setting each one's width.
What ACTUALLY happens, however, is that Firefox is treating the column width as a minimum and then automatically expanding the column width as the user expands his browser window. Consider a case where my JavaScript code sets the width of each column to 75px. Firefox will ensure each column is at least 75px wide, but if the user maximizes (or enlarges) his browser, provided there is sufficient room, each column will be automatically widened.
This is odd to me since the JavaScript code would seem to be the functional equivalent of what I was doing in CSS. Yet the CSS approach doesn't cause this odd behavior.
Any thoughts?
Fix the width of the <table> this will ensure the table does not take the available size and bump the layout.
table-layout: fixed; on the table does exactly this: columns never expand to fit their contents, and if you give the table itself a width, the extra space is divided equally. The contents of cells don't come into play at all.
I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom?
Thanks !!
My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.
If you take Accessibility seriously, two tables is not the way to go since it breaks rules.
There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.
I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825
Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.
With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.
I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.
For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.
I set styles in my CSS file for the scrollTable ID, see below:
#scrollTable {
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:
$(document).ready(function(){
var maxWidth = $('#Header1').width(); // Get max row Width
$('#Header2 th').each(function(i) { // Set col headers widths to to match col widths
var width = $(this).width();
$('#Header1 th').eq(i).width(width);
});
var blankSpace = maxWidth - $('#Header1').width(); // Calculate extra space
$('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace ); // Stretch last header column to fill remaining space
});
I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.
I've done it in the past using CSS by defining a height for the <TBODY> tag on my table, and using overflow:auto. This was a while ago, and I think there were some compatability problems. I don't remember precisely what they were, but this solution may work for your problem.
the best solution (the one that scales with lots of data) is to use 2 tables like aaron said, the top table has the headers, and the bottom table should have the headers as the last row (or the footer), but with opacity of 0, so that you cannot see them.
This the headers at the bottom make the bottom table have the same column widths as the top table, making things line up. make sure you style both header and footer the same.
you will also have to create a seperate scroll bar for vertical scrolling to the right of the table, because otherwise the scroll bar will mess up your widths. add a scroll event listener to set the scrolltop of the table to the scrolltop of the scrollbar, and resize the scroll bar to be the same height as the table.
its pretty easy, actually =)
Create a single table as you normally would to meet accessibility concerns. Dynamically create a new table based on the thead using jQuery (copy the thead) and inject it into the page above the first table and give it the fixed position. It should stay in place while the rest of the table scrolls, but it will still remain accessible and work with JavaScript disabled.
Have you tried this plugin from JQuery ? http://plugins.jquery.com/project/floatobject
I believe this does what you want. Check out the demo # http://amirharel.com/labs/fo/float_demo.html
Cheers!