I'm working on Angular table with usage of cdk Virtual Scroll. Do you know if there is any way to set the dynamic height of scroll viewport? Everything works fine with standard style property but I can't set the value using ngStyle.
I would be grateful for any help.
What you can do, try pass Height of viewport you want, as a #Input to your Component.
Second option that comes to my mind is you could try to pass as ElementRef component it self in constructor:
constructor (private _elementRef: ElementRef){ ... }
And then take its Parent Height, in, for example ngOnInit:
const elHeight = this._elementRef.nativeElement.parentElement.offsetHeight;
Hope it helps.
Related
I have site with fixed header in angular material with z-index of 1100.
While i have some mat-menu in my site which overlap the header with z-index:1200 and had class cdk-overlay-container (angular materiel class) which is default behavior.
To override this i just decrease the cdk-overlay-container z-index to 1000 so that it go behind the fixed header and all things ok to me.
Problem
But when i open my material dialog which uses same cdk-overlay-container and same z-index it shows my fixed header above that overlay because of its high z-index, So any idea how to achieve the above scenario by adding different class to cdk-overlay-container so that my mat-menu goes behind the fixed header but my mat-dialog above all content.
Screen shoots
Normal scenario
https://www.screencast.com/t/XhB2szH3gZe
Problem scenario
https://www.screencast.com/t/fYrMYFEOd
I have one solution by type-script(that when dialog show lower the z-index of header) but i need some pure CSS solution.
Thanks!
I had similar issue with the full-screen CDK overlay container and the material dialog that should come above anything. The issue is, that if you use provided material elements like Dialog, Tooltip, Menu, they all work with overlay CDK. Then, on top, you may have your custom Overlay service that utilizes CDK. In my case, two cdk-container-overlay divs were created. z-index is 1000 by default and the latest instance overlap's when both overlays are required at the same time.
Some will yell that it is not Angular way, but in my case, I ended up adding a backdropClass to the config of the material dialog. Then, I simply select dialog backdrop's parentNode and manually add z-index on demand.
public openFeedbackDialog(): void {
this.dialog.open(FeedbackFormComponent, {
width: '450px',
maxHeight: '450px',
minHeight: '200px',
backdropClass: 'feedbackBackdrop',
hasBackdrop: true
})
window.document.querySelector<any>('.feedbackBackdrop').parentNode.style.zIndex = "1001"
}
I figured it out my self
Just override the z-index of cdk-overlay-container
In your style.scss
.cdk-overlay-container{
z-index:999; //lower then fixed header z-index so it goes behind it
}
and in your component dialog.scss
.cdk-overlay-container{
z-index:2000 !important; //higher then fixed header z-index so it comes above
}
Cheers!
You can solve the issue by using custom OverlayContainer class. You can find example with implementation here.
i am building a AS3-Class extending SkinnableContainer. Vertical scrolling only.
public class Part extends SkinnableContainer {
public function Part() {
var scroller : Scroller = new Scroller();
scroller.percentHeight = 100;
addElement(scroller);
var content : VGroup = new VGroup();
scroller.viewport = content;
fillContent();
}
protected function fillContent():void {...}
}
Several instances of them are placed in a HGroup, everytime
the height of the HGroup or
the content in one of the instances
changes, the widths of the instances vary because some of them get a ScrollBar depending on their height.
How can i preserve the space which will be needed for a forthcoming ScrollBar?
scroller.measuredSizeIncludesScrollBars=true
does not lead to success.
Thank you for any hint.
My understanding is that you want there to always be a scrollbars width of space to the right of each component, so that your scrollbars will just slot in without causing repositioning, correct? If that is wrong you can stop reading now!
You should be able to achieve this by setting the verticalScrollPolicy style to ON (default is AUTO):
scroller.setStyle("verticalScrollPolicy", ScrollPolicy.ON);
This will mean that scrollbars are always visible, but when scrolling isn't possible they are disabled. If you need to hide disabled scrollbars you may need to reskin them or something similar.
Hope that helps!
I am trying to increase the height of container with increase in the number of contents inside the container.
Like in my case i m using tileList inside tabNavigator , when I put contents inside the tileList, the height of tileList does not increase
beyond vertical height of the viewport. It puts scrollbar on the container. I want to increase the height of an flex container with increase in the contents and introduce
scrollbar on the browser with increase in contents in the flex container.
Could anybody please suggest me how I could achieve this.
Thanks in advance.
You need to write a javascript function which increases the height of embed object and you need to call this javascript method from flex while adding a new item to tile list.
This link explains how to access javascript from flex.
Have considered using javascript and resize the element directly in the source HTML?
The JS code could look something like that:
function changeSize(id) {
var flex = document.getElementById(id);
flex.setAttribute("width", "800");
flex.setAttribute("height", "600");
}
In my project we needed to make the scollbars look like Windows scrollbars.
Therefore I have a thumbIcon on the thumb of a vertical scrollbar, but if I get too many items in the combobox, the scrollbar gets fiddly. This is because the margin between the thumbIcon and the border of the thumbSkin is too small.
Is there a way to set the minimum height of the thumbSkin so that I can ensure there is always a margin there and it always looks good, even if there are too many items?
Fiddly scroll bar http://img97.imageshack.us/img97/7057/nomargins.gif
Image above, see the thumb? By the thumbIcon I mean the 3 horizontal lines. The top and bottom margin between this icon and the border of the thumb itself is too small.
Normal scroll bar http://img15.imageshack.us/img15/5527/margins.gif
This is the normal scroll bar, the thumbIcon and the borders of the thumb have enough margin, which make the scroll bar look a lot better.
You should be able to extend (or if you feel really brave, edit) the ScrollThumb class, there's a minimum height setting in there of 10, which I agree is quite small.
Then you will want to extend the scrollBar class and set the style of the thumbUpSkin of to use that new extended ScrollThumb class.
Finaly you will want to extend your dropdown control to use the new extended scrollBar class.
I'd be more specific, but I'm not comfortable with extending classes and overriding stuff yet, maybe someone better at that will see my answer here and give a good code example.
There's an advantage to editing the class, in that you won't have to then extend all the other classes involved, but the disadvantage is that every ScrollBar in projects compiled on your SDK will use your new minimum height setting, and if it's compiled with a "pristine" SDK (maybe by a co-worker) it would be whatever the setting is in that SDK which could lead to some really difficult trouble-shooting in the future.
An alternative to overriding the classes is to get a reference to the the scrollThumb as a child of the ScrollBar.
var scrollThumb:ScrollThumb = hScrollBar.getChildAt(2) as ScrollThumb;
scrollThumb.minHeight = 50;
This is not ideal as it's dependent on the index of the ScrollThumb but I doubt that's likely to change and it's simpler than overriding the flex classes.
Here is the solution I found for enforcing a minimum size for the scroll thumb. I extended HScrollBar and VScrollBar and overrode the setScrollProperties method, to set the minimum size. Here is the HScrollBar version:
package your.package
{
import mx.controls.HScrollBar;
import mx.core.mx_internal;
use namespace mx_internal;
public class LargeThumbHScrollBar extends HScrollBar
{
public function LargeThumbHScrollBar()
{
super();
}
public override function setScrollProperties(pageSize:Number,
minScrollPosition:Number,
maxScrollPosition:Number,
pageScrollSize:Number = 0):void
{
super.setScrollProperties(pageSize, minScrollPosition, maxScrollPosition, pageScrollSize);
if (scrollThumb) {
scrollThumb.explicitMinHeight = 100;
}
}
}
}
For both HScrollBar and VScrollBar you set the explicitMinHeight (don't set explicitMinWidth in either version).
I'm not sure how to get the default scrollbars for a component to use the subclasses, though. I didn't have to tackle that problem because we were adding the scrollbars on ourselves. A quick google search didn't turn up any answers.
I have a class which extends SWFLoader, I use it like a normal SWFLoader:
var loader:MySWFLoader = new MySWFLoader();
loader.load("myFile.SWF");
myScene.addChild(loader);
The loading works OK, except that it remains 0 because the width & height never change from 0. I had to override the width/height get properties to make it work:
class MySWFLoader extends SWFLoader
{
public override function get width():Number{ return contentWidth; }
public override function get height():Number{ return contentHeight; }
}
As well as being a big hack this isn't quite correct; especially since the SWF has multiple frames and the frames are of different width/height.
Why aren't width/height working in the first place? Shouldn't they be automatically set during loading? Is it possible the issue lies with the SWF itself somehow?
Update: Changing scaleContent to true or false makes no difference.
I'm not sure if this applies for SWF loading, but whenever I'm loading content, i cannot access width and height before the whole thing is loaded.
So make an event listener that listens when the loading is completed, and then read the height/width.
Also take a look at the loaderInfo class in AS3
I'm not sure what part of the cycle you're trying to grab the height and width (and is it of the loader object or the loaded content) but you can can access the height and width of the loaded object using SWFLoader.loaderInfo.height and SWFLoader.loaderInfo.width.
By default the SWFLoader scales the content to the size of the loader, so you have to set the size of the loader. If you want the loader to scale to the size of the content then you have to set the scaleContent property to false.
SWFLoader is a UIComponent.
It needs to be run through the UIComponent framework to set its dimensions correctly
In other words, it is waiting for calls to commitProperties(), updateDisplayList(), etc.
If you drop it in your application (so that it is part of the layout framework) it should be fine.