`Is there a way to align Gridview headers to the right side?`

I've been attempting to align the headers of a gridview to the right, but so far I haven't had any success. I've tried using center alignment as well but that didn't work either. Specifically, I want the headers for the CR and DR columns to be aligned to the right. I've looked at several articles for help, but none of them have provided a solution.

<asp:GridView ID="GridViewLedger" runat="server" Width="100%" AutoGenerateColumns="False"
                ShowFooter="True" DataKeyNames="AccountID"
                CssClass="table table-hover table-striped table-bordered">
                <Columns>
                    <asp:BoundField HeaderText="Account Title" DataField="AccountTitle" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop"></HeaderStyle>

                        <ItemStyle Width="11%" />
                    </asp:BoundField>
                    <asp:BoundField HeaderText="Voucher No" DataField="VoucherNumber" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop"></HeaderStyle>

                        <ItemStyle Width="8%"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField HeaderText="Chq No" DataField="ChequeNumber" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop"></HeaderStyle>

                        <ItemStyle Width="8%" CssClass="visible-desktop"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField HeaderText="DateTime" DataFormatString="{0:dd/MMM/yyyy hh:mm}" HtmlEncode="false"  DataField="TransactionDateTime" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop"></HeaderStyle>

                        <ItemStyle Width="13%" CssClass="visible-desktop"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField HeaderText="InvoiceNo" DataField="InvoiceNo" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop"></HeaderStyle>

                        <ItemStyle Width="3%" CssClass="visible-desktop" ></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField HeaderText="Particulars" DataField="Particulars" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop"></HeaderStyle>

                        <ItemStyle CssClass="visible-desktop" Width="30%"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField HeaderText="DR" DataField="DR" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop" HorizontalAlign="Right"></HeaderStyle>

                        <ItemStyle CssClass="visible-desktop" Width="8%" HorizontalAlign="Right"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField HeaderText="CR" DataField="CR" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop" HorizontalAlign="Right"></HeaderStyle>

                        <ItemStyle CssClass="visible-desktop" HorizontalAlign="Right"></ItemStyle>
                    </asp:BoundField>
                    <asp:BoundField HeaderText="Amount" DataField="Amount" ItemStyle-CssClass="visible-desktop"
                        HeaderStyle-CssClass="visible-desktop">
                        <HeaderStyle CssClass="visible-desktop"></HeaderStyle>

                        <ItemStyle CssClass="visible-desktop"></ItemStyle>
                    </asp:BoundField>
                </Columns>
            </asp:GridView>
c#cssasp.netgridview

Answer №1

Here is a code snippet to enhance your GridView:


    <HeaderStyle CssClass="gridHeaderAlignRight" />
</asp:GridView>

Make sure to add the following CSS style in your CSS file:

.gridHeaderAlignRight {
    text-align:right;
}

Answer №2

The solution you provided appears to be accurate

<asp:BoundField HeaderText="DR" DataField="DR" ItemStyle-CssClass="visible-desktop" HeaderStyle-CssClass="visible-desktop">
    <HeaderStyle CssClass="visible-desktop" HorizontalAlign="Right"></HeaderStyle>
    <ItemStyle CssClass="visible-desktop" Width="8%" HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>

I believe the visible-desktop class or another could be causing the issue with HorizontalAlign="Right". I recommend inspecting it using FireBug (or a similar tool).

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

Ways to prevent an element from being affected by a CSS Bootstrap class

Is there a way to exclude the container class from affecting the jumbotron class in Bootstrap 4? In my PHP project using the MVC pattern, I have a header included on every page that ends with <main class="container">. However, on the home page, I wa ...

htmlcsstwitter-bootstrap-4

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

javascripthtmlcssw3cw3c-validation

Converting Json data without key names into C#

Trying to deserialize a JSON string into a C# object, but the JSON format is not valid and cannot be changed as it comes from a device. The [] brackets need to be replaced by {} for it to resemble a valid object: [2, "2", "text", {Object}] A custom class ...

c#jsonparsingjson.net

Creating a secondary menu below the navbar using Bootstrap 3's nav-pills component

Is it possible to create a secondary menu using Bootstrap 3 with nav-pills that behaves like a secondary navbar? Check out this video tutorial Here is the HTML code for my menu: <div class="row"> <div class="col-md-12"> <ul class="n ...

csstwitter-bootstrap-3

Issue: Unable to retrieve viewstate

