How to set the scroll button background image to operate correctly?

1

I have a list view and use css to set the background image for the scroll ( how to set it using code ?!)
So I have

.common-list-scroll .scroll {
   background-color: #0b0b0b;
   border: none;
   opacity: 0.5;
}

.common-list-scroll .scroll .button {
   background-color: none;
   opacity: 1;
   background-image: lookup('common-list-scroll-image');
}

I load the following image and set it with StyleLookupMap.instance.set("common-list-scroll-image", <my_bitmapdata>);

I ) Here is the video with a list view to which I add few rows .
ScrollBackgroundImage

The problems are :

  1. Image common-list-scroll-image looks semi-transparent after I set opacity: 1;
    scrollImage

  2. Adding height in the css style did not change the size of the scroll button image .
    For that reason scrollbutton stops to move after the middle . There is no more rows ,but if I use background-color ( not an image), the button is much larger and operates fine.

II ) Here is video where I set background-color: #ff0000; ( to be more visible where the problem is) and use the backgroundImage too.
ScrollBackgroundImage_2

The height of the scroll button ( is auto-calculated ) and depends on the number of items in the list view, which is fine when using a background color, but not for a background image.

The other problems is refreshenig of the background image of the list view rows and for the buttons. As I mentioned in another post, if I add data before the images are fully loaded, they are not visible and appear after the hover event ( video above) . For the Image component, this problem does not exist.
Maybe changing the background image should invalidate the component and refresh it?

2

So as mentioned in the discord, i think there are two issues here:

The first is there is (currently) no way to say “stretch the background” to the size of the component. This should be fixable with an upcoming background-size css property.

The second is that currently, there is no way to say in a scrollview “always have the thumb of a fix size”, it will always calculate a size based on whats visible and whats not, but i do think a “fixed thumb size” property would be nice on scrollbars. Ill add it to the list.

Cheers,
Ian

1 Like
3

OK, there are some new propertes in haxeui that should help a little: http://haxeui.org/builder/?001b2561

namely:

  • Scrollview::scrollPolicy / hoizontalScrollPolicy / verticalScrollPolicy - can be “auto”, “always”, “never”
  • Scrollview::thumbSize / vscrollThumbSize / hscrollThumbSize - can give a fixed size to a scrollbar thumb (regardless of page size)
  • background-size css property. Can be % or px

These new properties should help with all of the above! :slight_smile:

Cheers,
Ian

4

FYI, i think in latest haxeui-core the “mouse over” thing should be fixed…