search

Tradeshift / tradeshift-ui

The Tradeshift UI Library & Framework
https://ui.tradeshift.com
Other
33 stars 45 forks source link

[Topbar] Tabs not rendered in correct order #561

Closed Chris-Xie closed 6 years ago

Chris-Xie commented 6 years ago

Choose the section that applies to you and use the template to help us figure out how we can help you.

Bug report

See https://codepen.io/anon/pen/vdorma Toolbar tab should be the 4th tab but was rendered as the 2nd one.

Tradeshift UI version affected

v9.3.13 It seems to be fixed in v10 but it would be nice to see whether there's a quick / easy fix in v9 as a patch.

Expected Behavior

Actual Behavior

Steps to reproduce

Screenshots (optional)

Feature request

Description of feature

Example use cases and/or Prototype links

Designs and/or Prototype screenshots

wiredearp commented 6 years ago

The big difference between version 9 and 10 is that you now must include the CSS manually next to the JS - like this:

<link rel="stylesheet" href="ts-10.0.10.min.css"/>
<script src="ts-10.0.10.min.js"></script>

In version 9, the JS file would simply inject the CSS. This however glitches in recent versions of Chrome due to a mix of factors (Chrome and WebKit doesn't always measure the window size correctly during load inside iframes or new windows; plus they changed how external CSS files are being loaded and evaluated) so you must now include the stylesheet in the HTML just like any other stylesheet. The good news is that you can do that today in version 9 already, you just need to assign this specific id to your link element:

<link rel="stylesheet" id="ts-css" href="cloudfront/ts-9.x.x.min.css"/>

The JS will then not inject the stylesheet and the browser will not recalculate the layout during this critical phase of rendering where it doesn't correctly measure the window size. This is believed to fix the glitch, but the bad news is that you rarely have access to the head section of the document in a standard V4 app, so in that case you may need to perform some hacking :grimacing:

There is a pull request open for merging version 10 into V4, but we are not able to give it much attention right now: https://github.com/Tradeshift/Apps-Server/pull/633. If the above hack doesn't work out for you, we may need to change our priorities and get that merged, so let us know how it works out :beer:

Chris-Xie commented 6 years ago

Will try it out, thanks.