I am wondering if there is a way that the ag-grid can have a min height when using domLayout='autoHeight' ? When there is no rows the filter box cuts out and it doesn't look good because the height of the grid is so short.
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
From what I know there's no such feature in ag-grid.
The easy, but dirty solution:
If rows height is fixed, you can check the amount of rows and based on them choose the 'normal' or 'autoHeight' layout + set grid heigh for 'normal' layout (since it's required)
As a smarter solution (for rows that have different heights and so on):
Once grid is initialized, use smth like that to calculate actual grid's height:
let gridHeight = 0;
this.gridApi.forEachNode(node => {
const nodeHeight = node.rowHeight;
gridHeight += nodeHeight;
});
Then, comapre the gridHeigh with your minHeight and set the proper layout and set grid heigh to minHeight (only for 'normal' layout)
Notes:
This solution was originaly designed for similar but different problem - setting up the normal layout if grid overflows its parent (so the grid header is fixed and so on), so there might be a better solution that I don't know about;
In the code above header height is not taken into account;
It's required to re-calculate proper layout on a bunch of ag-grid hooks like onGridReady, onRowDataChanged, onGridSizeChanged
Related
I want to set up a certain CSS layout described by the following:
it is table-structured, so there are a number of rows each having certain amount of cells; cells borders in different rows possibly do not align;
it is fullscreen; not like occupying whole device display, but rather using all the window space present - the window height should be divided in rows and its length should be divided in cells (full-window would be a more precise term)
it is adaptive; meaning, heights and lengths are given as percentage from window dimensions; this also applies to margins, paddings, etc.
More accurately, I am trying to make a web-chat application consisting of message area, list of online users, text input and "send" button. I want each of these components to have space of certain (relative to window dimesions) length between them and between window borders and components adjacent to them (that is, margins). I want this layout to persist precisely after zooming or resizing the window.
I do realize that this could be achieved with Javascript (which I am capable of), but I assume that would be ugly and less efficient, so I would like to use CSS (if possible).
So far I tried:
marking up the window with inline-block wrappers containing the actual visible elements; didn't really work because setting wrapped content's width and height to 100% results in them expanding the wrappers (regarding borders and margins), which ruins the layout instantly; I understand I could try 98%, 97.5%, 97.2%, etc. but this is not precise so it really bugs me
using floating divs (same as above)
using table, table-row and table-cell divs; did not satisfy my requirements because only absolute values work this way
I am really a newb, so I might have missed a number of obvious points here.
Could you use the vh and vw measurments,
they can be used like this:
height 10vh;
width 100vw;
this would make a row that's 1/10th of the screen tall and 100% wide.
Okay, using Javascript looks like the only reasonable option here.
Here is what I want to achieve with Polymer Elements:
Polymer Structure
The column size is not always the same width but relative to the screen or warpper-div size. In example 1, it's each 16.66%, in example 2 it is 33.33%, in example 3 it should be 100%.
I need a responsive layout where -dependent upon the screen size- a different number of columns is displayed per row and each of their column sizes will be adjusted.
Does anyone know how I can achieve this with https://elements.polymer-project.org/elements/iron-flex-layout? I am a little puzzled on how to work with flex and layout horizontal/layout vertical.
I would be very thankful for a codepen (or similar) example on how code and result could look like.
Update: I found the solution here: How to control number of items per row using media queries in Flexbox?
You can use iron-media-query to set a property on an element, apply clsses to HTML elements depending on this property value and then apply different CSS depending on the set classes.
So, here's my situation :
I've built a website using Twitter Bootstrap.
The main design - among others - consists of a left sidebar (span3) and the main content (span9).
Now, I'm trying to fit a 728 x 90 AdSense Leaderboard ad in the span9 block and - guess what - I noticed it's slightly bigger than the available block.
So, I'm thinking about re-sizing the whole griding system (= increasing the grid column width by some pixels).
How should I go about it? What if I go and Customize? Which variable should I edit, so that the alternative CSS remains a drag'n'drop replacement for the existing bootstrap.css?
And, last but not least : will it work without having to tweak 1001 different CSS options?
The three variables below control the gutter (spacing between columns) in the Bootstrap grid. The defaults are shown below (taken out of variables.less. Make these values smaller to make the columns (span*) themselves wider.
#gridGutterWidth: 20px;
#gridGutterWidth1200: 30px;
#gridGutterWidth768: 20px;
The fluid grid calculates it's values from the above variables too:
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth);
#fluidGridGutterWidth1200: percentage(#gridGutterWidth1200/#gridRowWidth1200);
#fluidGridGutterWidth768: percentage(#gridGutterWidth768/#gridRowWidth768);
I am creating a table in html where I have defined the widths to be a certain % of the page, but would like to make the resulting spaces form a square. So if I have put the width to 25% as below:
<td width="25%" height="XX"></td>
How do I get the height to match the width?
For example, if the browser is open to a 1000 pixel width, the column will be 250 pixels, and I want the height to also be 250 pixels.
In "pure" HTML/CSS you can't.
The only thing you can do is use Javascript, get the table's width, and set the height to the same level.
A simple method would be:
var e = document.getElementById('MYID');
e.height = e.style.width + 'px';
This may not be entirely reliable across all browsers though ... Jquery provides height(), outerHeight() and a bunch of other functions which may be more reliable across different browsers ...
I am using Yahoo's UI Grids to structure most of my pages. One of my pages is a Google map and I need about a 400 pixel fixed left column to put map legend information into. YUI Grids however only offers 3 columns for their 100% page layouts, namely 160px, 180px and 300px.
Is there a way that I can customize their 'template 3' which provides the 300px column to get my 400px column I need?
I've determined how to do this. Kudos for Nate in the YUI forums for pointing me in the right direction.
To set a fixed left column, you need to divide the column pixel width by 13 to determine the em's for all non-IE browser's. For IE, divide the column width by 13.3333
e.g. wanting a fixed 480px width, 480/13 gives me 36.9231em for non-IE and 480/13.33 is exactly 36em for IE
Using template 3, the CSS is:
.yui-t3 .yui-b {
float: left;
width: 12.3207em; *width: 12.0106em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 36.9231em; *margin-left: 36em;
}
Also, if you want to tweak margin's e.g. zero margin, you can do something like:
#doc3 {
margin: auto 0;
}
Grids is presently deprecated in YUI 3 - a bit of a shock when I saw that. There will be some browser(s) that drop off the A category in July and as a result, Grids will be reworked given that some of the initial design decisions were based on older browsers of course.
There is definitely a way. I think its just a matter of tweaking the CSS to either add in another 400px column, or modifying an existing column to fit your needs. If you are adding another column, be sure to account for the additional width (plus margin) and either reduce width on other elements, or increase the width of your containing element.
If the layout is using 100% width of the browser, width may not be an issue, but if your content is wrapped in a container element which holds all of your columns, be sure to adjust the existing elements to make up for the size of your new column.
EDIT: Also if you are dealing with 100% width layouts, its probably better to size your columns using percentage, instead of a fixed pixel size. Since the containing element for your columns will be the user's screen, if you use percentage then the column sizes should adjust relative to their resolution/window size.
If you want your new column to appear on the left of the your other columns, typically you would place it before the other columns in your markup, and apply a "float:left" property. But, take a look at how the other columns are set up in the YUI CSS, and follow their method.
I hope that helps.
Acorn