• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1838
  • Last Modified:

CSS GridView Problem

Hi All,

In my ASP:GridView, I wish to add a border-radius and margin-bottom for each tablerow in the GridView results.

By looking at the source in a browser, I would need to apply this to the tr. But as far as im aware you cannot apply a border-radius and a margin to a tr?

Please see attached code, aspx and the CSS;

            <asp:GridView ID="GV_CLAIMSELECT" DataSourceID="SQLDS_CLAIMSSELECT" runat="server" AutoGenerateColumns="false" AllowPaging="true" PageSize="10" CssClass="GridView" GridLines="None"
                PagerSettings-Mode="NumericFirstLast"
                PagerSettings-FirstPageImageUrl="~/images/layout/ClaimSelectFirstRecord.png"
                PagerSettings-LastPageImageUrl="~/images/layout/ClaimSelectLastRecord.png"
                PagerSettings-PageButtonCount="5">
                <RowStyle CssClass="GridViewRow" />
                <Columns>
                    <asp:TemplateField HeaderStyle-CssClass="GridViewHeader" HeaderStyle-Width="120px" HeaderText="YOUR REF" ItemStyle-CssClass="GridViewItemWithDevider" ItemStyle-Width="120px">
                        <ItemTemplate>
                            <input id="BTN_REF_SELECT_1" type="button" class="ResultsRefSelectButton" onclick="window.location.href='broker_portal-claim_details.aspx'; return false;" title="View Ref: <%# Eval("Ref")%>" /> <%# Eval("SOURCE_REF")%>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="CLIENT_VEH_REG" HeaderStyle-CssClass="GridViewHeader" HeaderStyle-Width="97px" HeaderText="VEH REG" ItemStyle-CssClass="GridViewItemWithDevider" ItemStyle-Width="97px" />
                    <asp:TemplateField HeaderStyle-CssClass="GridViewHeader" HeaderStyle-Width="389px" HeaderText="CLIENT" ItemStyle-CssClass="GridViewItemWithDevider" ItemStyle-Width="389px">
                        <ItemTemplate>
                            <%# UCase(Eval("CLIENT_TITLE") & " " & Eval("CLIENT_INITIAL") & " " & Eval("CLIENT_SURNAME"))%>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderStyle-CssClass="GridViewHeader" HeaderStyle-Width="177px" HeaderText="KAM REF/HANDLER" ItemStyle-CssClass="GridViewItemWithDevider" ItemStyle-Width="177px">
                        <ItemTemplate>
                            <input id="BTN_EMAIL_HANDLER" type="button" class="ResultsEmailHandlerButton" title="Email: <%# Eval("CLAIMS_HANDLER_EMAIL")%>" /><%# Eval("Ref")%>/<%# Eval("CLAIMS_HANDLER")%>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderStyle-CssClass="GridViewHeader" HeaderStyle-Width="107px" HeaderText="HIRE STATUS" ItemStyle-CssClass="GridViewItem" ItemStyle-Width="107px">
                        <ItemTemplate>
                            <%# UCase(Eval("HStatus"))%>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <PagerStyle CssClass="GridViewPager" />
            </asp:GridView>

/*GridView CSS*/
.GridView {
    position: relative;
    overflow: hidden;
    clear: both;
    width: 890px;
    margin: 0px auto 20px auto;
}

.GridViewHeader {
	font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 14px;
	font-weight: normal;
	color: #5191CD;
	text-align: left;
	padding: 0px 4px 10px 4px;
}

.GridViewRow {
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
}

.GridViewRow tr {
    border-radius: 12px;
    -khtml-border-radius: 12px;
    -moz-border-radius: 12px;
    -o-border-radius: 12px;
    -webkit-border-radius: 12px;
}

.GridViewItem,
.GridViewItemWithDevider {
	font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 12px;
    padding: 6px 4px 6px 4px;
}

.GridViewItemWithDevider {
    background: right 1px repeat-y url('/images/layout/1px4pxDottedVertical.png');
}

.GridViewPager td {
	font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 12px;
	color: #999999;
    padding: 10px 0px 0px 0px;
}

.GridViewPager span {
    font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 12px;
	color: #333333;
    padding: 0px 2px 0px 2px;
}

