ToggleButtons

[SunsetRunner]

My ToogleButtons have no text or image

I tried to do the same thing, like here:

https://dev.fitbit.com/guides/user-interface/components/#toggle-buttons

<svg>
<svg y="5" height="70">
    <!-- toggle button OFF -->
    <use id="btn-off" href="#square-button-toggle" fill="fb-light-gray">
      <set href="#text"  attributeName="text-buffer" to="Off" />
    </use>
    <!-- toggle button ON -->
    <use id="btn-on" href="#square-button-toggle" x="50%" fill="fb-green">
      <set href="#text"  attributeName="text-buffer" to="On" />
    </use>
  </svg>
  <svg y="$">
    <!-- toggle button NO -->
    <use id="btn-no" href="#square-button-toggle" value="1" fill="fb-red">
      <set href="#text"  attributeName="text-buffer" to="No" />
      <set href="#image" attributeName="display" to="inline" />
      <set href="#image" attributeName="href" to="shuttle.png"/>
    </use>
    <!-- toggle button YES -->
    <use id="btn-yes" href="#square-button-toggle" x="50%" fill="fb-green">
      <set href="#text"  attributeName="text-buffer" to="Yes" />
      <set href="#image" attributeName="display" to="inline" />
      <set href="#image" attributeName="href" to="shuttle.png"/>
    </use>
  </svg>
</svg>

Console

[22:12:22]Error 22 Invalid value '#text'
[22:12:22]Error 22 Invalid value '#text'
[22:12:22]Error 22 Invalid value '#text'
[22:12:22]Error 22 Invalid value '#image'
[22:12:22]Error 22 Invalid value '#image'
[22:12:22]Error 22 Invalid value '#text'
[22:12:22]Error 22 Invalid value '#image'
[22:12:22]Error 22 Invalid value '#image'

[SunsetRunner]

Also a problem with ButtonWithIcon:

https://dev.fitbit.com/guides/user-interface/components/#button-with-icon

Text and icon are displayed, but the icon is above the text instead before the text.

[SunsetRunner]

Doesn't anyone have an idea?

[JonFitbit · Accepted solution]

This may change in the next update, trying to understand if this is a bug or a change:

<svg>
  <svg y="5" height="70">
    <!-- toggle button OFF -->
    <use id="btn-off" href="#square-button-toggle" fill="fb-light-gray">
      <set href="button-content/text"  attributeName="text-buffer" to="Off" />
    </use>
    <!-- toggle button ON -->
    <use id="btn-on" href="#square-button-toggle" value="1" x="50%" fill="fb-green">
      <set href="button-content/text"  attributeName="text-buffer" to="On" />
    </use>
  </svg>
  <svg y="$">
    <!-- toggle button NO -->
    <use id="btn-no" href="#square-button-toggle-icon" value="1" fill="fb-red">
      <set href="button-content/text"  attributeName="text-buffer" to="No" />
      <set href="button-content/image" attributeName="href" to="steps.png"/>
    </use>
    <!-- toggle button YES -->
    <use id="btn-yes" href="#square-button-toggle-icon" x="50%" fill="fb-green">
      <set href="button-content/text"  attributeName="text-buffer" to="Yes" />
      <set href="button-content/image" attributeName="href" to="steps.png"/>
    </use>
  </svg>
</svg>

[JonFitbit]

---

@SunsetRunner wrote:

Also a problem with ButtonWithIcon:

https://dev.fitbit.com/guides/user-interface/components/#button-with-icon

Text and icon are displayed, but the icon is above the text instead before the text.

---

Check your CSS isn't applying any x/y coordinates to `text` elements.

[SunsetRunner]

href="button-content/text" 

That was the right tip, thank you. But my solution was a 1to1 copy from the website.