CollapseAt doesn't collapse the nav at the expected spot.

[ppeyro]

Expected behavior and actual behavior:

Used collapseAt to set a breaking point where the horizontal nav would collapse into the menu nav. The collapse happens +95 pixels from the expected spot.

Environment:

App-Nav: Master-7/18 evening Pull
Browsers: Chrome

Screenshot:

Collapse at set to 950, but happens at 1045px:

Code example:

<px-app-nav
        items='[
          { "label" : "Home", "id" : "home", "icon" : "px-fea:attribute" },
          { "label" : "Alerts", "id" : "alerts", "icon" : "px-fea:alerts" },
          { "label" : "Dashboards", "id" : "dashboards", "icon" : "px-fea:dashboard", "children": [
            { "label" : "See Live Truck View", "id" : "trucks" },
            { "label" : "Track Orders", "id" : "orders" },
            { "label" : "Analyze Invoices", "id" : "invoices" }
          ]},
          { "label" : "Assets", "id" : "assets", "icon" : "px-fea:asset" },
          { "label" : "Analytics", "id" : "analytics", "icon" : "px-fea:analytics" },
          { "label" : "Alarms", "id" : "alarms", "icon" : "px-obj:line-og" }
        ]'

        collapse-at="950"
...

/cc @davidrleonard

[davidrleonard]

We found the issue: The collapse-at value is measuring the size of the container available to the px-app-nav element, not the window size. Therefore, if there is a scroll bar (or anything else that shrinks the available width of the px-app-nav el below the viewport width), the element may collapse before the window hits the collapse-at value. This should be documented.