[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 239
  • Last Modified:

align the images in a repeater control

I am using a repeater control to display thumbnails from a database. When the page loads, it displays 25 thumbnails. What I want to do here is display 4 images per line and the position should be fixed. What would I have to do to make this happen? Any other images should go to the next line but only 4 in a line. I hope I am cleared.
1 Solution
I never done this before, but just show you an idea.

Do you know flowlayout?

If a fixed region has items inside it. It will wrap them to new line within the fixed width itself from left -> right & top -> bottom.

You may create a fixed region (I mean a fixed-width table). This table contains a repeater which generates tables of image. You have to plan for width of region and image's table inside the region.

For example

the region width = 400px
image's table = 100px

400 / 100 = 4       (I hope you understand this point)

Another solution is write your own logic to arrange images from SqlDataReader.
Assuming you're using flow layout, you can create an HTML table in your repeater template,  insert an asp:literal control in your item template, then set the literal to "<tr>" before every 4th item and "</tr>" after every 4th item.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now