Custom element height 0px inside a template - polymer

Question

I have created a custom element,
When I put it inside a template, its height will be 0px, while it's not if I put it outside the template ...
<link href="//www.polymer-project.org/0.5/components/polymer/polymer.html" rel="import">
<link href="//www.polymer-project.org/0.5/components/paper-input/paper-input-decorator.html" rel="import">
<polymer-element name="dalilak-date-picker" attributes="selectedDate">
<template>
<style>
:host {
display: block;
}
</style>
<paper-input-decorator
label="date picker"
floatingLabel
error="Please enter the date in the following format dd/mm/yyyy "
isInvalid="{{isInvalid}}"
>
<input is="core-input" value="{{inputValue}}" on-input="{{inputChanged}}">
</paper-input-decorator>
</template>
<script>
Polymer('dalilak-date-picker', {
// source: http://stackoverflow.com/a/15504877/2407522
datePattern: /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/gm,
inputChanged: function() {
if (this.validateDate()) {
this.selectedDate = this.inputValue;
return;
}
this.selectedDate = null;
},
validateDate: function() {
this.isInvalid = !this.inputValue.match(this.datePattern);
return !this.isInvalid;
}
});
</script>
</polymer-element>
<template is="auto-binding">
<div vertical layout>
<dalilak-date-picker flex selectedDate="{{selectedDate}}"></dalilak-date-picker>
<div>
selected date is: {{selectedDate}}
</div>
</div>
</template>