Forum | Appery.io

Hi
I have added an image to the header area of a collapse block. It is not displaying. Can this be one or can I only display text?

Thank you.

Hi ,

Yes, you can add image in Collapse Block Header .

Please follow these steps:

1 Add collapsible component into the page.

2 DragNDrop image component into the header of the collapsible element.

3 Select image and select asset for this image.

4 Fill collapsible content with content you need.

After you run the application you'll get something like this:

Hmm, I did not explain properly.I am going to simplify this.

I have a collapse block that is mapped to data.....

The image renders properly if I put it in the Content area of the Colapse Block.
However when I move it to the Header of the Colapse Block, the Colapse block does not display at all.

Secondly, The colapse block is supposed to be non colapsed. But when running the app it is colapsed.

Thirdly, if I do put the image in the content area, it works, however the colapse block does not display in the correct area on the screen. In other words,

In Design Mode - You can see the Colapse Block should be under the Book Now Button

Actual Display - The colapse button has switched places with the image below it

Sample of mapping when Image is in Content area. As I said when I move the image to the header the colapseblock does not display at all.

Ok, I now have delete the colapse block and added a new one. The image is now displaying in the header of the colapse block. However the colapse block is still displaying in the wrong position.

I think I see the problem. I added another datasource to the collapse block and mapped its image to the content area. Its seems that a collapse block cannot cater for two different datasources. Is this correct?

Still displaying in wrong position and as collapsed.

Deon,

Yea you are right.

If you use some iterating in datasource you cant to use other datasource to change elements inside.
Can you show us screenshot with correct position of Collapseblock?

It must be right below the booking button as per screenshot of designview above.

Hi Deon,

If we understand you correctly, the image 'Accommodation' should not be between "book now" and "collapsible block", right?