Databases
StackOverflow2013
Postsdbo
POGridView - Add Padding to Cells with CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGridView - Add Padding to Cells with CSS
    primarykey
    data
    text
    <p>I'm using CSS to style a GridView. I have everything working fine except for the padding in the cells that contain the data. I've googled and found multiple solutions that involve another style on the Item when using Bound fields. However, I am not using bound fields. I am binding to a List(Of MyObject). How would I add padding around the data in the cells?</p> <p>One almost-solution was to style the TR and TD elements. This works fine ... until I add paging to the GridView. The padding also applies to the page counters, which I do not want. This is because the paging row is just another TR in the rendered HTML table.</p> <p>Here's a little of what I have going on:</p> <p>.aspx Page:</p> <pre><code> &lt;asp:GridView ID="gvTerritories" runat="server" CssClass="gridview" AutoGenerateSelectButton="True" GridLines="None" AllowPaging="true" PageSize="10"&gt; &lt;HeaderStyle CssClass="gridViewHeader" /&gt; &lt;RowStyle CssClass="gridViewRow" /&gt; &lt;AlternatingRowStyle CssClass="gridViewAltRow" /&gt; &lt;SelectedRowStyle CssClass="gridViewSelectedRow" /&gt; &lt;PagerStyle CssClass="gridViewPager" /&gt; &lt;/asp:GridView&gt; </code></pre> <p>CSS:</p> <pre><code>.gridview { font-family: Arial; background-color: #FFFFFF; border: solid 1px #CCCCCC; } .gridViewHeader { background-color: #0066CC; color: #FFFFFF; padding: 4px 50px 4px 4px; text-align: left; border-width: 0px; border-collapse: collapse; } .gridViewRow { background-color: #99CCFF; color: #000000; border-width: 0px; border-collapse: collapse; } .gridViewAltRow { background-color: #FFFFFF; border-width: 0px; border-collapse: collapse; } .gridViewSelectedRow { background-color: #FFCC00; color: #666666; border-width: 0px; border-collapse: collapse; } .gridViewPager { background-color: #0066CC; color: #FFFFFF; text-align: left; padding: 0px; } </code></pre> <p>The <code>gridViewHeader</code> class doesn't apply the padding to the TH row. The <code>gridViewPager</code> class doesn't apply the padding of 0px to the rendered HTML in the "pager" TR.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USHardCode
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGridView - Add Padding to Cells with CSS
      1. USMoran Monovich
      1. VTFavorite
    2. VO
      singulars
      1. POGridView - Add Padding to Cells with CSS
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHave you tried adding the padding to your gridView style?
      singulars
      1. POGridView - Add Padding to Cells with CSS
      1. USGerm
    2. COYes. It didn't work - I can't remember, but it either added the padding to the Pager section, or added none at all.
      singulars
      1. POGridView - Add Padding to Cells with CSS
      1. USHardCode
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload