Label Component Creates Scroll Bar When not at view edge

We use the label component to represent conveyors, in essence the color is changed to represent the conveyor state. The following is an issue I am seeing. I have tested this in 8.1.13 and 8.1.16.

When we have a conveyor in a coordinate view horizontally, it can be moved all the way to the edge of the view and not until it crosses the edge does a scroll bar appear, as follows:

At the edge but not yet over

Across the edge a scroll bar appears as expected

However, when the label is rotated 90 degrees, it causes a scroll bar even when it is not pressed up against the edge. It is as if the label still take the horizontal space it did in the above photos.

Even when not against the edge, a scroll bar appears

What want is to be able to push it right up against the edge if needed without having the scroll bar appear. Note that we have to use coordinate containers to do conveyor layouts.

Is there any work around for this?



Answering my own question here, you have to add the overflow parameter under styles and set it to hidden.

I think overflow should be shown by default. It can be confusing when you have to add a parameter that you think doesn’t exist. Same can be said of the style parameter “classes” in many places.



Here’s one possibility.

  1. Don’t rotate the label. Adjust the aspect ratio instead (see 3).
  2. Rotate the text instead. You can bind the height to `props.position.height’ to automate the fill background.
  3. x & y will update as you reposition the conveyor. Swap the width and height values to get the same size as your original “unrotated” version.