Tumbler View problem

[Sherkoka]

I playing now with the tumbler-view and the selected item every time the top element and not the middle element as documentation say.

the code:

widget.gui

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <!-- Additional Imports -->
    <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/panoramaview_widget.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/pagination_dots.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/tumblerview_widget.gui" />
  </defs>
</svg>

the tumbler

<svg>
   <image href="images/back.png" />
   <use id="hourminutes" href="#tumblerview">
     <use id="item0" href="#tumbler-item">
      <text id="content" class="my-item" >00</text>
    </use>
    <use id="item1" href="#tumbler-item">
      <text id="content" class="my-item">01</text>
    </use>
    <use id="item2" href="#tumbler-item">
      <text id="content" class="my-item">02</text>
    </use>
    <use id="item3" href="#tumbler-item">
      <text id="content" class="my-item">03</text>
    </use>
    <use id="item4" href="#tumbler-item">
      <text id="content" class="my-item">04</text>
    </use>
    <use id="item5" href="#tumbler-item">
      <text id="content" class="my-item">05</text>
    </use>
    <use id="item6" href="#tumbler-item">
      <text id="content" class="my-item">06</text>
    </use>
    <use id="item7" href="#tumbler-item">
      <text id="content" class="my-item">07</text>
    </use>
    <use id="item8" href="#tumbler-item">
      <text id="content" class="my-item">08</text>
    </use>
    <use id="item9" href="#tumbler-item">
      <text id="content" class="my-item">09</text>
    </use>
    <use id="item10" href="#tumbler-item">
      <text id="content" class="my-item">10</text>
    </use>
    <use id="item11" href="#tumbler-item">
      <text id="content" class="my-item">11</text>
    </use>
    <use id="item12" href="#tumbler-item">
      <text id="content" class="my-item">12</text>
    </use>
    <use id="item13" href="#tumbler-item">
      <text id="content" class="my-item">13</text>
    </use>
    <use id="item14" href="#tumbler-item">
      <text id="content" class="my-item">14</text>
    </use>
    <use id="item15" href="#tumbler-item">
      <text id="content" class="my-item">15</text>
    </use>
    <use id="item16" href="#tumbler-item">
      <text id="content" class="my-item">16</text>
    </use>
    <use id="item17" href="#tumbler-item">
      <text id="content" class="my-item">17</text>
    </use>
    <use id="item18" href="#tumbler-item">
      <text id="content" class="my-item">18</text>
    </use>
    <use id="item19" href="#tumbler-item">
      <text id="content" class="my-item">19</text>
    </use>
    <use id="item20" href="#tumbler-item">
      <text id="content" class="my-item">20</text>
    </use>
    <use id="item21" href="#tumbler-item">
      <text id="content" class="my-item">21</text>
    </use>
    <use id="item22" href="#tumbler-item">
      <text id="content" class="my-item">22</text>
    </use>
    <use id="item23" href="#tumbler-item">
      <text id="content" class="my-item">23</text>
    </use>
  </use>
</svg>

the css

.defaultText {
  font-size: 32;
  font-family: System-Regular;
  font-weight: regular;
  text-length: 32;
}
.my-item { font-size: 110; font-family: Seville-Book; fill: #ff6600; x: 5; y: 70; }

and the result: 

If I log the selected items that the top element:

[12:15:34]select event firedselectedIndex: 1 :: selectedValue: 01

Someone know where is the problem In my code? I follow the example in dev portal but not working 😞