Strange horizontal lines when adding components to container

Question

When adding a series of containers in code to containers defined in the GUI builder, evenly spaced horizontal lines appear across the width of the screen, not relating to any borders of components.

Here's my code:

public Container[] renderArticles(ArrayList<HashMap<String, Object>> articles){
        Container[] artArray = new Container[articles.size()];
        for (int i = 0; i < articles.size(); i++) {
            final HashMap<String, Object> art = articles.get(i);
            Container artCon = mStateMachine.createContainer(mStateMachine.res, "DocArticleItem");
            ActionListener listen = new ActionListener() {

                public void actionPerformed(ActionEvent evt) {
                    mStateMachine.currentArticleId = (String) art.get("id");
                    mStateMachine.showForm("Article", null);
                }
            };
            Button artPic = mStateMachine.findArticlePic(artCon);
            artPic.addActionListener(listen);
            artPic.setIcon(mStateMachine.makeImageFromRaw((String)art.get("picture_data")));
            SpanButton caption = (SpanButton)mStateMachine.findArticleTitle(artCon);
            caption.setText((String) art.get("title"));
            caption.addActionListener(listen);
            artArray[i] = artCon;
        }
        return artArray;
    }

public Container[] renderTips(ArrayList<HashMap<String, Object>> tips){
        Container[] contArray = new Container[tips.size()];
        for (int i = 0; i < tips.size(); i++) {
            HashMap<String, Object> tip = tips.get(i);
            Container tipCont = mStateMachine.createContainer(mStateMachine.res, "DocTipItem");
            SpanLabel tipTitle = mStateMachine.findDocTipTitle(tipCont);
            tipTitle.setText((String)tip.get("title"));
            SpanLabel tipText = mStateMachine.findDocTipText(tipCont);
            tipText.setText((String)tip.get("info"));
            contArray[i] = tipCont;
        }

        // remove divider from last tip
        Container last = contArray[contArray.length - 1];
        Container line = (Container)last.getComponentAt(last.getComponentCount() - 1);
        last.removeComponent(line);

        return contArray;
    }

final HashMap<String, Object> map = mStateMachine.expertCardInfo;

// populate tips
if (map.containsKey("tips")){
    tipContainers = renderTips((ArrayList) map.get("tips"));
}else{
     f.removeComponent(mStateMachine.findExpertTipsHeader(f));
     f.removeComponent(mStateMachine.findExpertTipsContainer(f));
}

// populate articles
if (map.containsKey("articles")) {
    articleContainers = renderArticles((ArrayList)map.get("articles"));
} else {
    f.removeComponent(mStateMachine.findExpertArticlesHeader(f));
    f.removeComponent(mStateMachine.findExpertArticlesContainer(f));
}

In StateMachine:

@Override
    protected void onDoctorDetails_ExpertTipsHeaderAction(Component c, ActionEvent event) {
        Container cnt = findExpertTipsContainer(c.getComponentForm());
        if(cnt.getComponentCount() > 0){
            cnt.removeAll();
        }else{
            for (int i = 0;i < expRenderer.tipContainers.length;i++){
                cnt.add(expRenderer.tipContainers[i]);
            }
            c.getComponentForm().scrollComponentToVisible(cnt);
        }

    }

tl;dr: It's a manual implementation of Component.setHidden(), which for some reason was not working well. I create a bunch of Containers based on data I get from the server, stick them in an array, and when the button is clicked to show them, I iterate over the array and add the Containers (each one is essentially a list item) to a parent Container.

Any push in the right direction would be greatly appreciated.

Update

The UI hierarchy looks like this:

Form (BoxLayout Y)
  |
   - Container (FlowLayout)
  |
   - Container (TableLayout)
  |
   - Container (TableLayout)
  |
   - Button
  |
   - Label
  |
   - Button (populates following container)
  |
   - Container (BoxLayout Y - doesn't show lines)
  |
   - Button (populates following container)
  |
   - Container (BoxLayout Y - shows lines)
  |
   - Button (populates following container)
  |
   - Container (BoxLayout Y - shows lines)

The last three containers all have identical UIIDs, which derives from Container and modifies only the margins. The difference is the containers being added to them. To the first one I add a series of SpanButtons (and the lines don't appear). To the other two I add a series of pre-assembled containers with a little content inside (and the lines appear). The added containers in the latter case have the following style attributes:

cn1-derive: Container; margin: 0; border-bottom: thin solid gray

Solution

The bottom border, which I defined in my css file, seemed to be causing the strange lines. When I comment that line out, they disappear. Instead of being rendered only at the bottom of the container it was defined on, it was rendered all over the container. This, I assume, is a bug.

Can you post the hierarchy you see in the designer and theme elements you use? Look at the theme itself does something have a background type defined within the hierarchy. You can also inspect the visual component hierarchy in the component inspector within the simulator. — Shai Almog

Diamond Diamond · Accepted Answer · 2016-02-25T19:41:39

Check in the GUI Builder to see that your containers UIID don't have a background image styling, and also your form.

Strange horizontal lines when adding components to container

Update

Solution

3 Answers