I have a problem, a button that belongs to an InfoWindow component. The button isn't created in the HTML part of the code but is called whenever the card component is open. I use this InfoCard in two places of the application, and in each component, I change the position of the button using ::ng-deep, because without it the changes won't be applied. The problem is whenever I change from one page to another, the component child1 inherits the child2 CSS of the button, and the same way when I check child1 first. I thought about adding a class to each button and changing in the CSS the call of classes .class1.button and .class2.button, but the problem is the button isn't displayed until I click in the showInfo button to display the card, so in typescript the class is displayed none, and I can't add a class to a class with display none.
Any help on how I can solve that?
The problem is rather difficult to understand for me given your description. However, you might take a look at the following docs. E.g. :host-context can be used to differentiate style application based on the context, e.g. the presence of some class in some ancestor component - assuming you apply some StyleEncapsulation.
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;
}
I am making a child button component that will open an included modal in that same component. Right now, since the modal is nested within the root element (of the child component), it is rendering inside the parent component's b-dropdown (Bootstrap Vue). I aim to have the modal remain in the child component, but to render in the middle of the window like all my other modals.
Here's the call from my parent component (which uses Pug):
b-dropdown(right text='Reports')
ExportItemsToPDF(:item_ids=`selectedItems`)
And here's the portion from the ExportItemsToPDF component:
.export_items_to_pdf
b-dropdown-item(#click.prevent='openModal()') {{buttonTitle}}
modal(name='export_items_to_pdf' height='auto' width='70%')
form.modal-container(#submit.prevent='submit')
h1 TEST
If there's any other supporting info needed, please let me know and I'll provide.
Thanks.
I don't think you can do it without any custom Javascript to manipulate the modal. If you are trying to benefit from a shared component that you can drop into other components (to keep your code DRY etc), you will have to split the modal into its own component, then in the parent component do something like...
ExportItemsToPDFModal
b-dropdown(right text='Reports')
ExportItemsToPDFDropdownItem(:item_ids=`selectedItems`)
...so that the modal is a sibling (or possibly higher, like an aunt/uncle or great-aunt/great-uncle) of the b-dropdown instead of a child element.
I saw not editable class styles on the site on chat pane.
And the classes themselves were dynamically changing.
How to make same?
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
I am trying to fix a presentation bug in Google Chrome. When I change one class, the page looks correct. However, if I change every attribute of class A to those of class B, the presentation is still wrong. Therefore, one of the child elements has a different style applied when I change the style.
Is there a way to quickly see all the changes in the computed styles on all elements that occur because you change a class on one element?
With an element selected, click on the '+' in the upper right corner of the inspector. This will allow you to write a new rule.