So my ag-grid resize itself because my row height is also dynamic. So for height I am using [style.height.px]="beta" and this.beta = document.getElementsByClassName('ag-full-width-container')["0"].offsetHeight + 139 And the pagination is set to 100.
I cannot use autoHeight because I have more than 10k rows. So I want my header to be sticky. I have some content before ag-grid in DOM. As I scroll I want my ag-grid header to stick to the top. I am using top:0;position:sticky;z-index:1000 It's working for every div tag except ag-gird's div tag. So is there a way to have a sticky header in ag-grid?
On onGridViewChanged() function I implemented the following logic. So in this logic the HTML above ag-gird in DOM should be consider for top because ag-grid header top was 0 for me. And then add some value according to your requirement (calibration). Then for the row body add some margin (calibration).
onGridViewChanged() {
let header = $('.ag-header')
let headerPos = $('.btn-row').position().top + 50
$(window).on("scroll", function () {
if ($(window).scrollTop() > headerPos) {
header.css("position", "fixed").css("top", 0).css("z-index", "99");
$('.ag-body-viewport.ag-layout-normal').css("margin-top", "88px");
}
else {
header.css("position", "static");
$('.ag-body-viewport.ag-layout-normal').css("margin-top", "0px");
}
});
}
I would suggest eliminating the scrollbars that are outside of the grid, and make the grid fit within the window. You can use flexbox to do that. You need to make sure the parent elements are using display: flex and have 100% height. And then set the grid to be flex-grow: 1.
On the parent element(s):
height: 100%;
display: flex;
flex-direction: column;
On the grid:
flex-grow: 1;
https://stackblitz.com/edit/angular-ag-grid-full-height?embed=1&file=src/app/app.component.html
Related
I want to implement pretty print using jquery and html.
if any div with .section class is in bottom of A4 page (my A4 body width is 595px and each page height is 842px) i add margin for push this section in next page.
here is my code:
$(".section").each(function () {
//add element offset top to detect element page number
//for example if element top is 1400 then it is in page 2 (842*2 > 1400)
$(this).attr('data-top', $(this).offset().top);
});
$(".section").each(function () {
$elementTop = $(this).data('top');
if (parseInt($elementTop) > ($currentPage * $A4PageHeight)) {
if (!$(this).hasClass('rendered')) {
$(this).css('margin-top', ($elementTop - ($currentPage * $A4PageHeight)) + 'px');
$(this).addClass('rendered');
$(this).addClass('page-'+$currentPage);
}
$currentPage += 1;
}
});
please help me to do this.
You may wish to set page break CSS attributes to tell the browser where it should avoid breaking. You could add page-break-inside: avoid to a div that you want the browser to try not break
You can also set the number of lines of paragraph text that should be visible before a break with an orphans definition.
More details:
https://www.w3.org/TR/WD-css2-971104/page.html
How to put header in listview with GridLayout.
When I put header above listview my header take some height and last row in listview is not showed, because of header.
I also found a way to set header in listview directly:
data-win-options="{ header: select('.header') }">
With this my header is positioned on the left side of list, not above the list, like normal header should be.
I did not see any example with listview GridLayout and header section above (for instance I wanna put search box and heading in header).
Any example of this ?
Two solutions are here:
1) This is answer I get from Microsoft:
In the list view the WinJS.UI.GridLayout's viewport is loaded
horizontally.
You need to change the viewport's orientation to vertical. You can do
this by attaching the event onloadingstatechanged event.
args.setPromise(WinJS.UI.processAll().then(function () {
listview.winControl.onloadingstatechanged = function myfunction() {
if (listview.winControl.loadingState == "viewPortLoaded")
{
var viewport = listview.winControl.element.getElementsByClassName('win-viewport')[0];
viewport.className = 'win-viewport win-vertical';
}
}
}));
and change the class win-horizontal to win-vertical.
2) Problem could be also solved adding standard html header and list below header, without data-win-options="{ header: select('.header') }" attribute.
In that case we need to calculate height of the list:
.list {
height: calc(100% - headerHeight);
}
Link for reference is here: http://www.roi-owa.com/
The sidebar column (on the right) is written like this...
#aside {
background: #ffffff;
width: 220px;
overflow: hidden;
}
The main content column (on the left) and wider....is written like this...
#content.alpha,
#content.beta {
width: 700px;
background-color: #ffffff;
background-image: none;
}
The problem is that with how this theme is written...the aside column isn't contained inside a floated container with the content div...so I might be stuck. I don't want to start rewriting theme files, I just want the right column to stretch down to the height of the #content div. Not sure if its possible.
Unfortunately I don't know of way for this to be done in pure CSS, since the columns know nothing about each other. However, some simple Jquery could be used.
The idea is to check the height of both and set the shorter one's height to the longer one's height. It should look something like this in jQuery:
var contentHeight = $("#content").outerHeight();
var asideHeight = $("#aside").outerHeight();
if ( contentHeight > asideHeight ) {
$("#aside").height( contentHeight );
}
else {
$("#content").height( asideHeight );
}
I have a situation where I need to vertically center some content (specifically an iFrame) inside of a div where the parent div will be smaller than the content. So far, everything I can find about vertically centering is taking about images which does not seem to work the same way.
Here is the simple code ...
<div class="video">
<iframe id="youtube-XXXX" src="..." style="width: 855px; height: 481px;"></iframe>
</div>
Now, the iframe is generated code but it does have an id value I can reference. The parent div needs to be AT MOST 330px tall (this is a responsive design, so it could end up shorter). So in this case, I am looking for the top and bottom 75px of the iframe to be hidden (481px - 330px / 2).
Right now, I have the CSS styles on the div.video as follows:
div.video {
overflow: hidden;
max-height: 330px;
}
Now, I get the expected height but the top of the iframe lines up with the top of the div. How can I get the iframe to render in the middle.
you could use jQuery for the purpose: the Jquery function would be like this:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
and the call can be like this:
$(element).center();
in your case assign a name to your div like "dvVideo" and then call the function:
$("#dvVideo").center();
credit to: Using jQuery to center a DIV on the screen
There is something that I need to do using HTML and CSS, without javascript.
I need help to define the css of "Outer Div". It has to go all the way to the bottom of the page. The height has to be 100% - 90px. The header has a fixed height. Inner Div's height has to be 60% of the height of Outer Div.
Can anyone help me? I can use html5 or css3 if needed.
It is very easy to do this without JavaScript if all the dimensions are in %, but since 90px height is compulsory for the header, try these steps:
1) Give the Header a z-index value greater than the Outer-Div,
for example:
.header{z-index:10;}
.outer-div{z-index:0;}
2) Now, give the Header the following style:
.header{height:90px;min-height:90px;max-height:90px;}
3) And, the following style to the Outer-Div:
.outer-div{height:100%;}
4) Because you want the Inner-Div to be always visible, first you have to take it away from the Header, because Header has a higher z-index than Outer-Div, so:
.inner-div{margin-top:90px;}
5) Then give it a suitable height, I advise to use % inside of pixels for this Inner-Div:
.inner-div{height:50%;}
To make Outer Div's height 100%-90px, use:
#outerdiv {
height: 100%;
margin-bottom: 90px;
}
To make Inner Div's height 60%, use:
#innerdiv {
height: 60%;
}
Both are in addition to your normal styles. Replace #outerdiv and #innerdiv with the IDs or classes of your outer and lower divs.
If you want to make the panel travel down the page as the user scrolls, use this method on SO. It is easy CSS. Just add position: fixed to Outer Div's CSS.
Hope this helps!
In javascript you sould catch the body resize event and in this event you have to calculate the height of Outer DIV. The following code sould be a good start for you:
function onBodyResize(e) {
setProperty("OuterDIV", "height", (getDocHeight() - parseInt(getProperty("HeaderDIV","height"))) + "px");
}
function getDocHeight() {
var r = document.getElementsByTagName('html')[0].getClientRects();
return r[0].height;
}
function setProperty(id,prop,value) {
document.getElementById(id).style.setProperty(prop,value,null);
}
function getProperty(id,prop) {
var p;
if (document.getElementById(id).currentStyle)
p = document.getElementById(id).currentStyle[prop];
else if (window.getComputedStyle)
p = document.defaultView.getComputedStyle(document.getElementById(id),null).getPropertyValue(prop);
return p;
}