Python kivy position of the Label moves when resizing screen

Question

I'm making an app in python kivy and in my tacscreen I have a draggable Image and an Label, whenever I drag my draggable Image my label drags with it as well. The position of the label is just below the draggable Image. The problem that I'm facing is whenever I resize my window and drag the image the label goes from this to this the space between the Image and the label is too much. How can I fix this? I want the label to always be like how it is in the first screenshot even after I resize the screen and drag. Below is my code. I have been trying to find a solution to this for a months now. I really appreciate any help. Thanks!

main.py

from kivy.properties import BooleanProperty
from kivy.properties import ObjectProperty
from kivy.metrics import dp
from kivy.app import App
from kivy.uix.screenmanager import Screen
from kivy.lang import Builder
from kivy.uix.behaviors import DragBehavior
from kivy.uix.image import Image


class DragImage1(DragBehavior, Image):
    dragging = BooleanProperty(False)
    drag_label = ObjectProperty()

    def on_touch_move(self, touch):
        if touch.grab_current is self:
            self.drag_label.pos = self.x, self.y - dp(300)
        return super().on_touch_move(touch)

    def on_touch_up(self, touch):
        uid = self._get_uid()
        if uid in touch.ud:
            # do something on drop
            print(self.source, 'dropped at', touch.x, touch.y)
        return super(DragImage1, self).on_touch_up(touch)


class TacScreen(Screen):
    Pass


GUI = Builder.load_file("main.kv")


class MainApp(App):
    def build(self):
        return GUI

    def change_screen(self, screen_name, *args):
        self.root.current = screen_name


MainApp().run()

main.kv

#:include tacscreen.kv

ScreenManager:
    id: screen_manager
    TacScreen:
        name: "tac_screen"
        id: tac_screen

tacscreen.kv

<tacscreen>:

    #:import utils kivy.utils

    canvas.before:
        Rectangle:
            pos: self.pos
            size: self.size
            source: "Background.png"


    DragImage1:
        drag_label: per
        pos: root.center_x - self.width/2, root.center_y - self.height/0.3
        size_hint: 1, .1
        source: "Image.png"

    Label:
        id: per
        text: "Hello"
        font_size: "20dp"
        pos: root.center_x - self.width/2, root.center_y - self.height/1.2

Answer 1

You can modify your kv to do the positioning for you:

DragImage1:
    id: di  # added id for use by the Label
    drag_label: per
    pos: root.center_x - self.width/2, root.center_y - self.height/0.3
    size_hint: 1, .1
    source: "Image.png"

Label:
    id: per
    text: "Hello"
    font_size: "20dp"
    size_hint: None, None
    size: self.texture_size  # set size to just contain the text
    pos: di.center_x - self.width/2, di.y - self.height  # adjust postion based on the DragImage1

And, since kv is now handling the positioning, you should remove the on_touch_move() method from the DragImage1 class.

Note that this will handle positioning when resizing before dragging. But if you drag before resizing, then the resizing will revert the position to that defined in the kv.