I'm embedding a PPT into my app, so I'd like a responsive iFrame. Can't get this working with the CSS based approached I've looked at here.
I'm thinking the best way would be just to make a simple component with height and width properties. Can I make these computed properties / observers that listen and update on the browser resize?
Or would I need to create a resize event and update the properties on the event?
A little code example would be much appreciated!
Thanks
I would recommend to use a CSS based approach, but you can use a component and use the resize event. Basically you would add the event listeners to window in your didInsertElement hook, and remove them in your willDestroyElement hook. Just use jQuery's .on() and .off().
onResize() {
// do whatever you want to calculate your values
set(this, 'my-frame-with', ...);
},
init() {
set(this, 'boundOnResize', get(this, 'onResize').bind(this));
},
didInsertElement() {
jQuery(window).on('resize', get(this, 'boundOnResize'));
},
willDestroyElement() {
jQuery(window).off('resize', get(this, 'boundOnResize'));
}
You can not use computed properties for this because they need to depend on observable properties. This will not work for plain JS properties, because this in an ember functionality. So you need to kind of wrap them like this.
Related
In short, I am trying to trigger a change detection loop between renderer.removeStyle and renderer.addStyle.
The style I am adding is an css animation. When it's removed and added in the same change detection loop Angular won't detect that something changed (for the same animation name).
More Details
Let's say I have a button event (click)="addAnimation('animation1')" that should add existing animation and add the new animation named animation1, animation2 ....
Of course the following code won't work:
addAnimation(animationName: string): void {
this.renderer.removeStyle(this.animate.nativeElement, 'animation');
// setTimeout(() => {
this.renderer.setStyle(this.animate.nativeElement, 'animation', animationName)
// }, 0);
}
since removing and adding a style under angular nose won't trigger any change.
One possible solution is adding a timeout (like the commented code above, but it has side effects that I am not interested in, and also the code is a little wired.
I was hoping to solve it by adding something like this.appRef.tick(); in between to force angular create another change detection loop.
That doesn't work, what am I missing? any suggestions how to do that correctly?
Thanks!
Try following way.
isClick=false;
onClick(){
isClick=true;
}
<div [ngClass]="{'yourCSSClass': isClick}">
Is there a way to apply a style to all elements in Cypress? Like one would do with the star selector:
* {
overflow-x: hidden;
}
I need this for visual regression snapshots, because of scrollbars that appear, and haven't been able to find something simple and elegant in Cypress. Currently doing something like this:
cy.get('[data-cy="some-tag"]').invoke('css', 'overflow-x', 'hidden');
But of course this isn't great, because every element that has scrollbars has to be targetted and set.
You can change the DOM just before any screenshot is taken by using onBeforeScreenshot and onAfterScreenshot callbacks. This will hide the scrollbar on the element the screenshot command was called on, and restore it afterwards:
Cypress.Screenshot.defaults({
onBeforeScreenshot($el) {
$el.css('overflow', 'hidden');
},
onAfterScreenshot($el, props) {
$el.css('overflow', 'auto');
},
});
You can put this function in support/index.js file since it is loaded before any test files.
Note: if you just call cy.screenshot() then the $el will be the document and you can use .find(<selector>) command to get any child elements within the page.
Works great with cypress-visual-regression plugin.
Reference: https://docs.cypress.io/api/cypress-api/screenshot-api#Change-the-DOM-using-onBeforeScreenshot-and-onAfterScreenshot
I have a very niche use-case. I have to add a modal animation like this:
regular css animation
But I need to have a component (our own filter component for a datatable) inside said modal.
So I need to use the ModalService. But this service is only attaching my custom config like this:
toggleFilter = () => {
const modalOptions: ModalOptions = {
initialState: {
labels: this.datatableLabels, // needed for filter to have labels
filterGroups: this.filterGroups // needed to add filterGroups
},
class: 'filter-modal' // this sould be my custom class
};
this.bsModalRef = this.modalService.show(FilterComponent, modalOptions);
}
to modal-content and the above mentioned animation and styling uses divs above that. Not only it's working when encapsulation set toViewEncapsulation.None then it screws our other modals as well, since I cannot apply correct classes to the one I need to mess with.
How can I overcome this issue I'm having?
Instead of using the ModalService and open desired embedded component within the modal. You can basically inject the desired component into the body of the modal while using directive instead -> Here you are declaring the whole modal layout -> you can modify all the related classes so it's easier to modify a modal and have your ViewEncapsulation untuched so other modals are unaffected.
I am trying to use paper-dialog within my custom component.
I want to be able to open the dialog from outside the component. What is the best way to do this? (all the examples work directly on the component)
Also the dialog requires me to call "open()" on it to open it.
In the examples I found I found:
this.$.dialog.open();
But this doesn't seem to work with lit-element
I got it to work using shadowRoot, not sure this is the best option:
render() {
return html`
<style>
</style>
<paper-dialog id="dialog">
<h2>Content</h2>
</paper-dialog>
`;
}
firstUpdated(changedProperties) {
console.log("firstUpdated called")
if (this.shown == "true")
{
// this.$.dialog.open();
this.shadowRoot.getElementById("dialog").open()
}
}
I added a property to my element called "shown"
static get properties() {
return {
shown: Boolean,
Thinking I could pass this from the outside into my component, but it doesnt seem to do the trick either (I can set it once with the custom element propery, but changes to it from the out side dont seem to work.
Generally, if you are aggregating a dialog within an element that has other UI elements then you shouldn't be showing/hiding the dialog from outside the element - the event that triggers the dialog should be raised and handled with the containing element.
That said, if it's absolutely necessary, then I prefer a "showDialog" method (not a property). Closing the dialog should be triggered by a dialog button or loss of focus, so you don't need to expose a close method.
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.