2 Replies - 4976 Views - Last Post: 21 May 2010 - 02:44 PM

#1 MarmiteX1  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 159
  • Joined: 17-October 09

Gridview Styling problem using CSS

Posted 21 May 2010 - 09:41 AM

Hi,

I am trying to style the gridview using CSS so that the surrounding borders and headers are removed but i am having issues regarding this. The changes are not being made apart from the border-style.

Here is my sample CSS code

#ProductGrid
{
	border-style:none;
	border-top:none;
	border-bottom:none;
	
}

#ProductGrid table
{
	border-style:none;
	margin-left:6%;
	
}

#ProductGrid td
{
	border-style:none;
}

#ProductGrid tr
{
	border-style: none;
}

#ProductGrid th
{
	border-style:none;
}



So when i view the page in the web browser the Gridview is still displayed with its original styling set. Do i have to disable the Gridview Styling in the properties of Visual Studio in order to use my CSS?

Thanks,

Is This A Good Question/Topic? 0
  • +

Replies To: Gridview Styling problem using CSS

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4187
  • View blog
  • Posts: 11,845
  • Joined: 18-April 07

Re: Gridview Styling problem using CSS

Posted 21 May 2010 - 11:22 AM

Have you tried actually setting the width to 0? If you don't want a border to show, you can typically use something like border-top: 0px; which of course says make the border have no width.

Give that a try. If that doesn't work, you may have to make style changes through visual studio since it may be using a template of some sort.

:)
Was This Post Helpful? 0
  • +
  • -

#3 keakTheGEEK  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 107
  • View blog
  • Posts: 344
  • Joined: 23-February 10

Re: Gridview Styling problem using CSS

Posted 21 May 2010 - 02:44 PM

Also keep in mind that when you use a master page in your ASP .NET website, More information is added to your server control IDs in the rendered HTML. In most cases the controlId is preceded with the ID of the container it's in. I typically use css classes instead of referencing the controls id specifically.

.ProductGrid
{
        border-style:none;
        border-top:none;
        border-bottom:none;
        
}

.ProductGrid table
{
        border-style:none;
        margin-left:6%;
        
}

.ProductGrid td
{
        border-style:none;
}

.ProductGrid tr
{
        border-style: none;
}

.ProductGrid th
{
        border-style:none;
}



Then you can set the CssClass attribute equal to .ProductGrid in the mark up on the aspx page where you create the Gridview.

 <asp:GridView ID="GridView1" runat="server" CssClass="ProductGrid">
          <%-- Rest of your code --%>
 </asp:GridView>



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1