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/
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've tried to insert a <br /> tag to break the line after fontello icon and found that it's impossible when div is styled with "display:flex". Adding white space is also disabled. Adding new lines after some character is possible, but new line starts beneath <i> tag. Why and how to fix that?
PS: I've noticed that in Chrome situation is better than in Firefox, but new line still starts beneath <i> tag.
Example:
.with_flexbox{
display:flex;
color:purple;
}
<div class="with_flexbox red">
With flexbox I can't use <br /> tag right after <i><i></i><br /> tag
</div>
<div class="without_flexbox">
Without flexbox break after <i><i></i><br />
tag works fine.
</div>
<div class="with_flexbox">
White space is also disabled right after <i><i></i> tag. <br />And why this new line starts beneath <i> tag?
</div>
In your third example contents of your flex container are split by <i> node into 3 flex items, you get 1 item that consists of:
White space is also disabled right after, second item <i><i></i> and third item tag. <br> And why this new line starts beneath <i> tag?. Everything looks fine, you get 3 nodes displayed horizontaly, there is a line break after word tag, just as you wrote it.
Wrapping text fragments into separate tags not only makes sense semantically but also helps you maintain your code.
If you want to stick to flexbox, you should name each node separately and use flex-direction: column instead of br tags, or you could set flex basis for both elements and use flex-wrap. Example snippet attached below.
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
outline: 1px solid red;
}
.item__icon {
outline: 1px solid blue;
}
.item__intro {
outline: 1px solid green;
}
.item__description{
outline: 1px solid yellow;
}
<figure class="item">
<p class="item__intro">White space is also disabled right after</p>
<i class="item__icon"><i></i>
<figcaption class="item__description">tag. <br />And why this new line starts beneath <i> tag?</figcaption>
</div>
I've been stuck on this one for some time now and would really appreciate some assistance.
I'm developing a superfish horizontal dropdown menu.
I would like to know how to, using supersubs, set the width of the dropdown menu items to that of the largest items width in the drop down.
The default is : $('ul.sf-menu').supersubs({ minWidth: 40, maxWidth: 41, extraWidth: 1 }).superfish();
I would like something like : $('ul.sf-menu').supersubs({ minWidth: 40, **maxWidth: auto or 100%**, extraWidth: 1 }).superfish();
I would appreciate any help at all.
Regards,
Byron
supersubs min and maxwidth are in em's not % or pixels
I was having trouble with supersubs being a little buggy, and I figured out a superior CSS-only alternative. The drop-down <UL> and it's <LI> children should have no width set (or width:auto; if needed, I suppose), and both should be set to display:block;
#nav li ul a { display:block; width:auto; white-space:no-wrap; }
You can see an example at http://epraxadev.com/clcnewport/comp/supersubs.html
I promise, I've read through hundreds of Joyent posts and stackoverflow questions and I'll preface this by saying I'm certain I have no misplaced commas and have flash installed and have had others try the page in IE.
The issue is that nothing renders in IE 6/7, but IE8, FF, and Safari are all fine. Here's the code:
//sIFR-config.js
var zapfino = { src: '/fonts/zapfino.swf' };
sIFR.fitExactly = true;
sIFR.useStyleCheck = true;
sIFR.useDomLoaded = true;
sIFR.activate(zapfino);
sIFR.replace(zapfino, {
selector: 'h1, h2, h3, h4'
,css: '.sIFR-root { color: #1A2F35; }'
,forceSingleLine: true
,tuneWidth: 5
,wmode: 'transparent'
,filters: {
DropShadow: {
knockout: false
,distance: 3
,color: '#330000'
,strength: 1
,alpha: .45
}
}
,ratios: [7, 3.59, 9, 3.56, 10, 3.49, 12, 3.5, 13, 3.46, 20, 3.47, 23, 3.43, 26, 3.44, 34, 3.42, 40, 3.41, 42, 3.4, 45, 3.41, 47, 3.4, 49, 3.41, 69, 3.4, 71, 3.39, 72, 3.4, 76, 3.39, 77, 3.4, 3.39]
});
/* sIFR.css */
#media screen {
.sIFR-active h1, .sIFR-active h2, .sIFR-active h3, .sIFR-active h4 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
color: #ff0000;
}
.sIFR-dummy {
width: 0px;
height: 0px;
margin-left: 42px !important;
z-index: 0;
}
}
<!-- HTML Snippet -->
<div id="header">
<H1>H1 Example</H1>
<h3>H3 Example</h3>
<h2>H2 Example</h2>
<h4>H4 Example</h4>
</div>
Note that nearly every option you see I've tried with and without, cache clearing, etc. Also, the main css absolutely positions h1-4 within div#header, which I've also tried commenting out.
EDIT: Note that the .sIFR-active class is applied to <html>, so I know the script is firing, but other than that nothing on the page is altered.
I've also tried different fonts from different sources, still no luck in IE.
TIA,
Jay
Sometimes in IE6/7, when an absolute is positioned next to a float, the absolute will disappear.
In your css you have .1header floated left and immediately following .header_text is positioned absolute.
Try setting .header_text to position:relative. Or put an empty div between .1header and .header_text. Or wrap the div .header_text in another div.
BTW - CSS class names must start with an underscore (_), a dash (-), or a letter(a-z). Starting a class name with a digit is invalid but I don't know if it makes a difference to IE in this case or not.
Added after comments
I am pretty sure that it is a css issue. Remove the <h1>...<h4> with the sifr in #header_text. Add <h1>test</h1>. In the CSS, add 'background-color:#00c;' on #header_text.
Look at it in firefox. You should see a red test on a blue background. Look in IE, you won't.
On #header_text change position:absolute to position:relative. Look in IE, the red test with blue background should show up (not where you want it but that's another issue).