Hoe to make space between page navigation links

Joma Rajab

10y1.4k.NET

I am using grid view and I set next and previous link to navigate the grid view, so when I go to middle page of grid view the previous and next links close to each other which looks not as one word and this not good . please help how make space between them

this my code and screenshot of the grid view links

"NextPrevious" PreviousPageText="previous" NextPageText="next" LastPageText="" />

15 Replies

Know the answer? Post it — somebody with the same question will find it here.

Midhun Tp10y ago
Accepted answer
Hi,
Actually that is the way we give a class to gridview paging. I couldn't find a reason why it is not coming in your gridview. Please check my screenshot below and provide a screenshot having the parent tr of buttons which i marked in red. Just want to make sure whether that class is appended for tr or not.
Joma Rajab10y ago
Thanks Midhun
I figured out it basically by this css
.myclasstd{
padding-right:50px;
}
Thanksfor your help
Joma Rajab10y ago
it is not coming up even it is in the style sheet file
Midhun Tp10y ago
Is the class "myclass" added to tr? Just search for myclass by selecting inspect element. If no, just provide me a screeenshot of inspect element showing the buttons and their parent tr, tbody and table as in my screenshot.
Joma Rajab10y ago
Yes I added it
tr.myclassa{padding-right:20px;}
Midhun Tp10y ago
Hi,
Have you added this style in your page?
Joma Rajab10y ago
Yes I put this inside grid view tag but when I click on the link in the inspecting window there is no style for it
this is my grid view code
"100%"Height="100%"ID="GridView1"runat="server"
AllowPaging="True"PageSize="7"AllowSorting="True"AutoGenerateColumns="False"CellPadding="4"DataKeyNames="UniID"DataSourceID="SqlDataSource2"
EmptyDataText="Therearenodatarecordstodisplay."ForeColor="Black"BackColor="LightGoldenrodYellow"BorderColor="Tan"BorderWidth="5px">
"myclass"/>
"NextPrevious"PreviousPageText="previous"NextPageText="Next"LastPageText="previous"/>
"PaleGoldenrod"/>
"UniID"HeaderText="UniID"ReadOnly="True"SortExpression="UniID"/>
"user_type"HeaderText="user_type"SortExpression="user_type"/>
"Full_Name"HeaderText="Full_Name"SortExpression="Full_Name"/>
"Password"HeaderText="Password"SortExpression="Password"/>
"EmailAddress"HeaderText="Email_Address"SortExpression="EmailAddress"/>
"PhoneNo"HeaderText="Phone_No"SortExpression="PhoneNo"/>
"Address"HeaderText="Address"SortExpression="Address"/>
"Tan"/>
"Tan"Font-Bold="True"/>
"PaleGoldenrod"ForeColor="DarkSlateBlue"HorizontalAlign="Center"/>
"DarkSlateBlue"ForeColor="GhostWhite"/>
"#FAFAE7"/>
"#DAC09E"/>
"#E1DB9C"/>
"#C2A47B"/>
Midhun Tp10y ago
Hi,

Have you wrote this line inside Gridview?

If yes you will get a class "myclass" for the parent tr of these buttons. Please check the screenshot.
Joma Rajab10y ago
this the pic of inspecting the page
Midhun Tp10y ago
Hi Joma, can you post a screenshot of the inspect element of the buttons. I just want to see the html structure of your buttons.
Joma Rajab10y ago
Thanks Midhun
I have checked it bu inspecting the page but there is no style for it
please help
Midhun Tp10y ago
Hi,
Can you please check inspect element in browser by pressing f12 and confirm whether the button got those styles?
Joma Rajab10y ago
Thanks Midhun
I did it but it still the same no thing changed
Bikesh Srivastava10y ago
Hi,
You can use css to make psace ,"margin"
Midhun Tp10y ago
Hi,
You can manage it by css. Just give this property in Grid view -

Now your next previous button will be inside a "tr" with class "myclass". Now you give style to your buttons using css like below -
tr.myclass a{padding-right:20px;}