text Input height ?

[moolight-seashell]

i cannot get how to use textInput ?

fist i've skipp TextEdit because i cannot customize it as i want

i want my textinput in a rectangle (color and rouded corners)

what i expect

• when there is no text, the rectangle has the size of a sigle line of text (with marging for the rouded corners)
• when there is mutiple lines of text, having the correct size (compute the rectangle size using the text space inside)
• when there mores line than a setting (max-amount-of-line, or max-heint) set the rectangle to max-heigt and make the text scorllable

i've try a lot of things but the TextInput behavior looks very in-intuitive

export component testText inherits Rectangle {
    in-out property <string> text : "abcdefghijklmnopqrstuvwxyzabcdefghijklmn";
    in-out property <length> font-size : 14px;
    property <int> size;

    background: blue;
    border-radius: 30px;
    min-height: font-size*2.5;

    VerticalLayout {
        padding: parent.border-radius/2;

        ScrollView {
            vertical-scrollbar-policy: always-on;

            Rectangle {
                background: green;
            }

            property <int> hg : 20;

            TextInput {
                vertical-alignment: center;
                height: 20px;
                page-height: 20px;
                font-size: 15px;
                single-line: false;
                text: text;
                edited => {
                    text = self.text;
                    hg = self.height/1px;
                }
            }
            Text {
                text: hg;
                x:0px;
                y:50px;
            }
        }
    }
    Text {
        text: parent.width/1px;
        x: 5px;
        y: 5px;
    }

[hunger]

Does setting the height of the TextInput to self.preferred-height do what you want it to do?

[moolight-seashell]

it's better but this does not solve the case when i have a single line wraped by the TextInput width

I've put aside the Scrollview.
because it will be possible to dynamically calculate its size with states
when we're able to get a correct height value.

export component testText {
    in-out property <string> text : "abcdefghijklmnopqrstuvwxyzabcdefghijklmn";
    in-out property <length> font-size : 14px;
    property <int> size;

    VerticalLayout {
        Rectangle {
            background: red;
        }

        Rectangle {
            background: blue;
            TextInput {
                vertical-alignment: center;
                height: self.preferred-height;
                font-size: 15px;
                single-line: false;
                text: text;
            }
        }
    }
}

[antis81]

Is it better if you split the components (like actually something like MyTextEdit) and put a layout around the TextInput?

component MyTextEdit inherits Rectangle {
    padding <=> layout.padding;  // NOTE:  link the (non-functional) padding prop to the layout (a rectangle is not a layout)

    layout := HorizontalLayout {
        TextInput { … }
    }
}

export component TheBiggerPicture {
    layout := VerticalLayout {
        MyTextEdit {
          background: blue;
          padding: 17px;
       }
    }
}

[moolight-seashell]

What this example seems to do is prevent the width from being smaller than the line of text, using the HorizontalLayout.

But that's not what I'm trying to do.
I want to make widget like we found on sms app or any android chat app

I want the widget to do word wrap and adjust the height accordingly.

I don't really see how splitting the component helps with the problem.

[moolight-seashell]

So nobody know how to do this ?

because if we cannot manage line-wrap and text input height, this shoud definitly make this as an issue

[antis81]

Is this what you are aiming for?

import { AboutSlint, Button, VerticalBox, ScrollView, StyleMetrics } from "std-widgets.slint";

component MyTextInput inherits Rectangle {
    background: blue;

    padding <=> layout.padding;
    out property text <=> text.text;
    in property placeholder-text <=> text.accessible-placeholder-text;

    ScrollView {
        layout := HorizontalLayout {
            padding: StyleMetrics.layout-padding;
            text := TextInput {
                vertical-alignment: center;
                font-size: 15px;
                single-line: false;
                wrap: word-wrap;
            }
        }
    }
}

export component testText {
    in-out property <string> text: "abcdefghijklmnopqrstuvwxyzabcdefghijklmn";
    in-out property <length> font-size: 14px;
    property <int> size;

    VerticalLayout {
        Rectangle {
            background: red;
            vertical-stretch: 1;
        }

        HorizontalLayout {
            MyTextInput {
                horizontal-stretch: 1;
            }

            Button {
                text: "send";
            }
        }
    }
}

[moolight-seashell]

Wow, ok, TextInput is so confusing.

The wrap setting defaults to no-wrap.
In the docs, we can read: "no-wrap — The text won’t wrap, but instead will overflow."

In the documentation, by "overflow" they mean that the text will wrap and overflow, including beyond its parent container, into the global window space.

Worse than that, with this setting, self.preferred-height is not computed correctly.

And for some obscure reason, if the parent of the text is a layout, it sets a minimum width for the entire window, which then prevents resizing it to a smaller width.

In fact, I don't see any use case for such behavior, and especially for a default behavior.

By default, I would expect text that exceeds the window size not to be displayed at all.
Or possibly to be scrollable, but absolutely not to overflow into the overall window space.

So defining wrap a word-wrap makes everything work as expected.

export component testText {
    in-out property <string> text: "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz";
    in-out property <length> font-size: 14px;
    property <int> size;

    VerticalLayout {
        Rectangle {
            background: red;
        }
        Rectangle {
            background: blue;
            TextInput {
                vertical-alignment: center;
                font-size: 15px;
                single-line: false;
                wrap: word-wrap;
                height: self.preferred-height;
                text : root.text;
            }
            
        }
    }
}

very confusing

and I'm not sure I understand, depending on the components and the “if” “for” ...
the size of the elements is sometimes calculated by going down the hierarchy and sometimes by going up.

Making this more explicit would be much clearer.

[moolight-seashell]

It works partially without the scroll view, of course, you can't scroll.

except that with the scroll view, it completely breaks the height calculation in the parent layout
and the width inside the scroll view:

export component SendButton {
    callback clicked();

    Rectangle {
        background: purple;
        border-radius: 20px;


        ta := TouchArea {
            clicked => {
                root.clicked();
            }
        }
        states [
            active when ta.has-hover : {
                background : #ff71f3;
            }
        ]
    }
}

export component TextInput {
    in-out property <string> text : "abcdefghijklmnopqrstuvwxyzabcdefghijklmn";
    in-out property <length> font-size : 14px;

    in property <length> max-text-height : 150px;
    property <length> scroll-height;

    property <int> size;

    
    Rectangle { // used to define a background
        background: blue;
        border-radius: 20px;


            //ScrollView {
                //height: scroll-height;
                //viewport-height: tata.preferred-height;
                //width: 100%;
                //viewport-width: self.width;
                VerticalLayout { 
                    padding: 15px;
                    horizontal-stretch: 3;
                    alignment: center;

                    tata := TextInput {
                        vertical-alignment: center;
                        single-line: false;
                        text: root.text;
                        height: self.preferred-height;
                        wrap: word-wrap;
                        edited => {
                            root.text = self.text;
                        }
                    }

                }
            //}
            Text {
                x : 0px;
                width: 20px;
                text: tata.preferred-height/1px;
            }
    }

    states [
        active when tata.preferred-height > max-text-height: {
            //texte area is scrollable
            scroll-height : max-text-height;
        }
        active when tata.preferred-height <= max-text-height: {
            //texte area is not scrollable
            scroll-height : tata.preferred-height;
        }
    ]
}

export component send_area {
    property <string> text: "";
    callback send(string);

    Rectangle {
        background: #154481;
    }
    HorizontalLayout {
        padding: 10px;
        spacing: 10px;


        TextInput { width: 80%; }

        SendButton{
            horizontal-stretch: 1;
            clicked => {
                send(text);
            }
        }
    }
}

export component Demo inherits Window{
    min-height: 400px;
    VerticalLayout {
        Rectangle {
            background: red; // message area
        }
        send_area {

        }
    }
}

[antis81]

Don't expect working with low-level components to be simple! You need to break down your problem task in smaller steps. Working with lower-level components such as TextInput requires good understanding (and appreciation!) of Slint's design and layout concepts. Your custom TextEdit component should at least have the following structure:

component MyTextEdit {
  control-frame :=  Rectangle {  // controls background/border color, radius and clipping behaviour
    clip: true;  // only draws within the rectangle
    border-radius: 14px;  // You said your TextEdit should have rounded corners

    control-layout := HorizontalLayout {   // controls the padding (rectangle padding does not have any effect!)
      TextInput {  // controls only(!) the font and text and related stuff such as wrap behaviour
      }
    }
  }
}

If all you need is a TextEdit with rounded corners consider using the recently added Material UI with the provided TextEdit instead.

[moolight-seashell]

I finally found something that seems to work.

It seems that this require to force the size of both the rectangle and the scrollview.
not forgetting to take padding into account

export component TestScrollViewWithText {
    property <string> text: "test";
    property <length> scroll-height;
    property <length> max-text-height : 100px;
    in property <length> tpadding: 15px;

    height: 300px;
    width: 100px;
    VerticalLayout {
        Rectangle {
            background: red;
        }
        Rectangle {
            background: blue;
            border-radius: 10px;
            height: scroll-height + 2 * tpadding;
            ScrollView {
                height: scroll-height + 2 * tpadding;
                viewport-height: tata.preferred-height + 2 * tpadding;
                width: 100%;
                viewport-width: self.width;
                VerticalLayout { 
                    padding: tpadding;
                    alignment: center;

                    tata := TextInput {
                        vertical-alignment: center;
                        single-line: false;
                        text: root.text;
                        height: self.preferred-height;
                        wrap: word-wrap;
                        edited => {
                            root.text = self.text;
                        }
                    }
                }
            }
        }
    }
    states [
        active when tata.preferred-height > max-text-height: {
            //texte area is scrollable
            scroll-height : max-text-height;
        }
        active when tata.preferred-height <= max-text-height: {
            //texte area is not scrollable
            scroll-height : tata.preferred-height;
        }
    ]
}