How to remove the space gap between DataList items?

Question

User102575017 posted

Hello everyone,

I have designed a box with CSS and I have put inside it an image and bellow the image there is some text content.

And each box has its special text content.

Look in the picture:

I have put this box design inside a datalist so I can have multiple items that has this design. And I stored inside the labels of the text content the columns that are in the database.

Then I have hidden the labels of the text content if the value is equal to "Empty". I have hidden them by display: none; in CSS

Each picture in the datalist is not the same height.

So the problem is, there is a gap between the items that are in the datalist. look into the picture bellow:

And that is because the image height is not the same and because the item doesn't has the same text content as the item next to it.

The height of the box is auto.

How can I remove this gap between the items?

Waiting for your replay, thank you for reading.

Sincerely,

Majid Abu Rmelah.

Answer 1

User-826336654 posted

hi there,

The easiest thing, you can do is to make the "height of all boxes" same. That way, it will look Professional.

Thanks

Answer 2

User102575017 posted

I don't want to do that, it won't look professional as you think.

Look at the link below and see how the images are aligned.

https://unsplash.com/

And by the way, I have tried to use cellpadding = 0 and cellspacing = 0, but that didn't change a thing.

Answer 3

User475983607 posted

You'll need to find a JavaScript library like the one used in your last post and drop the use of a DataList.

https://masonry.desandro.com/

Answer 4

User102575017 posted

Is this the only option I am left with?

I have no idea how to use JavaScript, and I have added and used so many things to the DataList, like OnItemCommand, OnEditCommand, OnItemDataBound, and OnUpdateCommand. That took me a lot of time to set up. I cannot drop the use of the DataList since I have worked on it for a very long time and I have no experience in JavaScript.

I hope there is a better way to solve this issue, thank you.

Answer 5

User475983607 posted

Majid Abu Rmelah

Is this the only option I am left with?

I have no idea how to use JavaScript, and I have added and used so many things to the DataList, like OnItemCommand, OnEditCommand, OnItemDataBound, and OnUpdateCommand. That took me a lot of time to set up. I cannot drop the use of the DataList since I have worked on it for a very long time and I have no experience in JavaScript.

I hope there is a better way to solve this issue, thank you.

Again, the ListView alone does not meet your requirements.  You'll need to find a different solution which will involve HTML, JavaScript, and CSS.

Keep in mind, this a feature the you had to design from the start.  You might be able to modify the ListView HTML contents to a fit masonry.js layout.

https://masonry.desandro.com/layout.html

Answer 6

User102575017 posted

Using HTML, CSS and C# only to build a website is not enough to create a professional website.

I never thought that I would be disappointed like I am now in ASP.Net.