1

Good afternoon,

I'm hoping to get some help/adice or a nudge in the right direction on the following problem:

I'm using a programme where I define a container and inside that container I'm placing three elements. First element is an image that occupies the top of the container. Second element is a label with some text and last element is a text box that takes up the bottom portion of the container. All elements have different heights.

If the user wants to make a container smaller, the dynamic resizing is handeled authomatically by the width property.

My issue is that if a person needs to resize the container vertically rather than horizonally, I'm not sure how to handle that and my search of a proper mathematical formula has only led to programming solutions, which I cannot use.

Could someone assist with some advice?

Mark
  • 13
  • Are the elements stacked on top of one another vertically? For example, if the container is expanded, do we have to equidistribute the empty space between each elements only or do we also need to reserve an equal amount of space above the top element and the bottom element? – Royce Pacibe Jun 23 '20 at 15:59
  • @RoycePacibe Yes, that's correct. If the container is resized vertically, the space that exists between the elements should be maintained. – Mark Jun 23 '20 at 16:02
  • How about the second question? Do we also need to reserve an equal amount of space from above the top element to the top border, and from below the bottom element to the bottom border? – Royce Pacibe Jun 23 '20 at 16:04
  • @RoycePacibe My apology. If this space could be reserved, that would be ideal (if it is possible to achieve this). – Mark Jun 23 '20 at 16:08
  • Alright, see my answer below. :) – Royce Pacibe Jun 23 '20 at 16:13

1 Answers1

0

Let $y$ be the height of the container. Let $a$, $b$ and $c$ be the heights of each of the elements stacked vertically.

Clearly, in order for the elements to fit inside the container, we must have $a + b + c \leq y$. From here, we derive the remaining available space as $y - \left(a + b + c\right)$.

For the ideal case, we want to equidistribute the remaining space between the regions between the adjacent elements (there are $2$ of them) and also the regions above the top element and below the bottom element. Hence, we have $4$ shareholders for this remaining space.

Therefore, in this case, each shareholder receives $\frac{y - (a + b + c)}{4}$ amount of space.

Update

For example, let $A$ be the top element with height $80$ pixels, $B$ be the middle element with height $30$ pixels, and $C$ be the bottom element with height $20$ pixels. Let the container be of height $150$ pixels. To check, indeed we have $80 + 30 + 20 = 130 \leq 150$.

In this case, each space has height $\frac{150 - (80 + 30 + 20)}{4} = 5$ pixels.

Hence, we have $5$ pixels between the top border of the container and $A$, $5$ pixels between $A$ and $B$, $5$ pixels between $B$ and $C$, and also $5$ pixels between $C$ and the bottom border of the container.

Royce Pacibe
  • 523
  • Thank you very, very much for your kind help @Royce. You saved me hours of trying to figure this out (I already spent so much time of this). Thank you! – Mark Jun 23 '20 at 16:18
  • I've added a concrete example too as a guide. Glad I helped :) – Royce Pacibe Jun 23 '20 at 16:22
  • Thank you, @Royce, this has been so helpful, I really appreciate your time and effort. – Mark Jun 23 '20 at 19:24