Guide on positioning images in a gridview control side by side

After uploading images and storing their paths in the database, I added a template column for the images to display in my web application. However, the images are currently stacking on top of each other. Here is the code snippet that I am using:

<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 have tried using CSS properties like "float:left", "display:inline", and "inline-block" without success.

For this implementation, I am using ASP.NET 4.0.

Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to change the padding of a parent element in CSS3?

I've created a circle-shaped div element using the following code: #circle{ width: 320px; height: 320px; background-image: url('image.jpg'); border-radius: 50%; background-position: 50% 50%; transition: all 1s; } This circle expands on hov ...

establishing a connection between a client and server

Could someone clarify how the connection between client and server is established in a scenario where a web page has a left menu with links that open child pages on the right side of the master page? Each link triggers a request to the server, prompting th ...

Issue with Fluid Square Divs and Box-Sizing

I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code: div{ width:25% padding-bottom:25%; } However, it seem ...

Tips for designing a sleek and seamless floating button

I attempted to implement a floating button feature that remains in view while smoothly flowing using jQuery. I followed a tutorial I found online to create this for my website. The tutorial can be accessed at this link. However, after following all the ste ...

Modify the color of the chosen value on the sidebar using Angular 6

I am looking to update the color of the selected value in the sidebar. Sample <div class="card c-setting"> <div class="card-header" title="Data Uploader"(click)="clickDataloader()"> <a class="card-link" data-toggle="collapse" href="# ...

Just starting to learn jquery and I'm struggling with this code, can someone help?

I am trying to move the .icon element to the right and animate it based on its position().left value. Unfortunately, my code is not working as expected and I can't figure out why. It seems like such a simple task! <script> $("li.menu-item").ho ...

Displaying left and right div elements alongside each other in HTML/CSS works in Chrome, but not in Safari or Firefox

I've encountered an issue with aligning divs side by side in Firefox and Safari, although it seems to be working perfectly in Chrome. It's a bit tricky to provide all the CSS code as I have different stylesheets for mobile, normal, and print vers ...

An easier method to import XML data into a table with predefined columns before adding any rows

Usually, XML data that can be easily transformed into a datatable (using DataTable.ReadXML) is structured like this: <row ID="2185972"> <Unit_Nbr>TGHU3274759</Unit_Nbr> <T-State>Inbound</T-State> <Category>Impo ...

Converting Selenium Webdriver Xpath value to CSS: A Step-by-Step

We are looking to transform the lengthy HTML Xpath values in the existing code into a shorter CSS value: driver.findElement(By.cssSelector(".form button")).click(); ...

Struggling to dynamically include an identifier to a div element within a Rails helper function

I'm currently facing a bizarre issue. Here's how my view looks: <h1>All Deals</h1> <%= sanitize print_grouped_deals(@deals) %> This is what's in my deals_helper.rb file: def print_grouped_deals(grouped_deals_by_date ...

Attempting to alter CSS styles programmatically using JavaScript is proving to be ineffective

After trying numerous methods, I have come to the conclusion that the current approach works for others but not for me. Can anyone suggest an alternative way to write this code? Current CSS .aw-widget-current-inner div.aw-widget-content a.aw-current-weat ...

Navigating through tabs in a Meteor application: How to maintain the active tab when using the back button

I am working on a multi-page meteor application where each page includes a navigation template. To switch between pages, I am using iron-router. The user's current page is indicated by setting the appropriate navigation link's class to 'ac ...

Javascript continues to conceal my web background without my permission

After loading my webpage, I click on a link and the expected javascript runs as planned. However, once it completes and presents the results, the page goes blank to a white screen displaying only the outcomes. My goal is to have these results showcased o ...

How do you modify the attribute of a Label in the ItemTemplate within a FormView?

Within my ASP.NET application, I am utilizing a FormView that is connected to an ObjectDataSource. The FormView contains an ItemTemplate with a Delete button and a Label. I am using the OnItemDeleted event of the FormView to catch any exceptions that may o ...

Adjust the width of menu options using jQuery

One issue I am facing is with the menu on my homepage. I would like the menu options to enlarge upon hover, and while I have achieved this effect, there is a flaw in the animation: When I move my cursor away before the animation completes, the option abru ...

Creating mobile-friendly websites for a variety of devices, including smartphones and tablets

Creating a prototype webpage for my friend, one crucial aspect is ensuring it looks good on different devices. Utilizing Bootstrap, I've implemented vertical collapsing for certain elements, but I'm struggling with how to adjust other components ...

Adding style using CSS to a dynamically generated table row in Vue.js

Currently, I am working with a table that dynamically generates rows using v-for: <table> <tr><th class='name'>Name</th><th>Surname</th></tr> <tr v-for='data in datas'><td class=&a ...

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...

Why do my tablet media queries take precedence over mobile view media queries?

I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening? Here is how I have set it up: /* X-Small devices (portrait phones, less t ...

Dynamic click event added to a user control is not triggering

I'm encountering an issue with getting the click event to trigger for a button that is within a programmatically added user control. I am aware that the event needs to be wired up each time a new user control is added, and although I believe I am doin ...