how to use scrollbars

[jpwrunyan]

Hello,
I am having trouble getting the scroll bar layout that I want. I have a horizontally scrollable table (like a grid) with a header and then fields underneath it. If the user scrolls horizontally, then the header and the fields both scroll left/right. But then there is also a vertical scroll for the rows underneath the header. I cannot figure out how to get this layout to work. The closest I have come is posted at the bottom.

I know why my current layout doesn't work, but like I said, I don't know how to get what I want. if you run the code I am sure you will realize immediately what I am trying to do as well as why my current code isn't working.


<?xml version="1.0" encoding="UTF-8" ?>
<canvas width="600" height="250">

<class name="HScrollView" defaultplacement="content" clip="true">
<view x="0" y="0" name="content">
</view>
<scrollbar id="sbx" axis="x" />
</class>

<class name="VScrollView" defaultplacement="content" clip="true">
<view x="0" y="0" name="content">
</view>
<scrollbar id="sby" />
</class>

<view x="50" y="10" width="500" height="200" bgcolor="0x999999">
<HScrollView bgcolor="0xFFFFAF" x="1" y="1" width="${parent.width-2}" height="${parent.height-2}">
<view name="header" x="1" y="1" height="20" bgcolor="0xFFFFDD">
<text>Header----------------------------------------------------------------------------------------------------------very long</text>
</view>
<VScrollView bgcolor="0xFFFFAF" x="1" y="${parent.header.height+1}" width="${parent.width}" height="${parent.height-parent.header.height-2-sbx.height}">
<simplelayout axis="y" spacing="5" />
<text>asdf</text>
<text>asdf</text>
<text>asdf</text>
<text>asdf</text>
<text>asdf ================================================== ================================================== ==================very long</text>
<text>asdf</text>
<text>asdf</text>
<text>asdf</text>
<text>asdf</text>
<text>asdf</text>
<text>asdf</text>
<text>asdf</text>
<text>asdf</text>
</VScrollView>
</HScrollView>
</view>

</canvas>

[mmeyer]

I two most important things that I have learned about scrollbars is:

1) There must be an outer view with clip="true" and an inner view. Between the 2 </view> tags is where the scrollbar defintions should be.

2) Make sure the width of the vertical scrollbar is accounted for or else it won't display.

<view name="vwstr" id="vwstr" height="${immediateparent.height}" width="${immediateparent.width}" clip="true">
<view width="${immediateparent.width-vs_scrollbar.width}">
---- Some text fields or whatever hear ----
</view>
<vscrollbar id="vs_scrollbar" />
</view>

[newbie2]

Hi There,

I am also haveing problems with scrollbars. I have a tab element with 3 tab sliders. i've used the exact same logic to define my scrollbars in 2 of the 3 sliders (don't need one in the 3rd one). The scrollbar in slider#1 shows up and is active, but the one in Slider#2 shows up and is NOT active. I've tried all of the suggestions I could find but none of them work.

Please help :-)

Here is my rowofinputtext class:

<class name="rowofinputtext" extends="view" y="10">
<attribute name="val1" type="string"/>
<attribute name="val2" type="string"/>
<attribute name="val3" type="string"/>
<attribute name="val4" type="string"/>
<attribute name="val5" type="string" />
<attribute name="val6" type="string" />
<edittext width="20" name="rowofinputtext1" text="${classroot.val1}" x="10"/>
<edittext width="60" name="rowofinputtext2" text="${classroot.val2}" />
<edittext width="60" name="rowofinputtext3" text="${classroot.val3}" />
<edittext width="80" name="rowofinputtext4" text="${classroot.val4}" />
<edittext width="100" name="rowofinputtext5" text="${classroot.val5}" />
<edittext width="10" name="rowofinputtext6" text="${classroot.val6}" visible="false" />
<simplelayout axis="x" spacing="20"/>
</class>


Here is Slider #1 (scrollbar works)
<tabelement text="Test Setup Data" selected="true" clip="true" >
<view id="test" visible="false" datapath="tmpGetSeqNum:/seq/info">
<attribute name="seqno" type="number" value="$path{'@seqno'}" />
<attribute name="seqn1" type="number" value="${test.seqno++}"/>
</view>

<view id="SetupRslts" x="0" y="0" width="${parent.width}" height="${parent.height -15}" bgcolor="silver" datapath="${canvas.s2datapath}" clip="true" queuerequests="true">
<view width="${parent.width}" x="20" y="10">
.... data here
<simplelayout axis="y" spacing="10" inset="10"/>
</view>
<vscrollbar/>
</view> <!-- end of view SetupRslts -->
</tabelement>


Here is where I try to implement the scrollbar (slider#2)



<tabelement text="Test Measurements" clip="true">
<view x="0" y="0" id="TMGWindow" bgcolor="silver" width="${parent.width}" height="${parent.height-18}"
datapath="${canvas.tdatapath}" >

<view x="0" y="0" width="${parent.width-5}" >
<text name="title1" x="10" width="60" fontstyle="bold" fontsize="12">Stage</text>
<text name="title2" x="70"
fontstyle="bold" fontsize="12" width="70" text="${canvas.msrDataTitle1}" />
<text name="title3" x="120"
fontstyle="bold" fontsize="12" width="85">Heart Rate</text>
<text name="title4" x="200"
fontstyle="bold" fontsize="12" width="70">Lactate</text>
<text name="title5" x="320"
fontstyle="bold" fontsize="12" width="125">Minutes per stage</text>
</view>

<view name="forscrollbar" clip="true" y="25" width="${parent.width-5}" height="${parent.height -25}" scrollbar="true">
<view x="18" width="${parent.width-5}" height="${parent.height}" >
<rowofinputtext id="mytestmsmtsview" val1="$path{'@tmstage'}" val2="$path{'@value1'}" val3="$path{'@value2'}"
val4="$path{'@value4'}" val5="$path{'@value7'}" val6="$path{'@tmrid'}" >
<datapath xpath="${canvas.tdatapath}" pooling="false" rerunxpath="true"
ondata="mytestmsmtsview.datapath.updateData()"/>
</rowofinputtext>
<simplelayout axis="y" spacing="10"/>
</view>
<vscrollbar/>

</view>
</view> <!-- end of view TMG-->
</tabelement>