0

I upgraded to polymer_elements: 1.0.0-rc.6 and all my class='horizontal layout' now are displayed as vertical.

.html

    <div class = "layout horizontal">
      <span class = "margin-rt-5px">[[prefixx]]</span>
      <paper-toggle-button
          on-change = "toggleEvent">[[suffixx]]
      </paper-toggle-button>
    </div>

The div's children are vertically aligned, not horizontally as expected.

When I revert to polymer_elements: 1.0.0-rc.5, the horizontal layout is as expected.

There is some break in the API.

Thanks

Community
  • 1
  • 1
st_clair_clarke
  • 5,453
  • 13
  • 49
  • 75

1 Answers1

1

In order to use the layout classes safely you need to import them explicitly. Most likely before you were getting them via a transitive import which has since been removed. In dart code the import would look something like this:

import 'package:polymer_elements/iron_flex_layout/classes/iron_flex_layout.dart'
    as layout_styles;

/// Uses [layout_styles]
main() { ... }

(I imported it with a prefix and used the doc comment to hide the unused import warning)

You can also use an html import if you prefer that, but need to be careful about which packages dir you point at. For entry points it would look like the following:

<link rel="import" href="packages/polymer_elements/iron_flex_layout/classes/iron_flex_layout.html">
Jake MacDonald
  • 1,348
  • 6
  • 7
  • Is there a rationale behind this change. I appreciate anything that helps me to write less code - this change means I have to write more code. Does this also apply to use of all polymer_elements as well? – st_clair_clarke Jan 14 '16 at 01:49
  • It works this way so that everybody isn't forced into downloading that stylesheet even if they don't use those styles. I don't think anything has changed in this regard, you were probably just getting the styles via a transitive import before without realizing it. – Jake MacDonald Jan 19 '16 at 15:15