Hoe to make space between page navigation links

Question

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

<PagerSettings Mode="NextPrevious" PreviousPageText="previous" NextPageText="next" LastPageText="" />

Midhun T P · 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 Rajab · Answer

Thanks Midhun I figured out it basically by this css .myclasstd{ padding-right:50px; } Thanksfor your help

Joma Rajab · Answer

it is not coming up even it is in the style sheet file

Midhun T P · Answer

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 Rajab · Answer

Yes I added it tr.myclassa{padding-right:20px;}

Midhun T P · Answer

Hi Have you added this style in your page? tr.myclass a { padding-right: 20px; }

Joma Rajab · Answer

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 T P · Answer

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 Rajab · Answer

this the pic of inspecting the page

Midhun T P · Answer

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 Rajab · Answer

Thanks Midhun I have checked it bu inspecting the page but there is no style for it please help

Midhun T P · Answer

Hi Can you please check inspect element in browser by pressing f12 and confirm whether the button got those styles?

Joma Rajab · Answer

Thanks Midhun I did it but it still the same no thing changed

Bikesh Srivastava · Answer

Hi You can use css to make psace margin

Midhun T P · Answer

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;}