Custom CSS mixins doesn't always work about angular-polymer HOT 15 CLOSED

Custom CSS properties and mixins should be added to the actual element, and not to any element inside the element's light DOM. So the correct code would look like something like this:

vaadin-grid {
  --vaadin-grid-row-cell : {
    background: red;
  }
}

<vaadin-grid></vaadin-grid>

from angular-polymer.

Using --vaadin-grid-row-cell mixin does not work in this use. That mixin is applied to every cell element of vaadin-grid.

from angular-polymer.

Hi @tsm91

I tried to reproduce this issue in Plunker https://plnkr.co/edit/HJNfs1?p=preview but everything seemed to work.

I'm closing this issue now. Feel free to re-open it if it doesn't to work.

from angular-polymer.

@samiheikki it doesn't work with vaadin-grid, do you have any ideas ?

.stylerow
{
  --vaadin-grid-row-cell : {
    background: red;
  }
}
<vaadin-grid>
[..]
<td class="stylerow"></td>
[..]
</vaadin-grid>

thanks

from angular-polymer.

Thanks. It does not seem to work.
I need to apply the style only for some cells. So I did something like that :

grid.cellClassGenerator = function(cell) {
       if (cell.index == 2) {
          return 'stylecell2';
       }
};

.stylecell2
{
    background: var(--vaadin-grid-row-cell, red);
}

or

.stylecell2
{
    background: red;
}

But it doesn't work.

from angular-polymer.

Thanks. I solved the issue with this solution :

.custom-cell {
    background-color:red;
    width: 100%;
    height: 100%;
    margin: 0 -24px;
    padding: 24px 24px 0 24px;
}

<vaadin-grid>
[..]
<td>
<div class="custom-cell">[..]</div>
</td>
[..]
</vaadin-grid>

It's not pretty, but it works fine 👍

from angular-polymer.

@samiheikki Hi. I'm using an angular2 app with <router-outlet></router-outlet>
so when I tried the example:

<vaadin-grid #grid="" id="my-grid" selection-mode="multi" [items]="gridItems" column-reordering-allowed="true">[...]

The background of the cell is still the default one (white). I've tried all of the properties in the docs but nothing happens. I need to modify the height and padding of the grid cells. PS: custom styles do the same

Am I missing something?

from angular-polymer.

Hello @dispeakble
Angular has an own way of dealing with styles for components. Could you create some more of your code or create a plunkr? Then I might be able to help you. I'm using custom css myself in our app and it works fine.
Also as soon as you have these things I would be glad if you could paste it here: https://polymer.slack.com/messages/polymer-angular/
That's the place we usually discuss support requests

from angular-polymer.

@dispeakble note that <style is="custom-style"> does not work in Angular templates with Angular v2.2+, due to the change discussed in #104. Please try that in your index.html document, if you haven’t yet.

from angular-polymer.

Yeah, @BorntraegerMarc ... you need to send me an invite for polimer.stack.com.

so the DOM inspector in chrome sees this in the first head tag
<style>vaadin-grid[_ngcontent-pnn-19] { --vaadin-grid-row-cell : { background: red; } }</style>
Uppon inspection, clicking on the <vaadin-grid/> element the inspector pane shows the above code. so far so good. so why is it that the cell is still white?

http://imgur.com/zsTOaED

from angular-polymer.

@dispeakble You can register yourself to the polymer slack.
Angular takes all your css code and puts them into the DOM. Then angular differenciates between your components by adding the [_ngcontent-pnn-19] attributes to the DOM. Angular does this because it does not really use shadow/shady DOM prior 2.2

from angular-polymer.

@BorntraegerMarc I cannot create a plunkr project at this time since my app is using the router and the plunkr doesn't support this at the moment. Also, there's too much cleanup to do. I'm using the angular-cli implementation found here Vaadin Implementation Angular 2-polymer Webpack.

I can't revert to 2.0 or 2.1 right now because of deadlines.

Anyway, I just wanted to thank everyone here for pointing out the #104 bug and the explanations, but the curious thing is that using the same vaadin-grid in plain html/js code works as documented.

from angular-polymer.

@dispeakble @BorntraegerMarc The lack of is="custom-style" is the reason it does not work; if you put it in your index.html with <style is="custom-style"> it should work fine, as @platosha mentioned. The requirement for is="custom-style" is a constraint of Polymer's custom properties shim. (It will also work fine if you switch to native CSS properties instead.) For styles defined in Angular templates, is="custom-style" gets lost when the style is inserted in the DOM, unless remedied by something like angular-polymer - and this is part of what got broken since v2.2+, as @platosha mentioned. (Incidentally, this likely has nothing to do with Shady DOM, without extra help is="custom-style" will be lost with native Shadow DOM as well, I think.)

from angular-polymer.

@tallaxes Totally agree. I was just talking about how Angular handles normal CSS without is="custom-style" :)

from angular-polymer.

It works when I add the <style is="custom-style">vaadin-grid{...}</style> in the <head/> tag of my index.html file.

Thank you very much.

from angular-polymer.