Hidden label cause listitem text to not be displayed

[GregMc]

In my app I have a need to have a list that displays listitems with text and the list items also need to contain a hidden label to store an ID.

I have mapped the listitem text property to a value returned from a service, when I run the app with just this everything is fine. Then I put a label in as a child of the list item, mapped to label text to an ID field returned from the service, and made the label not visible. When I run the app now it does not show the text for the listitems, it is as if the hidden label is hiding the text.

So then I tried to put 2 labels in the list item, one to display the text and one to store the hidden ID. When I run this way the text label is display but the label is very poorly aligned within the list item, it is not centered vertically. To try and fix this one by one I added custom css of "vertical-align=middle" to each class involved in the list item, nothing would vertically center the label. I tried having the 2 labels in a grid as well and applying the css to the grid elements but that also failed.

I have lost several hours to what should be a very simple issue. So can you please tell me:

1. How can I still display the text property of a list item when there is also a non-visible label in the list item?

2. If #1 is not possible, how can I vertically center a label within a list item?

   Screen shot of the bad alignment issue is below
   

[GregMc]

One note, I just realized if I set the Image type for the list item to "none" instead of "icon" things are vertically aligned OK. But I need to have the images there though so the orignal problem still pertains, with an image icon I need to have the text label for the list items vertically aligned in the middle

[Yurii Orishchuk]

Hi GregMc,

Please give us your app public link and describe steps to reproduce this issue in your app.

Thanks.

[GregMc]

The app is shared with appery support. Project name is ft_proto. To reproduce start the app and on the first screen click the top most button "Challenge Topics". On the next screen expand the "Entertainment" collapse block, within the expanded list see the poor vertical alignment of the image, label, and icon, I would like them all to be vertically center aligned with eachother.

[GregMc]

Hi Yuri,

Any progress on this? I have still been trying many various solutions I find on the internet and nothing can seem to vertically center the label with the other components.

Thanks.

[Yurii Orishchuk]

Hi Greg,

Here is a solution for your problem:

Here is how to fix it:

1. Add CSS asset.

2. Populate it with following CSS code:

   pre

   /* where 'mobilegridcell_48' is your grid cell component name.
   [name="mobilegridcell_48"]{
   vertical-align: middle;
   }

   /pre

3. Activate mobileGridCell component and set "height" dimension as "46px".

   I've apply this solution in your app you can check it.

   Regards.

[GregMc]

Thank you for the reply Yuri. I am concerned though that this solution (hard coding the height of the grid cell in pixels) seems somewhat fragile. This may causing the app to not look right on differing screen resolutions. Why does the vertical-align=middle not work if I just leave the grid cell height = auto?