Adjusting the gridview headers to line up with a specific item and shifting the content of the item to the right

I am struggling with aligning the header and content in my gridview. I want the shirts to be underneath the header item, with the description moved to the left and the price 336 moved to the right. Something like this:

https://i.sstatic.net/2i2IR.png

Here is the code I am working with:

<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" GridLines="None">
            <Columns>
                <asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-Width="35%"  />
                <asp:TemplateField HeaderText="Description" HeaderStyle-Font-Bold="true" ItemStyle-Width="35%"  >
                    <ItemTemplate>
                        <asp:Label ID="lblDesc" runat="server" Text='<%# Eval("desc") %>' /><br />
                        &nbsp;Requested By: &nbsp;<asp:Label ID="lblDesc1" runat="server" Text='<%# Eval("RequestedBy") %>' />
                    </ItemTemplate>

                </asp:TemplateField>
                   <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="10%" >
                    <ItemTemplate>
                            <input type="number" id="txtQuantity" value='<%# Eval("Quantity") %>'   style="text-align:right;" data-mini="true" min="1" max="100" runat="server"/>
                    </ItemTemplate>
                </asp:TemplateField>
                   <asp:TemplateField HeaderText="Price" ItemStyle-Width="100%" HeaderStyle-HorizontalAlign="Right">
                    <ItemTemplate>
                            <asp:Label  ID="lblPrice" runat="server" Text= '<%# Int32.Parse(Eval("Quantity").ToString()) * 28 %>' />
                    </ItemTemplate>
                  </asp:TemplateField>

            </Columns>



 </asp:GridView>

Any assistance would be greatly appreciated.

Answer №1

Have you attempted this method?

<asp:Label id="Label1" runat="server" width="100px" style="text-align: right;" />

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

Using a PHP for loop to manage a div control

Query: I am seeking a way to exert influence over the positioning of my dynamic divs. I want each div to be relative to the parent div. Challenge: The current code does not provide the flexibility to adjust the div positions based on the parent div. For i ...

Tips for managing the velocity of JavaScript navigation scrolling

Hey everyone, I recently discovered this incredibly helpful JavaScript sticky side navigation script and it works like a charm! However, since I don't know much about JS, I was wondering if there's a way to slow down the scrolling speed? functio ...

What sets apart manually recycling an app pool from automatically doing so?

After observing that manually recycling an application pool via IIS results in less slowdown for my web app compared to making changes to files in App_Code or the web.config file, I'm curious if this difference is due to the fact that recycling the ap ...

What is the process for connecting an HTML page to a CSS file located in a parent directory?

Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...

Implement dynamic filtering functionality for a ListView in C# by adding filter parameters and expressions at runtime

I am trying to implement dynamic filtering for a listview based on textboxes because I don't know the number and names of columns in advance. I have created textboxes, set filter parameters, and filter expressions in the code behind. The page loads wi ...

GWT Designer style issue plaguing development efforts

Currently, I am working on designing a login view using GWT Designer while incorporating styles from Twitter Bootstrap. The structure I have set up is as follows: However, the displayed result does not meet my expectations: Despite setting all CSS paddi ...

Navigating with a Stuck Navigation Bar Using BootstrapretaF

My website has a sticky navbar with a dropdown menu that allows users to jump to different sections of the page. However, I've noticed that when I navigate to a new section, the navbar covers part of the content at the top. After inspecting the navbar ...

Include a div element within the slider

In the process of developing a slider feature that includes both images and paragraphs on each slide, I have encountered a stumbling block while attempting to create a new div element. Despite trying various solutions, the methods that previously worked fo ...

Align the button to the right side inside a div container

As someone who isn't very skilled in CSS, I have a question for beginners. Below is an excerpt from an HTML document: <div _ngcontent-vyb-c4="" class="form-row"> <div _ngcontent-vyb-c4="" class="col-md-12"> <d ...

Using JavaScript to listen for events on all dynamically created li elements

Recently, I've created a simple script that dynamically adds "li" elements to a "ul" and assigns them a specific class. However, I now want to modify the class of an "li" item when a click event occurs. Here's the HTML structure: <form class ...

My line occupies an excessive amount of vertical space

Working on a practice website and realizing my CSS skills are a bit rusty. Struggling with the height of a row in my container, as it's taking up too much space. Also, having trouble positioning the second row below the first one without it ending up ...

Design element: Text overlaying background with a touch of transparency

Is there a way to create a background image with an opacity level of 0.5, while maintaining the text on top at full opacity (1) for better readability? Currently, the background image is not displaying as desired, and the opacity settings are affecting the ...

Tips for providing a link to a label and passing a query string to a different page in ASP.NET using C#

I am working on an asp.net page with SQL Server 2008 as the database. I have created three stored procedures; one to count the total number of users in tbl_users, another for counting the total male users, and the last one for counting the total female use ...

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code: ul.nav { width: 1000px; margin: 0 auto; list-style-type: none; } .nav li { float: left; width: 300px; } #government { clear: left ...

How can we refine the user information based on the selection of a radio button?

How do I apply a filter to user details when selecting a radio button? Visit Plunker *I need to display only the questions of authenticated users on the list page, so I created a plunker example. If the user is authenticated or an admin, I want to filter ...

Remove the most recent row that was dynamically inserted into an HTML table

Currently, I am in the process of developing an ASP.NET Web Api 2.2 application using .NET Framework 4.5, C#, and jQuery. Within one of my views, I have set up the following table: <table id ="batchTable" class="order-list"> <thead> ...

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...

How can I alter the background color of the entire header in Ionic?

Having some trouble changing the color of my header. I successfully changed the color of the white header, but not the black header where the time is displayed. I know this is beyond Ionic and part of Android, but I have seen other apps that are able to ch ...

Creating a dynamic 2x2 grid with centered responsiveness in Angular Ionic framework

I'm having trouble achieving a 2 x 2 grid that is centered on my screen. The code snippet below shows what I have so far in the HTML file. Just to provide some context, this project is meant for a native mobile application. <ion-header> <i ...

Ensure that the smaller bullet points are perfectly in line with the larger text vertically

I recently adjusted the font size of the bullets in my list by wrapping the li text in a span element and setting a smaller font size for the li. However, this caused an issue with the vertical alignment of the bullets in relation to the text. Can anyone s ...