RexUI Slider - Easy Check if slider has to be visible

Phaser 3
1

Hi,

i’m using the rex-ui slider component in my game (e.g. for the rex-ui Table / TextArea).

Is there any easy way to check if the slider is needed or not?
For example:
TextArea starts with a short text, no overlfow => hide slider
TextArea gets update with long text, overflow => show slider
TextArea gets update short text, no overflow => hide slider

How to check if slider can scroll or not?

i’ve tried this:

let txtEl = this.getElement("text");
        this.getElement("slider").setVisible( txtEl.height > this.height );

But mny “txtEl” has allways the same height, regadless of the text i add.

For tables i extend the Rex-Table Class and overwrite the “setItems” method:

    setItems( items ){
        super.setItems( items );
        let showScrollbar = this.items.length > this.getElement("table").visibleCells.entries.length;
        if( this.items.length == 0 ) showScrollbar = false;

        // check item overlapping
        if( !showScrollbar && this.items.length > 1){
            let lastItemBounds = this.getCellContainer( this.items.length -1 ).getBounds();
            let tableBounds = this.getBottomLeft();
            showScrollbar =  lastItemBounds.y + lastItemBounds.height > tableBounds.y;
        }

        this.getElement("slider").setVisible( showScrollbar );
        return this;
    }

But i think there should be some easyer way or even an option on the rex-plugins like “showOnOverflow” or something like this :wink:

Greetings!
Puccini

2

And a second question to this:
how to resize a textarea after initialisation :slight_smile:
:wink: Thx!

3

Please get the latest version of rexUI minify file.

Add a new property isOverflow into TextArea (also in ScrollablePanel, GridTable), return true if height of content is larger than display height. Test code

And here is a sample code of resize TextArea.

4

Wow, thx for this quick update!

But i dont know what i’m missing. I tried to update to latest version with npm, but it says: “up to date, audited 497 packages in 2s”

than i just “npm uninstall phaser3-rex-plugins; npm i phaser3-rex-plugins” and build new main file for my game with: “npm run build” ( using webpack).

I include this in my guiModule:

import { GridTable, TextArea } from '../../node_modules/phaser3-rex-plugins/templates/ui/ui-components.js';

Isnt this using the minifiy version / updated version?

Thank u so much!

5

I only update minify files, npm package won’t upgrade this week. Maybe next or next two weeks later.