CODEWITHSUNDEEP
pythonpython-3.xkivykivy-language
blakebullwinkel
blakebullwinkel

Reputation: 335

Kivy: How to add padding to a Text Input

Just a simple problem here - I would like to add some 'padding' to my text input box so as to align it with a label above it: see here

Here are the relevant sections of my .kv file:

<InstructionsLabel>:
    font_size: 24
    size_hint_y: None
    color: 0.447, 0.094, 0.737, 1
    text_size: root.width, None
    size: self.texture_size
    padding_x: 20

<LengthExactScreen>:
    canvas.before:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size
    FloatLayout:
        DirectionButton:
            text: "Back"
            pos_hint: {'left': 1, 'top': 1}
            on_press:
                root.manager.transition.duration = 0
                root.manager.current = "tool_screen"
        DirectionButton:
            text: "Done"
            pos_hint: {'right': 1, 'top': 1}
            on_press: root.compute_orders(root.itemList, int(len_exact_input.text))
    GridLayout:
        cols: 1
        pos_hint: {'top': 0.86}
        BoxLayout:
            size_hint_y: None
            height: self.minimum_height
            orientation: "vertical"
            InstructionsLabel:
                text: "Enter the number of items you want to order"
            TextInput:
                id: len_exact_input
                size_hint: None, None
                width: 300
                height: 35
                multiline: False
                hint_text: ""

Upvotes: 3

Views: 18435

Answers (3)

Ola Tuvesson
Ola Tuvesson

Reputation: 5221

Padding is internal to the TextInput and will only serve to make it larger - it won't help with aligning it to the text in a Label that has padding. Unfortunately Kivy has no concept of "margins", so the easiest way you can get the TextInput's box to align with a padded Label is to wrap it in a container that has a transparent background, and set the padding on that widget instead - effectively faking a margin. For example:

BoxLayout:
    orientation: "vertical"
    Label:
        text: "Hello World!"
        padding: dp(20), dp(10)
    BoxLayout:
        padding: dp(20), dp(10)
        TextInput:
            text: "Hello to you too!"

While frequently annoying, this behaviour makes perfect sense; the Label is a box with padding and a background, and just like the TextInput the Label grows when you add padding - it's just that you don't notice this since unlike the TextInput the Label doesn't have a background colour.

Upvotes: 0

supreme
supreme

Reputation: 361

you can also do some research @ kivy text input. that should give you all the information you need and more.

Upvotes: -3

PalimPalim
PalimPalim

Reputation: 3068

TextInput has also a padding property.

Change this to match the padding on your label

TextInput:
    padding_x:[20,0]

Here is a sample App I wrote to see that adopted from your code. Unfortunately, your code has several issues and it was easier to do it like that enter image description here

from kivy.app import App
from kivy.base import Builder
from kivy.uix.boxlayout import BoxLayout

Builder.load_string("""
<rootwi>:
    orientation: 'vertical'
    Label:
        font_size: 24
        text: 'iuqwdouqwdoqdwpqwpow'
        color: 0.447, 0.094, 0.737, 1
        text_size: root.width, None
        size: self.texture_size
        padding_x: 20
    TextInput:
        padding_x:[20,0]
""")
class rootwi(BoxLayout):
    pass

class MyApp(App):
    def build(self):
        return rootwi()


if __name__ == '__main__':
    MyApp().run()

Upvotes: 5

Related Questions