Introduction
This article explains how to make the datalist
items automatically adjustable like div
elements in HTML using JQuery and CSS as shown in the following image:
Using the Code
In div
, when you give style float:left
and give a width
, then the div
will adjust automatically into the container whenever you remove any in between div
.
When you are using datalist to display image listing and using JQuery to delete any image, then if you delete any in between image then the page will not get refreshed and the image will be deleted but it will display the empty space there as follows. You can see the empty space in the second line right most in the following image.
The reason behind this is that the default value for the 'RepeatLayout
' property is 'Table
'. It means the items are in table
and tr
, td
layout. So it can't move automatically like div
or span
elements.
Now let us talk about the solution:
- Make the '
RepeatLayout
' property of datalist 'Flow
' as in the following example:
- Example:
RepeatLayout="Flow"
- By this property, the datalist item will be converted into
span
elements rather than tr
, td
elements.
- And also remove
RepeatColumns
property
- HTML tag:
<asp:DataList ID="dlPhotos" runat="server"
DataSourceID="sqlListing" RepeatDirection="Vertical" RepeatLayout="Flow">
- Add class to datalist for hide tags like:
.hidebr br
{
display:none;
}
- Now give any class name to an
ItemStyle
tag of the datalist
:
- And then write the JQuery code as follows:
First, please add latest JQuery file in your page. You can download it from here OR here.
$(document).ready(function(){
var tdImg = $("#<%=dlPhotos.ClientID%> .tdContainer");
tdImg.attr("style",'width:150px;float:left;');
)};
- So it will give
width
of 150px
to all the span
elements and also give float:left
property, So now when you delete any in between image then all the span
elements will align automatically.
Do the above four steps and enjoy......:-)