Alright, i'm creating a Sketchup model but i'm confused. The parent component is not taking it's children properties correctly. Is this normal?
Never mind. I fixed it! In case other people stumble on this problem: In every child component add the attribute you want to let the parent to Sum up.. (in my case i forgot to add the attribute "LenZ" to a component at the bottom of the list). If you do not add them the parent will not sum them.
Related
I'm going to simplify my problem a bit, because I really want to avoid adding a lot of code, because this is a gigantic project we are working on if I started adding code snippets, there would be a lot of it.
My project has one feature, where you have a list of different div elements in the left column of the page, and they can be individually dragged to the right column, where you can make your own list out of these elements in the order you choose.
These div elements are all the same child component. My task is to add a dropdown to these div elements, but only to the ones that have been dragged to the right column (you can choose additional preferences, once it's in the right column). It shouldn't be there on the divs in the left column.
The only way to differentiate between them is by the class name. The ones on the left have a class="left" and the ones on the right get the class="right".
Now I'm wondering if there's a way where I can write some code to the effect: if the element has the class 'left', hide the dropdown, else show the dropdown?
Yes, this is definitely possible.
Create a Directive that has a #HostBinding() for a specific class and just add the directive to every component.
Inject ChildComponent into the constructor of that Directive. You can also inject ViewContainerRef and then call this.viewContainerRef["_data"].componentView.component This will give you reference to that child element that the directive is put on.
Once the #HostBinding('.left') event handler is triggered this will be the function that gets called when the class you're looking for is added. Here you can then access that ChildComponent and then presumably call a method on that child component to show/hide the mat-select
I haven't actually tested this but thats the approach I would take.
You might also achieve this thru your css. Something like
div[class*="left"] dropdown-element {
display: none;
~or~
visibility: hidden;
}
Example plunker:
http://plnkr.co/edit/YLLslImGOpS8u6zx
In the plunker, I display the height and width of a div from the parent component using ViewChild.
I pass the div from the parent component to the child component as an Input HTMLElement, and in the child component, I again read the currentValue of this input. If you open the browser console, I logged the SimpleChanges object. If you look at the currentValue.offsetHeight, the height is the expected value (i.e. the value matches what the parent component is displaying)
However, the child component is displaying a different value from the expected.
Whats even stranger is if you edit the child component template to something like:
<div>
<p>Child: {{ display }}</p>
</div>
Simply adding some additional content in the div, the child component now displays the expected value (i.e. the value matches what the parent component is displaying, and it matches the value in SimpleChanges)
To put it simply, why does this difference occur?
In my code-base, I'm experiencing an issue using offsetHeight where the value within SimpleChanges is accurate, but the value I try to store on an instance variable and use within the component is inaccurate. This plunker probably does not emulate exactly the issue I face in my code-base but maybe understanding the cause/effects of what I described above might help me figure out the problem I face in my code-base.
Thanks!
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
How can I change the z axis of components and put one in front of the other? The new layout property in Flex 4 has changed significantly & now not sure how to do it.
It works the same way that it did in Flex 3. A components Z order is defined by the order in which they are placed as child of their parent. The second child will be in front of the first child, and the third child will be in front of the first and second child and so on.
You can still use swapChildren and swapChildrenAt to change the Z-order of children.
The layout property's value will be an instance of a Layout class; which--in a simple form your measure() and updateDisplayList() methods. IT does not, specifically, relate to moving one component in front of, or behind, another.
On a Flex 4 group, you can use swapElement and swapElementsAt, although I would bet if you were to examine the code you'd find that these are just layers of abstraction over swapChildren and swapChildrenAt.
checkout the new depth property introduced in Flex 4 e.g. see http://www.tink.ws/blog/flex-4-uicomponent-depth/
Maybe this help:
container's depth
you can use depth property of flex containers to define which element can overlap other elements.
I want to create an MXML container component that has some of its own chrome -- a standard query display, et al -- and that supports the addition of child components to it. Something a lot like the existing mx:Panel class, which includes a title label, but acts like a plain mx:Box with regards to adding children.
What's the easiest way to do this?
Edit:
To be clear, I want to be able to extend the container using MXML, so the "Multiple visual children" problem is relevant.
Extend a container and add a title label. Probably the <mx:Canvas/> will work here. Make the title a public var and include a var for the styleName of the label.
Then override the addChild() method so that any child that is added is added instead to the that is your container.
Leave enough space for your title when you position your Box element (i.e., give its y property enough space. If there is no title you may want to reclaim that space.
That's the basics. Customize to your heart's content.
EDITED TO ADD: I do this creating an ActionScript class first, extending the container I am targeting, and I add the "furniture" — items the class will always use, like title in your case — by overriding createChildren and calling super.addChild(item) for those items. Calling addChild from then on, even in MXML markup, adds items to the inner container.
We do this with states.
We put the chrome for the base container in a state (in mx:AddChild elements) and then use the initialize event to switch to that state when the control is created. All the chrome is then added to the container.
That gets round the multiple sets of visual children problem.
The downsides to this approach are:
You don't see the chrome when editing descendents of the base.
You can't directly access the parent chrome controls from descendent components as they are not there at compile time (instead, you need to define properties, methods or events on the base that the descendents can access)
However, it works well for us.