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.
Related
Is there a way to adjust the header height of the headers in ag-Grid? I would like to increase the height if the title is longer than the column width. I know that I can set the height in the gridOptions, but I want the height to be changed 'on the fly'.
I got this css styling to break the words, it works fine for me,
.ag-header-cell-label {
text-overflow: clip;
overflow: visible;
white-space: normal;
}
but I didn't find a way to change the height.
There is a headerHeight method setHeaderHeight(heightInPx)
This sets the height in pixels for the row containing the column label header. There are setter methods that can be called from the API and will change the header heights dynamically. Have you tried this?
you can check more details on ag-grid website, they have examples as well. Hope it will help.
There are only two types of header height settings for AG grid version 24.
groupHeaderHeight – sets height of grouped headers.
headerHeight – sets height of leaf headers.
If a grid has 3 level headers, level 1 and 2 can be set using ‘groupHeaderHeight’ and level 3 using ‘headerHeight’. There is no option to set height of headers at level 1 or 2 independently.
I have created fiddle regarding the problem issue in link here
Header and footer are absolutely positioned and 100% width. The middle content consists of the dashboard table. Header consists of two images, which on clicked, will toggle the content.
When I click on slide-toggle-1, the content of headerbottombar is revealed.
But the middle content is hidden and overlapped.
How can I properly show content of middle content when the slide-button-1 and slide-button-2 is clicked.
I would like to thank for all suggestions and solutions. Solutions are acceptable either in css, jquery and javascript as long as feasible solutions are presented.
Why dont you try adding a class with margin-top to bring the div down as much as needed. Like this:
.top{
margin-top:100px;
}
Add this to you div with ".content" Like so:
<div class="content top">
Then just toggle it on the 2 clicks like:
$( ".content" ).toggleClass( "top" );
You can give additional styles, but this is the basic run down.
Update :
If you want a variable height header that's sticky to the top, you might have to use some javascript that dynamically adjusts the top margin of the content
var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';
Source
Old Answer :
There are many ways to achieve what you want. One is to change the position of header to relative (and remove the line breaks between header and content). If you use fixed or absolute position, the header will overlap with the body content. Whereas relative will push the content down as the header expands.
See this : https://jsfiddle.net/d0pyxdoj/3/
P.S. Header/Footer have position fixed in your code, not absolute
Please check the below example. Height identification using script we can inject the spacing.
Script:
function heightCalc(){
topHeight = $('.sticky-top').height();
$('.content').css({"margin-top": topHeight+"px"});
}
Example Fiddler : https://jsfiddle.net/scj4u0t5/1/
I am working with handsontable [JavaScript Spreadsheet
library] and want to toggle settings with a bootstrap-styled-checkbox. The first thing was, to set a specific width and height to the table when the box is checked and to undo this fixed size (so it automatically resizes again) when uncheck the box.
Here is my current code:
$('#mycheckbox').click(function() {
if($('#mycheckbox').prop("checked") == true){
handsontable_table.updateSettings({
width: 725,
height:100
})
}else{
handsontable_table.updateSettings({
// missing :(
//UPDATE:
width: null,
height: null
})
}
});
At first, my handsontable-table is automatically sized to the correct size. When I check the checkbox, the table resizes to the given width and height. But I don't know how to remove this width- and height-settings. I tried to set them to 'false' or 0 or remove these settings with jQuery-.removeProp(), but none of them does what I want. And I can't find something right in the handsontable-docs (or other sites).
I very appreciate your help!
EDIT
I found a solution: You just have to set the width and height to null. See edit above.
But there is something strange going on when I minimize my table and maximize it again - at first, my div below the table slides up to the new bottom of my table, but when it gets big again, the div doesn't move anymore, its overlapping with the table...
However, I still don't know how to remove settings from a handsontable...
As you mentioned in your edit, by updating the value to null it appears to be one way to reset a setting with in Handsontables options. It my experience you do not want to set the height and width to null, but instead update it to a new value.
If you were clearing out a setting like nestedHeaders for example; you would just set the value to null to stop using the nestedHeaders feature. However, that doesn't work for every option.
If you are trying to expand and collapse a handsontable then setting the height and width to null or zero is not going to be the best solution. You should update the parent div to display null using jQuery(handsontable's parent selector).hide() or .show().
I'm using SlickGid 2.0 and I'd like to be able to set the width of each column based on the longest string contained in the column. I'm fine calculating the required width, but I cannot figure out how to set the width of a column outside of faking a drag event. Is there any other way to individually set the widths of columns in SlickGrid?
According to comments in the source code, you can set model[cell].width to adjust the width of individual columns.
See comments here:
http://code.google.com/p/slickgrid/source/browse/trunk/slick.grid.js?r=9
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!