How to make 2D colliders scale with the UI element they're bound to?

I'm still quite new to Unity and I'd appreciate any help on this problem.

I have this setup which works well using the screen resolution I was designing on. I believe the UI elements scales well when I change the resolution but I just found out that the colliders that I've made (red lines in the image) don't. Currently, I'm using edge colliders added to the canvas. I've also tried adding individual edge colliders to each panel. Then I tried box colliders. I've tried turning the panels + colliders into prefabs. All to no avail. I've also tried setting the points of the edge colliders via script so that they're always wrapped around the panels but I can't get any collision (note: I don't know how to show/render this runtime-generated colliders so I'm not perfectly sure that they're exactly how I want them to be).

tldr; does anybody know how to make colliders scale or wrap around the UI elements they're bound to?

ui layout image

So, colliders working fine with UI. Keep in mind that colliders work in units, but the canvas in pixels.

If you need to set BoxCollider2D component size with image size, you need to check the value you're using for the Reference Pixels per Unit parameter on your Canvas Scaler.

This mean, that if your image 100px in width you need to set on collider scale 100 units.

This is what you need to do:

gameObject.GetComponent<BoxCollider2D>().size = new Vector2 (
    gameObject.GetComponent<RectTransform>().sizeDelta.x,
    gameObject.GetComponent<RectTransform>().sizeDelta.y
    );