<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Toolbar problem</title>
<script src="http://www.polymer-project.org/components//webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/paper-tabs/paper-tabs.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
</head>
<body>
<div>
<style scoped>
paper-tabs {
border:thin solid blue;
}
paper-icon-button {
border:thin solid red;
}
paper-tabs /deep/ core-icon {
border:thin solid lime;
}
</style>
<template id="widther" is="auto-binding" repeat="{{widths}}">
<h2 style="margin-bottom:0;">{{width}}</h2>
<p>{{description}}</p>
<paper-tabs style="{{'width: ' + width}}">
<paper-tab><paper-icon-button icon="archive"></paper-icon-button></paper-tab>
<paper-tab><paper-icon-button icon="archive"></paper-icon-button></paper-tab>
<paper-tab><paper-icon-button icon="archive"></paper-icon-button></paper-tab>
</paper-tabs>
<hr>
</template>
<script>
document.querySelector('#widther').widths =
[{
width: '100px',
description: "Can't see icon finish, this is too narrow"
}, {
width: '130px',
description: "Can just manage to see the icon, but 1px too narrow"
}, {
width: '150px',
description: "At 150px we should be able to see the icons fully. But they are not centered within the red boxes"
}, {
width: '170px',
description: "Getting closer..."
}, {width:'250px', description: 'Centered correctly'}];
</script>
</div>
</body>
</html>