polymer_elements: 1.0.0-rc.6 convert horizontal layout to vertical layout

Question

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

Answer 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">