CODEWITHSUNDEEP
iosswiftuilabeluistackview
Karim
Karim

Reputation: 291

How do I ensure UILabel only takes the space it requires, without extra padding?

I have a peculiar issue when dealing with my label in Vertical, then horizontal stack view.

The horizontal stack view is supposed to be of a dynamic height based on the label's contents. I've tried other solutions mentioned before, such as embedding the label (and image which is also in the horizontal stack view) in separate UIViews and pinning the labels to the edges.

The issue is, when the label is set to 0 - the label grows beyond what it requires, adding padding above and below the label.

I did verify this wasn't an issue with constraints from where the Stack View begins below the imageView, as the warning label correctly floats upwards when aligning the stackview to "top", but the label still remains centered.

Everything has been done in the storyboards without code.

Take a look at the images, maybe someone can help me out and recognise how I can resolve this issue.

Desired Effect

Desired Effect

What occurs upon running the application

What occurs upon running the application

Verifying that the stack view is correctly pinned to the image view by aligning top Verifying that the stack view is correctly pinned to the image view by aligning top

Constraints involved

Constraints involved

The second stackview in the hierarchy at the bottom is just to fill the empty space during the designing phase. I don't think that would be causing the issue.

Upvotes: 2

Views: 3218

Answers (3)

Atul
Atul

Reputation: 698

Here, the warning UILabel is occupying the remaining available space, try adding an empty UIView in the second stack view which you kept for the later stage of the development. This will act like a spacer view.

Also, don't forget to call warningLabel.sizeToFit() inside viewDidLoad()

Upvotes: 1

Ondřej Korol
Ondřej Korol

Reputation: 814

I would guess that actually your second stackView at the bottom is also the part of your problem. If you pinned the vertical stack view to the bottom of the image (TOP constraint) but you also pinned it to the bottom of the screen (BOTTOM constraint), your vertical stack view tries to strech it's content. That's the reason why the label has the extra space.

What you can do: get rid of that bottom constraint (don't give vertical stackView bottom constraint) or maybe better set vertical content hugging priority of warning label to greater value. enter image description here

Upvotes: 1

DevKyle
DevKyle

Reputation: 1091

You can achieve this by calling yourLabel.sizeToFit()

Above will dynamically adjust the height of the label based on the amount of space your text occupies.

Upvotes: 0

Related Questions