ScrollView isn't working

[Antonio Peña]

Hello Community,

I am trying to create a ScrollView in order to make it possible to add several cards to the screen. If possible, I would like to make the circles scrollable as well.

The problem is that the circles appear like this:

When it should be:

Here is the code that runs into trouble, with the correct circles commented with #.

What is causing the bug? Why does the blank Widget doesn't appear? What is the best way to create scrolling screens? Are there good practices or general rules to apply? 

Thanks!

[Elliot Garbus]

I can not run your code, the get_configs() code in utils has not been provided.

 

I can see one issue, highlighted below.  You are setting the size of the widget without turning off the size_hint.

The height of the DoubleCircle also needs to be set.

 

ScrollView:
    size_hint: (1, 0.85)
    pos_hint: {"x":0, "top":1}
    do_scroll_x: False
    do_scroll_y: True

    effect_cls: 'ScrollEffect'

    BoxLayout:

        orientation: 'vertical'
        size_hint_y: None
        height: self.minimum_height

        size_hint_x: 1
        size_hint_y: None

        Widget:
            size_hint: None, None
            size: (100, 450) # -> Doesn't appear on the screen.
            pos_hint: {'center_x': 0.5}
            canvas.before:
                Color:
                    rgba: (1, 0, 0, 1)
                Rectangle:
                    size: self.size
                    pos: self.pos

 

 

 

From: Antonio Peña
Sent: Monday, March 14, 2022 5:57 AM
To: Kivy users support
Subject: [kivy-users] ScrollView isn't working

 

Hello Community,

 

I am trying to create a ScrollView in order to make it possible to add several cards to the screen. If possible, I would like to make the circles scrollable as well.

 

The problem is that the circles appear like this:

 

When it should be:

 

Here is the code that runs into trouble, with the correct circles commented with #.

 

What is causing the bug? Why does the blank Widget doesn't appear? What is the best way to create scrolling screens? Are there good practices or general rules to apply? 

 

Thanks!

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/b83db2f9-be5b-4596-a6fd-c012a03b60d9n%40googlegroups.com.

 

[Antonio Peña]

Sorry for the utils.py thing. It's can be an empty dictionary, though. Here is a functional code with KivyMD.

I've made some improvements in the code. Regarding the empty widget, I tried it with size_hint before but didn't work. Now it does. Either your words make Kivy work greatly or I made some tiny mistake before. I think they are both (hehe). 

Best wishes,

Antonio.

[Elliot Garbus]

I can’t figure out what you are trying to do.  If you can describe what you want the layout to look like, and how it should work I can provide more help.

 

I do see a few issues:

 

ScrollView:
    size_hint: (1, 0.85)
    pos_hint: {"x":0, "top":1}
    do_scroll_x: False
    do_scroll_y: True

    effect_cls: 'ScrollEffect'

    BoxLayout:
        orientation: 'vertical'
        size_hint_y: None
        height: self.minimum_height

        Widget:
            size_hint: 1, None
            # height: root.height * 0.2
            height: 700                  # setting the height to 700 I can see scrolling…

            pos_hint: {'center_x': 0.5}
            canvas.before:
                Color:
                    rgba: (1, 0, 0, 1)
                Rectangle:
                    size: self.size
                    pos: self.pos

        DoubleCircle:
            id: main_circles
            pos_hint: {'center_x': 0.5, 'center_y': 0.5}
            # size_hint: (root.width * 0.125, root.width * 0.125) # this makes no sense as a hint
            size_hint: None, None
            size: root.width, root.width  # set the size

            out_angle: 100
            out_circle_radius: root.height * 0.125 

            in_angle: 10
            in_circle_radius: root.height * 0.125 * 0.85 

            MDLabel:                   # you have a widget in another widget, don’t do this put widgets in layouts
                id: out_circle_text
                color: (156/255, 0, 1/255, 1)
                font_style: 'H3'
                text: '250'

                # font_name: 'ReadexPro'

                center_y: root.main_circles.center_y * 1.5
                center_x: root.main_circles.center_x
                halign: 'center'

 

When it should be:

 

Here is the code that runs into trouble, with the correct circles commented with #.

 

What is causing the bug? Why does the blank Widget doesn't appear? What is the best way to create scrolling screens? Are there good practices or general rules to apply? 

 

Thanks!

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/b83db2f9-be5b-4596-a6fd-c012a03b60d9n%40googlegroups.com.

 

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/1d1366e0-2999-41d1-b27d-21d0e5aa7075n%40googlegroups.com.

 

[Antonio Peña]

What I am trying to do is to create a screen similar to the Google Fit's one. It has several cards which you can scroll through, and the two big circles are moved and disappear from the screen.

The goal is to make that happen. The problem is that I don't get it working. The two circles and labels get stuck and I cannot reubicate them.

Regarding the size hint that isn't suitable, why is it not? Is not a good practice to give it a size hint using a width fraction?

Thank you,

Antonio.

You received this message because you are subscribed to a topic in the Google Groups "Kivy users support" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/kivy-users/bGDnX-oTQJ4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/622fe341.1c69fb81.ce80c.8b2dSMTPIN_ADDED_MISSING%40gmr-mx.google.com.

[Elliot Garbus]

A size hint sets a relative size for other widgets in the layout.  See: https://kivy.org/doc/stable/api-kivy.uix.layout.html?highlight=size_hint#understanding-the-size-hint-property-in-widget

 

Looking at the Google fit website, I would suggest putting a ScrollView at the top, you would have a BoxLayout under the ScrollView, and all of the cards in the BoxLayout.

You are using a lot of FloatLayouts, you may want to use other layouts (I have not looked deeply into your code).  FloatLayouts position everything in Window coordinates, you should probably be using more RelativeLayouts if required, ore even better just BoxLayouts.    

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/CACnT7V5Had4sz7t5ymLDegenf-cRCoub3U-AKtD6KO3b-%3D6C-A%40mail.gmail.com.

 

[Antonio Peña]

Hello ElliotG,

Thank you so much for taking the time to respond and for providing such a helpful response. I've tried with RelativeLayouts and BoxLayouts now and it works perfectly. Much better than FloatLayouts for these issues. I think the problem was in the size_hint_y I was giving to Widgets without placing them inside a RelativeLayout, which caused Kivy to bug the program.

Here I share what I've accomplished so far.

It works. Thanks again!

[Elliot Garbus]

Glad to hear you’ve got it working!

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/fe165df8-388f-4843-a764-6ff37bc59a96n%40googlegroups.com.