I am wondering if there is a way that the ag-grid can have a min height when using domLayout = true ? When there are no rows it will show the spinner but it does not look good because the height of the grid is so short. I have tried some css min-height on the container and the style of the grid being style="width: 100%; height: 100% but that did not make a difference.
Anyone come across this and able to get a min height so the grid is not so short when there are a small amount of records?
Thank you
I recently had a similar issue. I forced a min-height by using the following CSS:
.ag-center-cols-clipper,
.ag-center-cols-container {
min-height: 300px !important;
}
Note that if you are using pinned columns, or other advanced features, you may need to override more styles.
Related
I am currently building a calendar and timeline view with fullcalendar v5.
My customers want to have a month view where they can overlook the whole month at once, no scroll bars. I know you can set the contentHeight to auto, but there is no option for width.
My slotDuration is 1 day. This is a non-negotiable.
I'd like to do this responsively and not hardcode column widths in pixels.
Does anyone have a suggestion?
You can try width as one of the following values :
width: fit-content;/*Will give width upto the content of calender can fit completely*/
width: max-content;/*Will give width upto the max-content of calender*/
width: 100%;/*Will give the full container width to calender*/
width: 100vw;/*Will give the full view-port width to the calender*/
Use this so that padding don't create extra space and lead to overflow :
*{
box-sizing: border-box;
}
Using Angular & Bootstrap.
My ui-grid-viewport div is overflowing my ui-grid div.
I would like to have my ui-grid resize vertically to fit myui-grid-canvas as well as the horizontal scroll bar on
I believe this can be accomplished best with Javascript. Would my best bet be making a function that sets the height of ui-grid-viewport == ui-grid-canvas + 10px?
Thanks
Vlad & Sam suggested that this is a possible fix in html/css.
Further exploration revealed that ui-grid and ui-grid-viewport were inheriting a height variable.
I was able to dynamically resize the container with the following code:
.ui-grid {
height: auto !important;
}
.ui-grid-viewport {
height: auto !important;
}
Thanks!
I'm trying a more fluid design.
I want specific divs to be a percentage of the overall body. I also want to set fluid / liquid padding within each div.
<body>
<div class='image'></div>
<div class='fourty'></div>
<div class='sixty'></div>
</body>
CSS:
body {
margin-top: 85px;
min-height: 100%;
}
.image {
content: image_url('something.jpg');
width: 100%;
height: auto;
}
/*I'm assuming the padding I'm setting is a percentage of the .fourty
div not the overall body. Granted, width is 100%.*/
.fourty{
padding: 4% 8%;
min-height: 40%;
width: 100%;
}
.sixty{
padding: 4% 8%;
min-height: 60%;
width: 100%;
}
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
How do I correct / achieve this? I'm open to a JS solution, but would be more interested as to how to accomplish this in CSS.
As far as CSS goes, there are no styles that you can apply to make an element's height equal to a certain percentage of the total document (body) height.
CSS does, however, offer you options to style an element's heights to a certain percentage of the viewport height (using VH units), but since this does not achieve your goal, I'll leave you with a javascript answer that does.
Relevant javascript functions:
function getDocumentHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};
function setDivHeight(target, percentage) {
var desiredHeight = getDocumentHeight() * (percentage/100)
target.style.height = desiredHeight + 'px';
};
To set the height initially and on viewport resizes:
var targetDiv = document.getElementById('target');
setDivHeight(targetDiv);
window.addEventListener('resize', setDivHeight.bind(null, targetDiv))
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
That is correct. The reason is that your code is in violation of the spec.
From the W3C height property definition:
percentage Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.
auto The height depends on the values of other properties.
In other words, if you're going to use percentage values, you'll need to use the height property from top to bottom.
From the browser's perspective, min-height (and max-height) don't adhere to this rule and, therefore, as the spec says, they compute to auto.
DEMO (with your code, revised)
Read more here: Working with the CSS height property and percentage values
As an aside, I think its safe to say that the height definition is thoroughly obsolete. It hasn't been updated since 1998 (CSS2) and there are many ways for establishing the height of a box. Confining percentage heights to only the height property doesn't make much sense anymore.
Firefox seems to agree. Recent versions now accept flex heights, as well. See examples here:
Height is not correct in flexbox items in Chrome
Chrome / Safari not filling 100% height of flex parent
Flexbox in Chrome--How to limit size of nested elements?
We are using angular ng-grid as we require the sorting, etc functionality,
However, we would like it to be full screen, ie to use the browser scroll if off the screen etc.
But basically 100% width, and height to match the number of rows.
We are only returning around max 50 items, so its never going to be massive amounts of data to display.
We can't seem to find anything regarding this.
You could try this:
.ngViewport.ng-scope{
height: auto !important;
overflow-y: hidden;
}
.ngTopPanel.ng-scope, .ngHeaderContainer{
width: auto !important;
}
Quick Plunker here.
Note: This is not my solution, but a solution mentioned by eithankw as a response on a ng-grid issue here.
I have datatables used with twitter bootstrap in a container at the bottom of my page. The tables were responsive and adjusted with screen size, but I wanted to fix a few of the tables with fixed widths to make them smaller (in width). I fixed the widths of the table data with
var resizeTable1 = document.getElementById("myTable1");
resizeTable1 .style.width = "1000px";
$("#table1-tab").find('.dataTables_scrollHead').css('width','1000px');
$("#table1-tab").find('.dataTables_scrollHeadInner').css('width','1000px');
$('.column1').css('width','78px');
$('.column2').css('width','305px');
$('.column3').css('width','69px');
$('.column4').css('width','69px');
$('.column5').css('width','127px');
$('.column6').css('width','127px');
$('.column7').css('width','114px');
$('.column8').css('width','115px');
however, by fixing the column and title widths, i cannot get the scrollbar responsive ability anymore when I make the screen smaller than the table width. Is it not possible to have a fixed width table and scrollbar? thanks!
If you are looking for scrollbars, would this work for you?
$("#myTable1").css('overflow', 'auto');
I think css 3 media queries should help you or maybe consider using this bootstrap extension: http://themergency.com/footable/
With media queries you could write something like this:
#media screen and (max-width: 768px) {
#myTable1 {
width: 100%;
}
}
This makes the table responsive again for a screenwidth lower then the given 768px.