CODEWITHSUNDEEP
pythonkivyscrollview
user11809703
user11809703

Reputation: 87

Kivy scrollview boxlayouts are on top of each other

my code is as below. I use scrollview to make my screen scrollable. It's working fine with the fillers. However, my boxlayouts are on top of each other. I have been messing around with size_hint_y but no luck. What did I do wrong here? All I want is the label and text input are on their own line as the filler rows. 

from kivy.uix.gridlayout import GridLayout
from kivy.uix.scrollview import ScrollView
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.button import Button
from kivy.lang import Builder

KV = '''
<MyLabel@Label>:
    size_hint:1,None

<ExampleScreen>:
    BoxLayout:
        orientation: 'vertical'
        Label:
            text: 'title'
            size_hint_y: .0625
        ScrollView:
            size_hint: 1,.2
            BoxLayout:
                size_hint: 1,None
                height: self.minimum_height
                cols: 1

                GridLayout:
                    size_hint: 1,None
                    height: self.minimum_height
                    cols: 1
                    rows: 8                    

                    BoxLayout:                             
                        size_hint_y:.125
                        height: self.minimum_height                   
                        Label:                              
                            size_hint_x:40
                            text: "Name of item: "                                

                        TextInput:                                
                            size_hint_x:60                                                               
                            hint_text: 'Name of the item'

                    BoxLayout:                        
                        size_hint_y:.125
                        height:self.minimum_height
                        Label:                    
                            size_hint_x:40
                            text: "Description: "

                        TextInput:                                                     
                            size_hint_x:60                        
                            hint_text: 'Description of the item'



                    MyLabel:
                        text: 'Filler'
                    MyLabel:
                        text: 'Filler'
                    MyLabel: 
                        text: 'Filler'
                    MyLabel:
                        text: 'Filler'
                    MyLabel:
                        text: 'Filler'
                    MyLabel:
                        text: 'Filler'

        BoxLayout:
            height: "60dp"
            size_hint_y:None
            Button:
                text: "Back"                
                on_release:
                    root.manager.transition.direction = "right"
                    root.back()


            Button:
                text: "Attach an image"                
                on_release:
                    root.manager.transition.direction = "right"
                    root.attachanimage()

            Button:
                text: "Submit"
                on_press:
                    app.get_running_app().display_loading_screen()
                on_release:
                    root.manager.transition.direction = "left"                    
                    root.submit()                

'''

class ExampleScreen(Screen):
    pass

kv = Builder.load_string(KV)

sm = ScreenManager()

sm.add_widget(ExampleScreen(name = 'example'))

class TestApp(App):
    def build(self):
        return sm

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

Upvotes: 0

Views: 526

Answers (1)

John Anderson
John Anderson

Reputation: 38822

I think the problem is that you need to set the height of either the Labels or the TextInputs that are in the BoxLayouts. My solution is to set the size of the Labels and set the size_hint_y for the BoxLayouts to None:

                BoxLayout:                             
                    size_hint_y: None
                    height: self.minimum_height                   
                    Label:  
                        size_hint_x:40
                        size_hint_y: None
                        height: self.texture_size[1] + 10
                        text: "Name of item: "                                

                    TextInput:
                        size_hint_x:60                                                               
                        hint_text: 'Name of the item'

                BoxLayout:  
                    size_hint_y: None
                    height:self.minimum_height
                    Label: 
                        size_hint_x:40
                        size_hint_y: None
                        height: self.texture_size[1] + 10
                        text: "Description: "

                    TextInput:  
                        size_hint_x:60                        
                        hint_text: 'Description of the item'

Generally, you need to set the appropriate size_hint to None in order for size, width, or height to have an effect. You can leave out the height: for the Labels, but the Label seems to use more height than is needed. Also consider whether your TextInputs need more than one line.

Upvotes: 1

Related Questions