List item height not adjusting when labels stacked vertically

I have a list item with the labels stacked verticaly but the text overlaps because the height doesn’t adjust.

The following images show the settings:

I have tried with “Wrap children” check without any effect

Whats weird is that with these settings, in the layout canvas the height of the list item adjusts, but the page rendering in Google Chrome does not:

Am I missing a setting so the list item will auto adjust the height?

The default List item component height is bound to the $listItemMinHeight theme variable, which resolves to 64 pixels.

Semantiaclly, it’d make sense the theme variable was bound to the actual minHeight property, but I guess my thinking was that it’s better to keep the list items at a fixed height by default. However, you’ve correctly rebound it to minHeight.

The steps I did were:

  1. Add unmodified List item from core library
  2. In isolation mode, change the root container to have Vertical direction
  3. Give the labels super long text values.

This replicates the bug – the texts overlap as you show on web.

Inspecting via web inspector, it looks like the flex-basis of the first row cell gets set incorrectly to 0px, along with incorrect flex-grow value. Looking at these values in the Style tab for Cell #1, it seems they are correctly set. However, changing the Flex basis value to auto, saving and removing it and saving again seemed to fix the issue.

This seems to stem from the default values that are set for the Row component – the defaults seem to work fine for the horizontally-laid-out Row, but when you convert it to a custom component, the cells start to be treated as regular Containers.

I’ll dig deeper and see what the proper fix would be, but the above steps fixed this particular case for me.

Hi Harri,

Thank you for the fast attention and response. I couldn’t get it to work, so, for now, since most data is about the same length, I’m setting a larger min height (it doesn’t look pretty on some data, but it will be usable and not so bad) and wait for a proper fix.

Again, thank you and the AppGyver team. This is a great product!

1 Like