Forum Discussion

cesarcarlos's avatar
cesarcarlos
Binge Watcher
3 years ago
Solved

Remove a label completely from screen if no data is available

I have a screen with a number of labels, but depending on whether a specific piece of data is available or not in the content, I want that label to be displayed or not.

So far I have this:

if content.subtitle = invalid
    m.subtitleLabel.visible = false
end if

 

<LayoutGroup
            translation="[105, 230]"
            layoutDirection="vert"
            itemSpacings="[2,2,30]">
            
                
                <Label
                    id="showLabel"
                    width="1000">
                    
                </Label>
                <Label
                    id="titleLabel"
                    maxLines="2"
                    lineSpacing="1"
                    width="1000"
                    wrap="true">
                    
                </Label>
                <Label
                    id="subtitleLabel"
                    maxLines="1"
                    lineSpacing="1"
                    width="1000">
                    
                </Label>
                <Label
                    id="detailsLabel"
                    width="1000">
                    
                </Label>
                <Label
                    id="descriptionLabel"
                    width="1100"
                    lineSpacing="2"
                    maxLines="4"
                    wrap="true">
                    
                </Label>
                
                <LayoutGroup
                    id="buttons"
                    layoutDirection="horiz"
                    itemSpacings="[20]">
                    <Button
                        id = "playButton"
                        text = "PLAY"
                        focusedTextColor="0x000000FF"
                        showFocusFootprint = "true"
                        maxWidth = "240"
                        minWidth = "240" />
                    <Button
                        id = "trailerButton"
                        text = "TRAILER"
                        minWidth = "240" />
                </LayoutGroup>
        </LayoutGroup>

 

However the problem is that the space that the label should occupy remains there. I need it to disappear completely and have the labels below move upwards.

I have tried with

m.subtitleLabel.height = 0

but that didn't work either.

Also, once the label is removed, how do I handle the itemSpacings array?

 

Roku Developer Program
  • C-DP's avatar
    C-DP
    3 years ago

    I tend to have a function something like this

     

    function removeNode(node)

      node.getParent().removeChild(node)

    end function

4 Replies

  • C-DP's avatar
    C-DP
    Channel Surfer
    3 years ago

    There are a few ways to do this but really removing/re-injecting the label is the primary way you would solve this. 

    There are some other hacks that involve setting the scale to [0,0] but that also requires you to populate the item spacing and update them as you do them. 

    Most times I would just make all the labels dynamically and remove them all on updates. I also would populate the item spacings as I do that. 

      • C-DP's avatar
        C-DP
        Channel Surfer
        3 years ago

        I tend to have a function something like this

         

        function removeNode(node)

          node.getParent().removeChild(node)

        end function

  • speechles's avatar
    speechles
    Roku Guru
    3 years ago

    m.subtitleLabel.height = 1

    This will make it disappear. You do not need to do anything else. The layout group will then collapse the subtitleLabel.

     

    m.subtitleLabel.height = 0

    When you set the label to a height of 0 it will assume you want to use numlines and maxlines which will correspond to the font size.