Unexpected Scroll List/Scrollable Container Behaviour

[Al-E-Bags]

Hi all.  I have used the ListLayout Example as the basis of latest iteration of my TouchGFX project.  Having already built a mockup gui from this example which worked as expected,  I'm a little perplexed to find I'm having issues with this one.

Everything seemed to be going well until I started to add list element arrays into mainView.cpp: 

mainView::mainView():
    mainViewBase(),

	awgElementClickedCallback(this, &mainView::awg_elementUpdateItem),
	coilElementClickedCallback(this, &mainView::coil_elementUpdateItem),
	layersElementClickedCallback(this, &mainView::layers_elementUpdateItem),
	spinElementClickedCallback(this, &mainView::spin_elementUpdateItem),
	stepElementClickedCallback(this, &mainView::step_elementUpdateItem),
	tplElementClickedCallback(this, &mainView::tpl_elementUpdateItem),
	wireElementClickedCallback(this, &mainView::wire_elementUpdateItem)
{
	//	...
}

void mainView::setupScreen()
{
    mainViewBase::setupScreen();

    //	awg mode list array
    //	awg_element.setHeight(0); //Compensates for the list height that is set to 200 by the designer

    awgElements[0].awg_element_select(Bitmap(BITMAP_ICON0_ID), T_ELEMENT_00);
    awgElements[1].awg_element_select(Bitmap(BITMAP_ICON0_ID), T_ELEMENT_01);

    for (uint8_t i = 0; i < numberOfAwgElements; ++i)
    {
        awgElements[i].setAction(awgElementClickedCallback);
        awg_element.add(awgElements[i]);
    }

    //	coil mode list array
    //	coil_element.setHeight(0); //Compensates for the list height that is set to 200 by the designer

    coilElements[0].coil_type_element_select(Bitmap(BITMAP_ICON0_ID), T_ELEMENT_03);
    coilElements[1].coil_type_element_select(Bitmap(BITMAP_ICON0_ID), T_ELEMENT_04);

    for (uint8_t i = 0; i < numberOfCoilElements; ++i)
    {
        coilElements[i].setAction(coilElementClickedCallback);
        coil_element.add(coilElements[i]);
    }

}

and mainView.hpp

protected:

//    working snippet
//    static const int numberOfStepElements = 11;
//    set_step_mode stepElements[numberOfStepElements];
//
//    // Callback that is assigned to each list element
//    Callback<main_screenView, set_step_mode&> stepElementClickedCallback;

    static const int numberOfAwgElements = 2;
    awg_element_container awgElements[numberOfAwgElements];
    Callback<mainView, awg_element_container&> awgElementClickedCallback;
    static const int numberOfCoilElements = 6;
    coil_element_container coilElements[numberOfCoilElements];
    Callback<mainView, coil_element_container&> coilElementClickedCallback;

    static const int numberOfLayersElements = 20;
    layers_element_container layersElements[numberOfLayersElements];
    Callback<mainView, layers_element_container&> layersElementClickedCallback;

    static const int numberOfSpinElements = 8;
    spin_element_container spinElements[numberOfSpinElements];
    Callback<mainView, spin_element_container&> spinElementClickedCallback;

    static const int numberOfStepElements = 12;
    step_element_container stepElements[numberOfStepElements];
    Callback<mainView, step_element_container&> stepElementClickedCallback;

    static const int numberOfTplElements = 9;
    tpl_element_container tplElements[numberOfTplElements];
    Callback<mainView, tpl_element_container&> tplElementClickedCallback;

    static const int numberOfWireElements = 9;
    wire_element_container wireElements[numberOfWireElements];
    Callback<mainView, wire_element_container&> wireElementClickedCallback;

If the above code is commented out, the 'awgElements' and 'coilElements' lists scroll as expected when run in the simulator.  Uncommenting the code results in what appears to be a duplicate list, superimposed over the top.  

(top two lists are partially scrolled for the purpose of illustration).

 It would seem to be an issue with my implementation of the list arrays however, I have checked and re-checked the syntax against a working example of the code but I can not find the root cause of this.  I'm clearly missing something.  A pointer in the right direction would be appreciated.  Thanks.  

[MM..1]

Try change 

++i

to

i++

[Al-E-Bags]

@MM..1 Thanks for the heads-up.  the incrementation needed to be corrected however, it didn't make the difference.  I'm still facing the same issue.

[MM..1 · Accepted solution]

You dont show designer structure for container and list, but i mean you miss your idea add more lists into one scroll container. This cn work only if you calculate and change Y for all next list after render previous, not very usable.

Normal way is add containers into one list, then cahnge all lines in for with .add to one primary list....

This dont work

this yes

[Al-E-Bags]

@MM..1  You are correct.  It has taken a lot of time to realize it, but I definitely over-complicated the use of containers and container types.   I have since stripped the design back to it's basics  and rebuilt it the very same way as you have suggested in your reply. 

I think my fundamental mistake was using a Scroll List inside a Scrollable Container.  I should have used a List Layout inside the Scrollable Container instead.  I believe the UI will work as expected with these changes.   Thanks for helping me out.