Update Style/Remove Attribute

Question

I need remove style attribute of a div

Line 85 https://github.com/PolymerElements/app-layout/blob/master/app-toolbar/app-toolbar.html

::content > [condensed-title] {
        pointer-events: none;
        @apply(--layout-flex)*;
      }

*(I don't wanna apply flexbox to [condensed-title] in a espefic head component I had made)

Line 133 https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html

    --layout-flex: {
  -ms-flex: 1 1 0.000000001px;
  -webkit-flex: 1;
  flex: 1;
  -webkit-flex-basis: 0.000000001px;
  flex-basis: 0.000000001px;
};

My code

<app-toolbar>
        <div class="logo-title">
          <iron-icon icon="custom-icons:casinha"></iron-icon>
        </div>
        <div id="outAlert" condensed-title>
          <paper-icon-button icon="card-membership"></paper-icon-button>
        </div>
        <div class="sublogo-title">
          <h4>Sublogo</h4>
        </div>
      </app-toolbar>

score 0 · Answer 1 · answered Mar 31 '17 at 13:56

You can achieve this in 3 three ways

You can style #outAlert in your element and set flex: 0. This will overwrite app-layout's styling.
```
#outerAlert {
    flex: 0;
}
```

Use inline style to overwrite flex and set it to 0

 <div id="outAlert" condensed-title style="flex:0">

And lastly overwrite the --layout-flex mixin for the app-layout where you don't want flex to be there.

app-layout {
   --layout-flex: {
      flex: 0; /* You can have any other value also. Not sure if empty mixin will work or not */
   };
}

Thanks, your ideias were very helpful. – Jeanderson Cruz Nascimento Mar 31 '17 at 15:27 — Jeanderson Cruz Nascimento, Mar 31 '17 at 15:27

score 0 · Accepted Answer · answered Mar 31 '17 at 15:25

0

I solved problem using following code:

      #outAlert{
        @apply(--layout-flex-none);
      }

answered Mar 31 '17 at 15:25

Jeanderson Cruz Nascimento

47
6

Update Style/Remove Attribute

2 Answers2