2 Replies Latest reply on Dec 14, 2010 12:35 AM by TheGarfunkal

    Peculiar Skinned Scrollbar Behaviour

    TheGarfunkal

      hi.

       

      I've got weird stuff happening with a scroll bar in a datagrid.

       

      Basically, I've set it in the css, with a thinner thumb and track.  When I the page loads the track is thicker than the set one.  If I click the thumb it rests to the right size.  Even if I resize the browser it resets. Pretty Weird! 

       

      If I set the scroll policy to    verticalScrollPolicy="on" then its all good - but obviously that looks terrible if there is nothing to scroll. Leaving ut at default, or settign to auto creates this behaviour. This happens on all my datagrids, but not on canvas' etc.

       

       

      Any help would be awesome - cheers

       

      Couple of pics:

       

      scrolls.JPG

       

      and the code in the css:

       

      ScrollBar

      {

      up-arrow-skin: ClassReference(null);

      down-arrow-skin: ClassReference(null);

          thumbDownSkin:

              Embed(source="/assets/thumb.png",

              scaleGridLeft="7", scaleGridTop="5",

              scaleGridRight="8", scaleGridBottom="7");

       

          track-margin: 0;

       

          thumbUpSkin:

              Embed(source="/assets/thumb.png",

              scaleGridLeft="7", scaleGridTop="5",

              scaleGridRight="8", scaleGridBottom="7");

       

          thumbOverSkin:

              Embed(source="/assets/thumb.png",

              scaleGridLeft="7", scaleGridTop="5",

              scaleGridRight="8", scaleGridBottom="7");

       

          trackSkin:

              Embed(source="/assets/scrolltrack.png",

              scaleGridLeft="7", scaleGridTop="5",

              scaleGridRight="8", scaleGridBottom="7" );      

       

      and the datagrid:

       

      <mx:DataGrid 

      id="dgNewsSpecific"

      creationComplete="{PodContentBase.NewsSpecific()}"

      dataProvider="{PodContentBase._NewsSpecific}"

      showHeaders="false"

      borderStyle="none"

      verticalGridLines="false"

      alternatingItemColors="#E6E0EC"

      height="55%" y="55" width="95%"

      color="#5A2D7F">

      <mx:columns>

               <mx:DataGridColumn dataField="URL" headerText=" Link" width = "45" />

               <mx:DataGridColumn dataField="Text" headerText="News" textAlign="left"/>

      </mx:columns>

      </mx:DataGrid>