Class is added to classList but html doesn't update - Angular 2 / Ionic

304
August 21, 2017, at 12:43 PM

This function gets executed when something is clicked:

moveCover() {
    this.moveState = (this.moveState == 'up') ? 'down' : 'up';
    this.tds = this.elRef.nativeElement.querySelector('ion-slides');
    this.myrenderer.setElementClass(this.tds, 'moveCover', true);
    let thisel  = this.elRef.nativeElement.querySelector('table.table.table-bordered.table-fixed.monthview-datetable');
    this.myrenderer.setElementClass(thisel, 'marginChange', true);
    console.log('element class list   ' + thisel.classList);
  }

The class isn't being added to the element with the selector table.table.table-bordered.table-fixed.monthview-datetable. It gets the right element using the selector, because in the log message I see the class listed after it is added to the classList with the above code. However the HTML doesn't change so nothing happens. I am trying to modify an element that is part of a plugin, and it gets generated by a template. I'm wondering if this matters, but I'm guessing not because in the above code, the ion-slides selector is affected by adding the class, and it is also generated by the template.

The CSS for the classes being added looks like this:

.moveCover {
    height: 100%;
    transition: height 0.75s ease-in;
  }
  .marginChange {
    top: 0;
  }

I am trying to change the top value from 23px to 0 with marginChange. moveCover does what it should (change the height to 100%, but the transition doesn't work.

Rent Charter Buses Company
READ ALSO
Embedded CSS not working with TextEdit on Mac

Embedded CSS not working with TextEdit on Mac

I am very, very new, so please pardon my ignoranceI was away (thus using PC's) and have learnt to use embedded css and had my practice website going ok, then I came home to face my Mac

269
Any browser can be used to simulate Safari to some extent

Any browser can be used to simulate Safari to some extent

I wonder which other browser/version is more similar to Safari 9/10 at the moment

237
collapse spread not disappear after dialog hidden

collapse spread not disappear after dialog hidden

I made a modal dialog with css:visibility hidden and visible

250
Update style on scroll event in React

Update style on scroll event in React

I am attempting to change the color style of my header when a user scrolls the page, however, my onScroll method doesn't even seem to be firingCan someone please tell me why and how I can fix this? The onScroll method is being called on the bottom TemplateWrapper...

373