Dynamically setting text height based on content height

[sweet_potato]

Hello! Still new to the Fitbit SDK, and there is one thing that I can't get my head around.

My scenario:
I'm retrieving lunch menu data from an API. I get text responses with dynamic text length back. My lunch menu view file looks like this for a single day:

<use id="monday" href="#view-header">
   <set href="text" attributeName="text-buffer" to="Monday"/>
</use>
<use href="#scrollview-item" display="flexible-height">
   <use id="monday-slot-1" href="#dynamic-textarea" fill="white">
      <set href="#text" attributeName="text-buffer" to=""/>
      <!-- Allow 256 characters in lunch menu -->
      <set href="#text" attributeName="text-length" to="256"/>
   </use>
</use>
<use href="#scrollview-item" display="flexible-height">
   <use id="monday-slot-2" href="#dynamic-textarea" fill="white">
      ...
   </use>
</use>

The #view-header mimics the example from here.

I thought this would make the textboxes adjust to their content height when filled out with text from JavaScript, but I guess Fitbit's implementation is even more barebones than that. What I get is a view that doesn't scroll all the way to the bottom.

Any pointers to how I can dynamically do this adjustment? It should sure be possible... right?

[kozm0naut]

I don't have experience with the scrollview widget, but off the bat are you making sure to use these inside of 

<use href="#scrollview">

However I may not be understanding the nature of the problem. If this doesn't help, perhaps you can provide a screenshot as an example of what you're seeing?

[sweet_potato]

Yeah, I made sure to use it inside a scrollview.

Trying to populate the first three slots with this text:

[18:18:35]       App: Filled out monday-slot-1 with text Flygande Jacob, (kycklinggratäng med ris, chiligräddsås, banan serveras med bacon & jordnötter vid sidan av)                                               (app/index.js:111,17)
[18:18:35]       App: Filled out monday-slot-2 with text Räkgryta Indienne med ris, en favorit i repris                                                                                                   (app/index.js:111,17)
[18:18:35]       App: Filled out monday-slot-3 with text Tandoorigryta med grönsaker, serveras med ris och mango chutney  

Gives me the following result: see video: https://files.catbox.moe/735he9.mov

The full page code is:

<svg>
  <animate attributeName="x" from="100%" to="0" begin="load" dur="0.5" easing="ease-in-out" />
    <!-- Lunch menu -->
    <svg id="lunchMenu" pointer-events="all">
        <use href="#scrollview" id="#main-scrolling">
            <use id="monday" href="#view-header">
                <set href="text" attributeName="text-buffer" to="Måndag"/>
            </use>
            <use href="#scrollview-item" display="flexible-height">
                <use id="monday-slot-1" href="#dynamic-textarea" fill="white">
                    <set href="#text" attributeName="text-buffer" to=""/>
                    <!-- Allow 256 characters in lunch menu -->
                    <set href="#text" attributeName="text-length" to="256"/>
                </use>
            </use>
                <use href="#scrollview-item" display="flexible-height">
                    <use id="monday-slot-2" href="#dynamic-textarea" fill="white">
                        <set href="#text" attributeName="text-buffer" to=""/>
                        <!-- Allow 256 characters in lunch menu -->
                        <set href="#text" attributeName="text-length" to="256"/>
                    </use>
                </use>
                <use href="#scrollview-item" display="flexible-height">
                    <use id="monday-slot-3" href="#dynamic-textarea" fill="white">
                        <set href="#text" attributeName="text-buffer" to=""/>
                        <!-- Allow 256 characters in lunch menu -->
                        <set href="#text" attributeName="text-length" to="256"/>
                    </use>
                </use>
                <use href="#scrollview-item" display="flexible-height">
                    <use id="monday-slot-4" href="#dynamic-textarea" fill="white">
                        <set href="#text" attributeName="text-buffer" to=""/>
                        <!-- Allow 256 characters in lunch menu -->
                        <set href="#text" attributeName="text-length" to="256"/>
                    </use>
                </use>
                <use href="#scrollview-item" display="flexible-height">
                    <use id="monday-slot-5" href="#dynamic-textarea" fill="white">
                        <set href="#text" attributeName="text-buffer" to=""/>
                        <!-- Allow 256 characters in lunch menu -->
                        <set href="#text" attributeName="text-length" to="256"/>
                    </use>
                </use>
            </use>
    </svg>
</svg>