Is there a way to set a custom header height avoiding CSS in Webix?
When I redefine classes such as webix_ss_header and webix_hcell the height of a layout changes according to the modification that I've made.
For example:
.webix_hcell {
line-height:20px !important;
height:20px !important;
}
.webix_ss_header {
height:20px !important;
}
The above code causes following issues:
Header of the vertical scrollbar doesn't adjust to others and requires another CSS class;
In the bottom appears a space that corresponds to the difference between the default and the custom height of the header. Herewith the vertical scrollbar rendering as usual.
As you can see, it affects the position of the underneath content, the footer and the scrollbar. How can I overcome this?
There are two ways to set the custom height to the header:
1 - headerRowHeight property
view:"datatable",
headerRowHeight:20,
2 - height for the one of headers
columns:[
{ id:"title", header:{text:"", height:20} ,width:250},
]
Your snippet:
http://webix.com/snippet/6519b63d
Related
Please take a look at this codepen:
https://codepen.io/darrengates/pen/BarZMYr
In this example, you'll see that I'm using "react-virtualized", with the "List" container type. In addition, to achieve the effect of making the left column sticky on horizontal scroll, I had to add this CSS:
.ReactVirtualized__Grid.ReactVirtualized__List {
overflow: visible !important;
}
.ReactVirtualized__Grid__innerScrollContainer {
overflow: visible !important;
}
However, when I did this, react-virtualized no longer loads additional data on scroll.
Removing that extra CSS allows react-virtualized to work as it should, but then I lose the stickiness of the left columns (which of course it expected on account of an ancestor having overflow: scroll)
Is there any way to "force load" more of the list so that I can continue to use a sticky column?
I have some columns which has four words i.e Pre Trading Follow Up, Post Trading Follow Up and some of them having three words. I tried the below css to wrap the text to multiple lines.
::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
white-space: normal;
overflow-wrap: break-word;
}
HTML
<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
</ag-grid-angular>
but the column header remains the same. I wanted to wrap the column header text to multiple lines. Is there anyway to do this?
Note: I can able to wrap the content using cellStyle: {'white-space': 'normal'}
{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},
But I wanted to wrap the header.
Please review the following stackblitz example.
https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css
In the global style sheet I applied the following... you could use ::ng-deep in your component css, this is the first stackblitz I could find with ag-grid to fork and is not mine so there was no component css to use.
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
The next piece is to use property headerHeight
this.gridOptions = <GridOptions>{
headerHeight:75,
This part unfortunately is unavoidable... it also doesn't allow for you to make the header height dynamic based on the word wrap requirements.
The reason why is that the content area is defined with top style dynamically when the view is rendered; adjusting the header height via ::ng-deep will not dynamically
shift the top of the content area down as it is calculated by the
headerHeight property... if undefined the default is 25px so the top for content area is also 25px.
Not to
mention that the z-index of the content area causes it to overlap the
header when you change the height with ::ng-deep.. so you don't know if ::ng-deep truly worked... visually that is... as the header extends under the content area.
Sorry to say but this will be as close as you can get... adjusting all elements, shifting down the top etc based on a dynamic header height via DOM manipulation I fear will just get too ugly... and if you need the header height dynamic to the point this is a show stopper... it may be best to explore other options as a replacement to ag-grid.
https://www.ag-grid.com/javascript-grid-column-header/#headerHeight
To achieve expected result , use below option of using line break tag - br in column definitions for that specific column headerName
{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}
Angular has encapsulation.
But ag-grid doesn't care encapsulation. so we need to set .ag-header-cell-label and .ag-header-cell-text globally.
We set ViewEncapsulation.None at Component property and write css or scss, this can set css globally.
Global css is applied all ag-grid component. If you want to set .ag-header-cell-label and .ag-header-cell-text only one ag-grid component, set headerClass at gridOptions
this.gridOptions = {
defaultColDef: {
headerClass: 'myfunc-default-header'
},
headerHeight:75
};
And write scss file like this.
.myfunc-default-header {
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
}
this can only apply .ag-header-cell-label and .ag-header-cell-text inside the my-func-deafult-header.
So we can apply only one ag-grid component.
I got a small website project which i like to do purely with html/css and js without any external scripts and such.
My problem:
I got a header which is always fixed (position: fixed) on the screen. While scrolling down the body disappears behind the fixed header and might cause the header to increase in height (by appending other divs to the header).
This can also happen on mobile display when items get stacked in another order. (for this im using css grid)
Now, of course i want to avoid the body getting overlapped by the header.
If the header had a constant width i could just apply some top-margin to the body and I'm done. But since this is not the case I'm wondering if there is an elegant solution...
My first thought is using setInterval() and constantly checking the size of the header and ajusting the margin of the body like that... But this doesn't seem right. Can I somehow directly link the margin of the body to the height of the header?
Make a single function for editing elements of the header.
function editHeader("<add>/<remove>", "<data>"/<element_obj>){
/*Add or remove header elements*/
//===========================================================
/* Style your body margin by calculating the current header height*/
//===========================================================
}
Call the above function for any element update operation on the header. Hope it helps!!
It would be better if you share the code with the post. BTW you can use vhcss unit instead llikr:
.header{
position: fixed;
margin-top: 5vh;
}
Using vh you're setting the margin of relative to the body height. This might help. but if you're header has too much content consider using a breadcrumb to collapse them in on small screen.
I'm trying to get a section header to stick to the top of a wrapper div, but the wrapper div needs to have a set height and the overflow set to scroll.
I've seen this example (jsfiddle) that achieves exactly what I'm looking for minus the fact that it doesn't have a wrapper div with a set height or overflow.
Here is (jsfiddle) the same example with the wrapper div added with set height and overflow. You can see that it is not working.
Does anyone have a solution for this, or a work around?
This is the wrapper css that is being used:
.wrapper {
height: 500px;
overflow: scroll;
}
As Thanasis already stated in the comments you have to change the scrolling context from window to .wrapper.
To avoid the 100%-width fixed div to overlap the scrollbars I know no different way than setting the width to calc(100% - 17px) where 17px is the hard-coded width of the scrollbar.
Find the fiddle here: https://jsfiddle.net/nwt58L8j/6/
I am using some javascript to calculate the height of the page and then set a min-height on on a div. The reason for this is to push the footer to the bottom of the page for pages that are short on content. My issue is the min-height is about 30-40 px to big thus causing scroll bars. (Note: I am not using a solution like sticky footer for various reasons and prefer this solution.)
Here is my code:
JS
$(function() {
var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
$("#page-content").css("min-height",height+"px");
});
HTML
<header class="container">
<div id="menu" class="row">
<!-- Content -->
</div>
</header>
<div id="page-content">
<!-- Content -->
</div>
<footer>
<!-- Content -->
</footer>
I believe the issue lies in my CSS. For example I have a margin in the header as so:
#menu{
margin: 5px auto 10px;
}
If I remove that code it will reduce the scrollbar just a little bit. (I have other margins set in place on the page so changing just this one will not work as a solution).
How would I re-write the JS code to factor in the margin for the header and other sections?
The <header> box's height doesn't reflect the child #menu's margins because they are both normal box elements, and if the #page-content had margins, they would overlap the #menu's margins, in which case the header's height would include some part of the content's height, which wouldn't make sense.
The issue is collapsing margins: http://www.w3.org/TR/css3-box/#collapsing-margins
As that page explains, you can get tell the browser not to collapse margins a few ways:
add display: inline-block; to your #menu { } rules (my first suggestion)
add overflow: hidden; to your header { } (a potentially better suggestion if you're having alignment issues)
make your <header> absolutely positioned, or float it. Or do that to the #menu inside.
Or if you want to go for a hack, you could calculate the header height manually:
var header_height = $("header").outerHeight() +
parseInt($("header").children().css('margin-top'), 10) +
parseInt($("header").children().css('margin-bottom'), 10);
Now that I think about it, this makes sense, and I think the css spec is doing the right thing.
Updated: http://jsfiddle.net/HzBSz/2/
Also see: Outer element margin not equal to inner element margin
For some reason the JS is not calculating the margins. I added the margins I had in the header and footer and they totaled 45px. Thus the script now looks like so:
$(function() {
var height = $(window).height() - ($("header").outerHeight() +
$("footer").outerHeight() + 45 );
$("#page-content").css("min-height",height+"px");
});
I add 45px and the script now functions correctly.
Why not just place the footer on the bottom manually? I mean, I know you said you prefer not to, but why? If you want it to always be there, do
position:relative;
bottom:0;
If you want it to scroll with the rest of the page (as it sounds like you may), use
position:absolute;
instead.
This is a much better method than dynamically inserting dummy content to push a footer down.
Perhaps you look at this
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
may solve your problem.
Try .outerHeight(true) for all your elements instead of .height() or .outerHeight():
$(function() {
var height = $(window).outerHeight(true) - ($("header").outerHeight(true) + $("footer").outerHeight(true) );
$("#page-content").css("min-height",height+"px");
});
.height() - returns the height of element excludes padding, border and margin.
.innerHeight() - returns the height of element includes padding but excludes border and margin.
.outerHeight() - returns the height of the div including border but excludes margin.
.outerHeight(true) - returns the height of the div including margin.