The page numbers on the GridView are displayed in distant columns, appearing far apart from

My gridview is displaying page numbers in separate columns instead of together in the center. How can I bring the page numbers together in the center?

 <asp:GridView ID="GridView1" runat="server" Width="100%" OnRowCommand="GridView1_RowCommand" CssClass="GridStyle" AllowPaging="true" AllowSorting="True" AutoGenerateColumns="False" BorderColor="Black" OnPageIndexChanging="GridView1_PageIndexChanging"> 

 <PagerStyle Font-Underline="false" BorderColor="White" BorderStyle="None" BorderWidth="0"  />

https://i.sstatic.net/6a9nO.png

CSS

.GridStyle {
table-layout: auto;
border: 1px solid black;
background-color: White;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
/*border-collapse: collapse;
margin-bottom: 0px;*/
}

.GridStyle tr {
    border: 1px solid black;
    color: black;
    background-color: #E5E4F2;
    height: 25px;
}


.GridStyle th {
    background-color: white;
    border: none;
    text-align: left;
    font-weight: bold;
    font-size: 15px;
    padding: 4px;
    color: black;
}


.GridStyle tr th a, .GridStyle tr th a:visited {
    color: red;
}

.GridStyle tr th, .GridStyle tr td table tr td {
    color: #484585;
    border: 1px solid black;
}

.GridStyle td {
    border-bottom: 1px solid black;
    padding: 2px;
}

How can I adjust the CSS to center the page numbers in one column?

Answer №1

The CSS class attributed to gridViewPager might be determining the size of the page number elements based on the width of the table.

We recommend reviewing gridViewPager, especially in relation to any instances of width: 100%;.

Answer №2

The pagination system within a GridView is actually a nested table, which means it may be receiving a width property of `100%` from a parent element by default.

In the HTML code, the pagination section appears like this.

<tr>
    <td colspan="8">
        <table>
            <tr>
                <td><span>1</span></td>
                <td><a href="javascript:__doPostBack(&#39;ctl00$mainContentPane$GridView1&#39;,&#39;Page$2&#39;)">2</a></td>
                <td><a href="javascript:__doPostBack(&#39;ctl00$mainContentPane$GridView1&#39;,&#39;Page$3&#39;)">3</a></td>
            </tr>
        </table>
    </td>
</tr>

To resolve this, you have the option to either correct the inherited width property or assign a specific class to the pagination section.

<PagerStyle CssClass="pagerCssClass" Font-Underline="false" BorderColor="White" BorderStyle="None" BorderWidth="0" />

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

Position the input element in the middle of the div

Is it possible to center a form input element within a div element without it changing position when the browser window size is adjusted? I attempted using margin: auto and position: relative, but encountered issues with the element moving. How can this be ...

What are the steps to add 8 columns to the second row in my table?

this is an example of HTML code that showcases a table structure with multiple rows and columns. You can view the full code snippet here. The table includes different sections, such as section1, section2, section3, and section4 in the first row (tr). In t ...

Are you in favor of side-to-side scrolling?

I can't quite recall where I've encountered this concept before, but I do know that there must be a method for creating a horizontal scroll. Imagine you have multiple DIVs in the following structure: <div class="container"> <div> ...

Confirming the authenticity of a newly added user input with the help of jQuery

Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears. In additio ...

Dynamically modifying the styling of elements within an iframe

In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...

The arrangement of Input and Label elements in HTML can impact the overall style of the

Having some checkboxes and labels, I'm using CSS to style the label when the checkbox is checked: input[type=checkbox]:checked + .CheckLabels {background-color: green;} When my HTML is structured like this: <input type="checkbox" name="C" id="ch ...

Try placing the div class above the navbar in Bootstrap

I've created these fork me ribbons in CSS with the intention of placing them on top of the navbar, similar to the Github images. Here is how they currently appear: http://jsbin.com/womib/1 .ribbon { background-color: #F38419; overflow: h ...

apply jQuery to add a class to the parent element when clicked

I am currently facing an issue with my code. It was working fine in jsFiddle, however, when I try to use it outside of fiddle, I am getting errors and it's not working properly. $('.down-photo').click(function() { $(this).parent(&apos ...

Tips for sending arrays to a webservice using asp.net

I'm encountering an issue while trying to pass an array as a parameter in ajax. I'm receiving an error regarding deserialization. Can someone please assist me in understanding how to correctly pass arrays to a web service? Error {"Message":"Typ ...

Adjust the order of list items based on the resolution change

Is there a way to rearrange the order of the list items in an ul when the screen resolution changes, specifically having the last li appear in the first place? Edit: I am attempting to achieve this by using flexbox. .postpreview ul { list-style: none; d ...

I am looking to ensure that the ul li a() elements remain hidden until I hover over the h2 tag, at which point they will be displayed

Insert your code here : <table cellpadding="0" cellspacing="0" align="center" class="TblGreen"> <tr> <td> <h2><a href="#" class="AGreen">Sweater</a></h2> <p>The coding business</p> ...

The div stops scrolling after the Matrix3d transformation is applied, causing the scrolling functionality to cease

The issue arises when attempting to scroll the #content div, as it seems unresponsive. Oddly enough, scrolling with the scrollbar does work: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

Display two images consecutively within a single img tag

My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a t ...

Customizing Your WooCommerce Storefront: Tips for Enhancing Your Product Catalog and Minimizing White Space

Lately, I've been working on enabling a product filter in the left sidebar of my Woocommerce theme. However, I have noticed that the layout is not quite how I would like it to be. Take a look at this image that shows the changes I am aiming for. Cur ...

Is it possible to convert and download the EVO PDF Converter while also accessing the web page simultaneously?

Currently, I am utilizing EVO PDF to merge multiple web pages into a singular PDF file. The following code exemplifies this process and it functions as intended. However, if I deactivate the segment containing System.Web.HttpResponse and replace it with Re ...

The alignment and sizing issues with stacking icons using fontawesome are still unresolved

I have been exploring the use of stacked icons with fontawesome, following a helpful blog post by Dave Gandy. Although stacking is working well, I am facing an issue aligning a stacked icon with a non-stacked icon (which is fa-5x). It's challenging t ...

Bring in an SVG element from a separate document while retaining the CSS <style> details from the original source

Creating a number of SVG files can be made easier by keeping common symbols in one file and importing them into others. An effective method for achieving this is using the <use> element: <use href="common.svg#symbol1" /> However, th ...

Is it possible to incorporate percentage-based widths within a fixed layout design on a webpage?

I've been delving into the concepts of fixed, fluid, and responsive web page design. One of the resources I stumbled upon is this article about fixed vs. fluid layouts. In the article, it mentions that "A fixed website layout has a wrapper that is a f ...

Customize the design of a React Material-UI select dropdown by overriding

I am currently utilizing the React MUI Select Component for my forms, specifically for language selection. My issue arises when I need a different style for the dropdown menu of the language Select component. Overriding the relevant class would apply this ...

Jumbotron causes navigation bar to malfunction on mobile site

I'm experiencing an issue with Bootstrap Jumbotrons on my website - they extend beyond the container, causing the navbar on the mobile version to not fill the screen. This problem only occurs on pages with a jumbotron present. Attempting to use a Car ...