For my college project, I am developing a website that relies on a web service to retrieve data. However, I am encountering an issue and need some guidance on how to resolve it. On one of the pages, I have integrated a ListView control to showcase product ...

c#.netasp.netlinqweb-services

The client's secret input did not pass validation, as the provided client secret was found to be invalid during the Authorization

While utilizing the OIDC client JS in Identity Server 4 with react, I keep encountering the following error: Client secret validation failed for client, Invalid client secret during the Authorization code flow. Here are the OIDC settings: private getCl ...

asp.netreactjsidentityserver4openid-connectoidc-client-js

Ensure that the CSS element pseudo-class does not override the styling of its child

Looking to style an anchor element that contains other HTML elements. Here is the basic code structure: HTML: <div class="container" id="sub-menu"> <div class="row" data-bind="foreach: subMenu"> ...

htmlcsscss-selectors

Tips for lining up items in a row

I am struggling to align these boxes next to each other instead of on top of each other. It seems like it should be an easy task, but I just can't seem to make it work. Check out my code here for reference. <body> <div class="horAlign"&g ...

htmlcssalignment

What is the best way to place an anchor so that it is perfectly aligned between a static header and footer?

I am looking to create a website where the content is placed below a fixed header and footer. Navigation is to be done through anchors, with only the active anchor being displayed while the rest remains hidden by the header and footer (similar to a window) ...

htmlcss

What is the best way to customize the appearance of only one of two identical tables using HTML and CSS?

I have two tables that look identical: <html> <head> <style> td, th { text-align: left; padding: 28px; } </style> </head> <body> <table> <tr> ...

htmlcss

Bootstrap table showing message "loading in progress, please be patient"

I'm having an issue trying to load data from an API into a bootstrapTable but it seems to be stuck on "loading..". Can anyone help me figure out what's wrong with my code? Thank you in advance for your assistance! <table id="table" ...

javascriptjquerycssjsonajax

Challenges with Managing Directories and User Accounts in ASP.NET Core

Looking to incorporate DirectoryServices and DirectoryServices.AccountManagement namespaces into my ASP.NET Core API project. After some research, I found what I thought were the correct project.json references: { "version": "1.0.0-*", "compilationOp ...

c#asp.netasp.net-corednxdirectoryservices

Does this CSS identifier align with the specifications?

There appears to be an issue. The styles assigned to the second element should change when hovering over it, only if the third element has the class .active. CSS: li:nth-child(3).active ~ li:nth-child(2):hover HTML: <ul> <li> < ...

htmlcsscss-selectors

Table design variation for desktop and mobile display

I'm new to this location and could really use some assistance. I'm trying to create a page that can be viewed on both desktop and mobile devices, featuring a table. On desktop, the table displays as follows: th1 th2 th3 td1-1 ...

htmlcssmobiletablelayout

Trouble with Grayscale Display in Internet Explorer 11

Is there a way to display an image in grayscale when it first loads, and then show its original colors when the user hovers over it? I attempted the following code, which works in Chrome but not in IE: CSS code : .testImage img { -webk ...

htmlcssinternet-explorergrayscale

Collecting Information with foreach Loop for ClosedXML

I am currently working on a C# ASP.NET MVC5 project that involves a Ticket model. One of the requirements is to export all the ticket data from the database into an Excel spreadsheet using ClosedXML. I have implemented an action specifically for this task, ...

c#asp.netasp.net-mvcclosedxml

What could be the reason for the hover attribute not functioning properly in NextJS

Why isn't my CSS recognizing the hover attribute? Here is my code: I would like the class "mega" to appear when hovering over the li tag. <nav className="mobile-hide"> <ul className="flex-item second-links&quo ...

htmlcssnext.js13

How can I design a trapezoid with see-through borders and background?

Using various CSS border tricks, it's possible to create a trapezoid shape. Additionally, setting the border-color to rgba(r,g,b,a) can make it transparent. However, is there a way to create a trapezoid with both transparent borders and background? ...

javascripthtmlcsscss-shapes

Arrange elements in a vertical flow based on the height of the container

I am attempting to alter the direction of Elements to be vertical. Here is an example: By default, HTML elements are displayed horizontally like this:- #container { position: absolute; width: 400px; height: 200px; border: 1px solid gree ...

javascriptjqueryhtmlcss

An external element has generated an error

My ASP.NET website, programmed in C#, recently started experiencing an issue with calling a C++ method using the DLLImport feature. Everything was functioning properly until this error started occurring: An external component has caused an exception. De ...

c#asp.netc++