My goal is to use ag-grid in an Angular 5 project and have the grid take up all of the available vertical space in a flexbox layout. The grid seems happy to use "height:100%" when it's contained in a div which has a defined pixel height or when the div has a percentage height but isn't in a flexbox layout. But it always seems to have no height when I try to host it in a flex item.
How can I get my grid to expand to take up the height of its flex item container? Here's a plunker with an example of what I'm seeing and trying: https://embed.plnkr.co/D8YgM6/.
Here's how I am creating my layout:
<div style="height:100%;display:flex;flex-direction:column;">
<div style="height:250px;flex-grow:0;">
<h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
<ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
<div style="flex-grow:1;">
<h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
<p>How can I get the grid to be aware of my div's actual height?</p>
<ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
</div>
I want the grid in the second flex item to have an appropriate height. How can I do this?
In your plunker, set the flex-basis of the item containing your grid to 0, this achieves I think what you are after. I've just been wrestling with the same:
.item-1 {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
Plunker Screenshot running in Chrome
I'm not sure why this works, maybe someone with more in depth knowledge of ag-grid can comment?
try setting auto height on grid ready event
this.gridApi.setDomLayout('autoHeight');
details: https://www.ag-grid.com/javascript-grid-width-and-height/
Related
So I want to make 3 images over 2 columns. The left image will be 100% of the height of the flexbox and I want to 2 right side images to be stacked top to bottom and their total height to equal the height of the left image or the flexbox height itself. When responsive resizing I want to keep this ratio as well.
The problem I'm having now is that upon resizing the left image shrinks and the combined height of the right 2 gets larger than the left image.
Thanks for trying to understand my jibberish.
I've tried a number of things and nothing working.
Using Flexbox
In order to accomplish what you are describing using flexbox you will need to use two flexboxes which will require making a few changes to the HTML.
The outer flexbox should have flex-direction: row; (this is the default value so it can be omitted). This will flex its children horizontally.
The inner flexbox should have flex-direction: column;. This will flex its children vertically.
The children of the first div should have flex: 1; which will distribute the space using an even ratio amongst the children.
You then just need to set height: 50%; for each of the images in the second flexbox.
Here's an example of what your code could look like:
.container,
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
img {
object-fit: cover;
}
div {
display: flex;
}
img,
div {
flex: 1;
}
.right {
flex-direction: column;
}
.right>img {
height: 50%;
}
<div class="container">
<img src="https://source.unsplash.com/random?mountain">
<div class="right">
<img src="https://source.unsplash.com/random?city">
<img src="https://source.unsplash.com/random?cat">
</div>
</div>
I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.
Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.
The structure of my container page is the same as the create-react-app template:
<div className="App">
<div className="App-header" />
<div className="App-intro" />
<div className="App-footer" />
</div>
and here is the CSS I use to freeze the header and footer:
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.App-header, .App-footer {
flex-shrink: 0;
}
.App-intro {
flex-grow: 1;
overflow-y: auto;
}
FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.
I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.
In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.
The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:
Why is my AutoSizer setting a height of 0?
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)
Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.
Trying to get Masonry to work on a SaaS product for which I have little control over the DOM but full access to the CSS / JS library.
The problem is with the horizontal placement, not vertical (see attached image).
JSFiddle Here: https://jsfiddle.net/ny2texas/0wncosbr/
OR...
Here is what I am using to call masonry:
jQuery('.boxsitepagebody .blog-post-list').masonry({
// options
containerStyle: null,
itemSelector: '.sblog-post',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 1
});
The CSS snippet I think is relevant:
.grid-sizer,.sblog-post
{
width: 20%
}
Below, The basic construct of the HTML. Note that the absolute placement ("left:40.1862%") is almost exactly 2x the 20% declared as the columnWidth above. But why is it skipping columns and placing the titles every OTHER column?
<ul id="blog_post_list_blog_blog_posts_list_0_1" class="blog-post-list sblog-post-newlist" style="height: 4301.2px;">
<li class="grid-sizer"></li>
<li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 0%; top: 0px;"></li>
<li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 40.1826%; top: 0px;"></li>
<li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 0%; top: 545px;"></li>
<li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 40.1826%; top: 692px;"></li>
...
</ul>
Problem solved.
I had to go into the masonry source code to figure this one out. First thing I had to do was to swap the minified code out for the full source code in GitHub so I could debug the process and placement of each tile.
The width of the tiles (with padding and border) were 179px and the widths of the columns was 175px (856 * 20% I had set in CSS). Since the tile was larger than the column, masonry set colspan to 2 meaning that each post occupied 2 columns (hence the gap). Since masonry has controls to auto pad the positioning of each post it assumes you aren't adding your own padding in CSS. I removed that padding (and the borders) so then 175 = 175px and the tiles placed properly.
To place the horizontal gap in tiling, use the "gutter" call to masonry().
I searched all around stackoverflow but I couldn't find an answer for it. Here is the problem:
I have two divs, one on top of the other. I want to have the top div to adapt the height depending on the height of the below div.
<div id="parent" style="height:300px">
<div id="div1" style="height:auto"></div>
<div id="div2" style="height:45px"></div>
</div>
This because I intend to show/hide the bottom div and the top div must resize to fill the parent div.
I forgot to mention that the first div (the one that needs to adapt) has long content with overflow:scroll
Can you help me please?
Thanks
For this you can display:table property. Write like this:
#parent{
display:table;
height:300px;
width:100%;
}
#parent > div{
display:table-row;
}
#div1{
background:red;
}
#div2{
background:green;
height:45px;
}
Check this http://jsfiddle.net/7NuFr/
i want to center align an image of 18px height with text next to it. Here is the code i use:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>
With that code, the div container is rendered with a height of 19px instead of 18px and text isn't centered with image. I tried on Safari 4 and Firefox 3.6. What is the reason for that 1 px?
Thanks
Don't forget to reset styles
(margin/padding) : div, img, span {
margin:0; padding:0; border:0 }
For vertical-align to work, your
elements must me inline.
A classic choice to align text
vertically is to give a line-height
equal to container.
For example :
<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>
Maybe you have a border somewhere in there you need to get rid of or set to zero width?
i'm not totally sure I understand what the problem is here but if its just that the image is a few pixels from where you would like it to be, then why don't you just position the image relatively. for example:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>
this will shift the image up by 2px from where it originally was.