I want my grid to have a dynamic height. Before with angular 1 and kendo i would do like this.
<kendo-grid id="grid" options="entityGrid.gridOptions"></kendo-grid>
With the following CSS:
#grid {
height: calc(100% - 1em);
}
But with Kendo grid for angular2 when i try this it wont work.
<kendo-grid id="grid"
[data]="entityGrid?.view | async"
[scrollable]="'virtual'">
</kendo-grid>
When using scrolling (and static headers), the grid content area needs to have a height, too. Computing it dynamically based on the page is not supported at this time, and is not going to work with angular-universal. You can log this as a feature request on the kendo-angular2 repo, so that it is considered for implementation.
That said, you can use the following hack to make it work:
encapsulation: ViewEncapsulation.None,
styles: [
`kendo-grid {
height: calc(100% - 3em);
margin-top: 3em;
}
kendo-grid .k-grid-content {
height: calc(100% - 46px);
}`
],
This will pass the styles in the component itself. The value 46px is the size of the header, and 3em is your desired offset.
See this plunkr example for a working demo.
I was able to set dynamic height with following configuration
<kendo-grid class="grid"
[kendoGridGroupBinding]="data"
[ngStyle]="gridHeight"
</kendo-grid>
In TS file
public gridHeight = {
height: 'calc(100vh - 140px)'
};
You can set height as per your requirement from TS
Related
Is it possible to have a web part in SPFx which has (for example) a property "divWidth"
and it be a numeric value in px.
Then then a div renders with the width specified in the web part?
I know you could probably do it with inline styles but can you pass the value to an SCSS file?
Thanks P
Create the CSS Variables, for example based on the web part properties
let styleBlock = { "--tileWidth": this.props.width + "px",
"--tileHeight": this.props.height + "px" } as React.CSSProperties;
render it like:
<div className={`${styles.linkTiles} ${styles.tileCont}`} style={styleBlock}>
css will be like:
.linkTiles {
&.tileCont {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.tile,
.tileFlip,
.tileFront,
.tileFront>img,
.tileBack {
width: var(--tileWidth);
height: var(--tileHeight);
}
Using CSS Variables to Morph Your SPFx Design at Run Time
Is there a way to manage the font size of the function definition hover on ST3?
Here's what I see:
I've tried adding font.size to the theme for this element which is popup_control html_popup according to docs but it doesn't appear to accept this.
Update: I found that pasting this CSS in my color theme plist addresses the list/links but not the title. I have tried to use a plugin like ScopeHunter to find the context of the 'definitions' title but it doesn't work for popups.
<key>popupCss</key>
<string><![CDATA[
html {
background-color: #404238;
color: #F8F8F2;
}
a {
color: #66D9EF;
}
.error, .deleted {
color: #F92672;
}
.success, .inserted {
color: #A6E22E;
}
.warning, .modified {
color: #FD971F;
}
]]></string>
The best thing to do is look at the HTML that is used in the popup, to help decide what CSS selectors to use in the color scheme's popupCss to change the appearance of the popup.
In this case, the code is in Packages/Default/symbol.py, which you can view using https://packagecontrol.io/packages/PackageResourceViewer:
<body id=show-definitions>
<h1>Definition%s:</h1>
<p>
...
</p>
</body>
So you can use the following CSS in your popupCSS to target it and change the color of the "Definitions" text, for example - to prove the selector is working (the official recommendation is to use the id from the body tag):
#show-definitions h1 {
color: #b3bc20;
}
however, specifying the font-size seems to have no effect, at least in build 3154, so I think there is a bug in ST.
I've tried finding the solution to my problem but came up with nothing, so forgive me if this has been covered elsewhere.
I'm using Masonry for a client's site that I'm currently developing. In any viewport size that is 768px or wider, there are two element widths: 20% and 40%; when sizing down to mobile, i.e. up to 767px, the element sized at 20% becomes 50% and the one at 40% becomes 100%.
The problem is that, in mobile view, Masonry doesn't always put two of the 50% elements into a row, so the grid becomes broken up.
Here's a link to the dev site and Masonry grid: http://176.32.230.48/maxence.io/#work
Here's my CSS for the two different grid-item sizes:
.grid-item,
.grid-sizer {
width: 20%;
#include media(xs-max) {
width: 50%;
}
}
.grid-item-lg {
width: 40%;
#include media(xs-max) {
width: 100%;
}
}
Here's the relevant block of jQuery:
$container.masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
I'm also using the Masonry layout method on window resize:
var windowWidth = $(window).width();
if (windowWidth < 768) {
$('#grid').masonry('layout');
}
Anybody have any ideas?
I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.
You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).
You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.
Howard
OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):
.lotusContent {
background: url(leftColBkgd.png) repeat-y;
}
.lotusColLeft {
background-color: grey;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
Original solution:
.lotusColLeft {
background-color: grey;
min-height:2048px;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
I'm using masonry layout in WordPress so my local site's masonry layout is put together with loops. I've created a fiddle to explain my question.
How do I control the positioning of one item within a masonry layout?
I want a div to always be at the top right of the masonry container (to the right of my top left corner stamp)
How do I override the positioning that masonry assigns its .box items?
#container { max-width:635px; width:100%; }
.corner-stamp { background:gray; width: 90px; height: 90px; }
.box {
width: 90px;
height: 90px;
margin: 5px;
background: #6AD;
float: left;
}
/* I want to freely position this item with css */
#biggerBlock{
width: 395px;
height: 200px;
background: #6AD;
left:25%; /* overidden by masonry */
}
.box.large {
background: #084;
z-index: 2;
}
UPDATE:
David Desandro answered the question on the official Masonry Git page. The new isotope v2 will have this feature with the ability to include 2 corner-stamps. Thanks for the downvote.
There is no cornerStampSelector property in pure masonry now. You can use stamp option:
Specifies which elements are stamped within the layout. These are
special layout elements which will not be laid out by Masonry. Rather,
Masonry will layout item elements below stamped elements.
$container.masonry({
columnWidth: 100,
animate: true,
stamp: '#biggerBlock'
});
And stamp method:
Stamp the elements in the layout. Masonry will lay out item elements
around stamped elements.
$container.masonry('stamp',$('#biggerBlock'));