Canvas + TextInput | Cursor and text dissapear.

[diegoped...@gmail.com]

Hi everyone.

I'm trying to create a custom TextInput but when i add canvas.before the text and the cursor disappear. 

This is the widget:

<StringText@TextInput>

    background_color: 0, 0, 0, 0  

    foreground_color: 1, 1, 1, 1 # White text color

    cursor_color: 0.2, 0.6, 1, 1

    canvas.before:

        Color:

            rgba: 1, 0.5, 0, 1 # Border/Background Color

        RoundedRectangle:

            pos: self.pos

            size: self.size

            radius: [15,] # Define the border radius here

           

        Color:

            rgba: 0, 0, 0, 1 # Inside Input Field Color

        RoundedRectangle:

            pos: self.x + 2, self.y + 2

            size: self.width - 4, self.height - 4

            radius: [13,]

This is inside the kv file

<MainScreen@Screen>:

    name: 'main'

    BoxLayout:

        orientation: 'vertical'

        #padding: 20

        #spacing: 10

        Label:

            text: 'Username'

            size_hint:(0.3, 0.15)

            font_size: 14

        StringText:

            id: UserName_login

            text: "Enter text..."

            size_hint:(0.3, 0.1)

            pos_hint: {'center_x': 0.5}

     

        Label:

            size_hint:(0.3, 0.15)

            text: 'Password'

            font_size: 14

        TextInput:

I attached an image with the comparation, it's not possible to see the text and the cursosr. Do you have any ideas?

[ElliotG]

If you look in kivy/data you can find style.kv  this file contains the kv code the TextInput.

If you copy this code into your program, you can redefined how you want the TextInput to work.

read: https://kivy.org/doc/stable/api-kivy.lang.html#redefining-a-widget-s-style

Below is the code from style.kv.  The "-" before TextInput means you are redefining the KV for TextInput.  Edit this to get what you want.

<-TextInput>:
    canvas.before:
        Color:
            rgba: self.background_color
        BorderImage:
            border: self.border
            pos: self.pos
            size: self.size
            source: self.background_active if self.focus else (self.background_disabled_normal if self.disabled else self.background_normal)
        Color:
            rgba:
                (self.cursor_color
                if self.focus and not self._cursor_blink
                and int(self.x + self.padding[0]) <= self._cursor_visual_pos[0] <= int(self.x + self.width - self.padding[2])
                else (0, 0, 0, 0))
        Rectangle:
            pos: self._cursor_visual_pos
            size: root.cursor_width, -self._cursor_visual_height
        Color:
            rgba: self.disabled_foreground_color if self.disabled else (self.hint_text_color if not self.text else self.foreground_color)

 

Another option  would  be to change the background_active and backgroud_normal images create a .png file to replace the default images and replace them with an image that contains the outline of a rectangle.  Set the foreground and cursor colors as required.