.GridViewPager input:image {
    width: 14px;
    height: 14px;
    border: 1px solid #E6E6E6;
    border-radius: 7px;
	-khtml-border-radius: 7px;
    -moz-border-radius: 7px;
	-o-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.GridViewPager a {
    font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 12px;
	color: #999999;
    padding: 0px 2px 0px 2px;
}

.GridViewPager a:hover {
    color: #5191CD;
    text-decoration: none;
}

.GridViewPager a:selected {
    color: #333333;
}

Open in new window

0
marc_butler
Asked:
marc_butler
  • 8
  • 6
2 Solutions
 
Kyle HamiltonData ScientistCommented:
you  an achieve the margin-top by applying it to the td's.

Then apply the border-radius to the td's like so:

tr td:first-child{
  -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

tr td:last-child{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

Open in new window


keep in mind that neither last-child nor border-radius work in IE < 9
0
 
marc_butlerAuthor Commented:
Hi Kozaiwaniec,

I have successfully applied the border-radius, but I still cannot get the margin working. Is the below CSS correct?

tr.GridViewRow td {
    margin-top: 10px;
}

tr.GridViewRow td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    -khtml-border-top-left-radius: 12px;
    -khtml-border-bottom-left-radius: 12px;
    -moz-border-top-left-radius: 12px;
    -moz-border-bottom-left-radius: 12px;
    -o-border-top-left-radius: 12px;
    -o-border-bottom-left-radius: 12px;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-bottom-left-radius: 12px;
}

tr.GridViewRow td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    -khtml-border-top-right-radius: 12px;
    -khtml-border-bottom-right-radius: 12px;
    -moz-border-top-right-radius: 12px;
    -moz-border-bottom-right-radius: 12px;
    -o-border-top-right-radius: 12px;
    -o-border-bottom-right-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -webkit-border-bottom-right-radius: 12px;
}

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
You could try using border-spacing: 10px

Have a look here for styling tables
http://www.quirksmode.org/css/tables.html
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
marc_butlerAuthor Commented:
Im afraid im still getting no where.

Can you actually do this? lol
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

FYI... border-radius cannot be applied to tables!!!

You can apply for DIV!

Instead wrap the content of TD in a DIV and apply the border-radius!

Hope it helps u...
0
 
Kyle HamiltonData ScientistCommented:
table{
border-spacing:0 10px;
}
According to Quirks, this should work. This will apply 10px on top and bottom of cells.
0
 
marc_butlerAuthor Commented:
Im afraid the table CSS didn't work either.

Could you show me how to wrap the rows in a div?
0
 
Kyle HamiltonData ScientistCommented:
you cant wrap the rows in a div - that would be against the rules - haha.

you can wrap the contents of a td in a div:

<tr>
<td><div>contents</div></td>
<td><div>contents</div></td>
<td><div>contents</div></td>
</tr>
0
 
marc_butlerAuthor Commented:
Thank you, but I don't think that would solve my prblem.

This would only add a margin to the internal height of the td. This would then display the td's background color and not the color behind the tr.

It's very strang that this is so difficult. Normally CSS and ASP.Net controls are so easy to intergrate.
0
 
Kyle HamiltonData ScientistCommented:
yes, you're right about the div wrapper of course.

I'm surprized the border-spacing didn't work. Here is an example where it does work:

http://candpgeneration.com/EE/table-border.html
(view source)

make sure you don't have border-collapse set to collapse

I haven't looked at it in IE yet
0
 
Kyle HamiltonData ScientistCommented:
dosn't work in IE.

This is kind of icky, but... another workaround would be to put an empty row between each row and give it a class "empty" and then use css to make sure those row td's don't get any background colors, etc.. so it looks transparent.

Going back to the div wrapping idea, you could wrap the td's in divs, and apply the background color to the div  not the td (nor tr).
0
 
marc_butlerAuthor Commented:
OK, I think ive found the problem then. When the GridView is generating the html table, it is automatically putting this on the style of the table;

<table class="GridView" cellspacing="0" border="0" id="GV_CLAIMSELECT" style="border-collapse:collapse;">

And I cannot find an option in the asp:gridview to switch it off. Any ideas on this problem?

Marc
0
 
Kyle HamiltonData ScientistCommented:
Sorry, I don't work in asp. But that something would inject inline styles is just anathema! But it doesn't matter, the border-spacing doesn't work in any version of IE anyway.
0
 
marc_butlerAuthor Commented:
I've finally sorted it. :-)

I hate CSS. lol

Thank you for all of your assistance.

Marc

/*GridView CSS*/
.GridView {
    width: 890px;
	border-collapse: separate !important;
	border-spacing: 0px 4px;
    margin: 0px auto 20px auto;
}

th.GridViewHeader {
	font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 14px;
	font-weight: normal;
	color: #5191CD;
	text-align: left;
	padding: 0px 4px 0px 4px;
}

tr.GridViewRow td {
    background-color: #FFFFFF;
	border-collapse: collapse !important;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
}

tr.GridViewRow td:first-child {
	border-collapse: collapse !important;
    border-left: 1px solid #E6E6E6;
    border-radius: 10px 0px 0px 10px;
    -khtml-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    -o-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
}

tr.GridViewRow td:last-child {
	border-collapse: collapse !important;
    border-right: 1px solid #E6E6E6;
    border-radius: 0px 10px 10px 0px;
    -khtml-border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    -o-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
}

.GridViewItem,
.GridViewItemWithDevider {
	font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 12px;
    padding: 6px 4px 6px 4px;
}

.GridViewItemWithDevider {
    background: right 1px repeat-y url('/images/layout/1px4pxDottedVertical.png');
}

tr.GridViewPager td {
	font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 12px;
	color: #999999;
}

tr.GridViewPager span {
    font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 12px;
	color: #333333;
    padding: 0px 2px 0px 2px;
}

tr.GridViewPager input:button {
    width: 14px;
    height: 14px;
    border: 1px solid #E6E6E6;
    border-radius: 7px;
	-khtml-border-radius: 7px;
    -moz-border-radius: 7px;
	-o-border-radius: 7px;
    -webkit-border-radius: 7px;
}

tr.GridViewPager a {
    font-family: AvenirLTStd55RomanRegular, Arial;
	font-size: 12px;
	color: #999999;
    padding: 0px 2px 0px 2px;
}

tr.GridViewPager a:hover {
    color: #5191CD;
    text-decoration: none;
}

tr.GridViewPager a:selected {
    color: #333333;
}

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
:)
cheers.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now