Question

i have some images uploaded and their path in the database and add a template column of image and it show up fine but the images show on top of each other here is my code:

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="id" DataSourceID="SqlDataSource2" 
            EmptyDataText="There are no data records to display." BorderStyle="None">
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" 
                    SortExpression="id" Visible="False" />
                <asp:TemplateField ShowHeader="False">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("img") %>' 
                            Tooltip='<%# Eval("img") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                                <div style="height:90px;white-space:nowrap;display:inline;">
                                <img id="photoAlbumPhotos" class="photoAlbumPhotos" runat="server" alt="Image Not Found" src='<%# Eval("img") %>' />
                                </div>
                    </ItemTemplate>
                    <ControlStyle BorderStyle="None" />

                    <ControlStyle BorderStyle="None" cssclass="test"></ControlStyle>

                    <HeaderStyle BorderStyle="None" />
                    <ItemStyle BorderStyle="None" HorizontalAlign="Left" Wrap="False" 
                        CssClass="test" />
                </asp:TemplateField>
            </Columns>
            <RowStyle Wrap="False" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:testConnectionString1 %>" 
            DeleteCommand="DELETE FROM [img] WHERE [id] = @id" 
            InsertCommand="INSERT INTO [img] ([img]) VALUES (@img)" 
            ProviderName="<%$ ConnectionStrings:testConnectionString1.ProviderName %>" 
            SelectCommand="SELECT [id], [img] FROM [img]" 
            UpdateCommand="UPDATE [img] SET [img] = @img WHERE [id] = @id">
            <DeleteParameters>
                <asp:Parameter Name="id" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="img" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="img" Type="String" />
                <asp:Parameter Name="id" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>

i tried image float:left,dispaly:inline,inline-block but no luck

i am using asp.net 4.0

thanks

Answer 1

This is the normal behavior for a GridView. You can achieve a side by side rendering using the ListView and the GroupTemplate property:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.grouptemplate.aspx