.gv_header
{
background-color:#0033CC;
color:White;
}
.gv tr:hover
{
background-color:#0034CD;
color:Yellow;
}
<asp:GridView ID="gv_asig" runat="server" CssClass="gv" >
.....
<HeaderStyle CssClass="gv_header" />
<FooterStyle CssClass="gv_footer" />
</asp:GridView>
How to retain the white letters when i hover the headers?, instead of becoming yellow too
You can do more specific your css to keep it white, add this after the .gv tr:hover
.gv .gv_header:hover {
color:#fff;
}
Related
I want the hyperlink centered in the cell of GridView, this is the code for the grid column:
<asp:TemplateField HeaderText="Ticket#" ItemStyle-HorizontalAlign="Center" SortExpression="ows_ID">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
</asp:TemplateField>
HorizontalAlign="Center" doesn't work, nor does ItemStyle-HorizontalAlign="Center". I have set style as described here and that doesn't work either. FYI, bootstrap is involved also. What am I missing? Some setting in the grid declaration? Please help.
In your CSS file, edit the style for td tag.
td
{
text-align: center;
}
GridView will be converted to table structure when rendered on webpage. So GridView takes styles of table
You can do it with css:
Here is a demo from this post: post
And you have to add a css class to the table cell and wrap your css into the class, otherwise it will align all td's that way!
td {
height: 100%;
}
a {
display: table;
position: relative;
height: 100%;
width: 100%;
background-color: yellow;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
background-color: red;
}
This can achieve by two methods
1- try to use
< center >
< ItemTemplate >
' Font-Underline="false" NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
< /center >
2- Or you simply goto view souce file of your webpage
try to find rendered html of hyperlink ....and then place your
< asp:Hyperlink >
inside a < span class="class1"> < /span >
< style > .class1 { text-align:center; }
< /style >
The only thing that worked was to place a div around the Hyperlink with alignment in the div.
<div style="text-align:center">
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</div>
I need to change a gridview cell's color depending on the color of another gridview cell. How can I read the background color value of a specific cell? Say I'm trying to do it in the rowdatabound event...
Dim Color as String = e.Row.Cells(0)????
EDIT
I need to read the cell background color in the rowdatabound event when the background color was set in the markup like so:
CSS
.GridviewRowStyle
{
background-color: #E6B9B8;
color: #000000;
font-weight:bold;
}
.SummaryGridViewStyle
{
width: 100%;
border: 2px solid #000000;
}
Markup
<asp:GridView ID="grdSummary" runat="server" OnDataBound="grdSummary_DataBound" OnRowDataBound="grdSummary_RowDataBound" AutoGenerateColumns="false" Gridlines="None" HorizontalAlign="Center" CssClass="SummaryGridViewStyle" >
<RowStyle CssClass="GridviewRowStyle" />
...
Get it using ...
e.Row.Cells(0).BackColor
How can i change the fore color of the asp button on disabled mode for IE6 and above
Reference
CSS
[disabled]#DisabledButton
{
color: #933;
background-color: #ffc;
}
Mark Up
<asp:Button ID="DisabledButton" runat="server" Text="Hello Guest"
Enabled="false" />
I have an ASP.NET GridView with paging enabled. The list of page indexes are not listed close to each other. Instead, there's like 80px between each page index. Is there a property which controls this?
You can use PagerStyle, here is a skin I use
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" CssClass="lightTable">
<HeaderStyle BackColor="#EAEEEF" />
<AlternatingRowStyle BackColor="#F7F9F8" />
<PagerStyle CssClass="tablePagingFooterDirectory" />
</asp:GridView>
Also it renders as a table by default, so this css can be used
.tablePagingFooterDirectory td { padding: 1px; background-color: #EAEEEF; }
tr.tablePagingFooterDirectory table td { color: #434F5E; border:none; }
I found that there was a 'table {width: 100%} css declaration which caused the issue.
I created a GridView in an ASP.NET application and used the Auto Format tool to apply an attractive style. Now I'm moving the style markup to the CSS sheet and I'm having a weird problem where the text in the header row isn't the correct color (it should be white but it shows up a bright blue). This problem only shows up when I turn sorting on.
Everything else works fine. For example, I can change the header background to red and it turns red and the rest of the grid styles are applied appropriately.
Anybody have any clues about what the deal is? I've included code snippets below. I'm also fairly new to CSS. If anyone has any tips to make my CSS markup better in some way, let me know.
Thanks!
Here is the ASP.NET code. I can add ForeColor="White" to the HeaderStyle and everything works normally.
<asp:GridView ID="GridView1" runat="server" CssClass="grid"
AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1"
EmptyDataText="There are no data records to display." AllowSorting="True"
CellPadding="4" GridLines="Both">
<FooterStyle CssClass="grid-footer" />
<RowStyle CssClass="grid-row" />
<Columns>
<asp:BoundField DataField="Kingdom" HeaderText="Kingdom"
SortExpression="Kingdom" />
<asp:BoundField DataField="Phylum" HeaderText="Phylum"
SortExpression="Phylum" />
<asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)"
SortExpression="GenusSpeciesStrain" />
<asp:BoundField DataField="Family" HeaderText="Family"
SortExpression="Family" />
<asp:BoundField DataField="Subfamily" HeaderText="Subfamily"
SortExpression="Subfamily" />
<asp:BoundField DataField="ElectronInput" HeaderText="Electron Input"
SortExpression="ElectronInput" />
<asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout"
SortExpression="OperonLayout" />
</Columns>
<PagerStyle CssClass="grid-pager" />
<SelectedRowStyle CssClass="grid-selected-row" />
<HeaderStyle CssClass="grid-header" />
<EditRowStyle CssClass="grid-row-edit" />
<AlternatingRowStyle CssClass="grid-row-alternating" />
And this is the content from style sheet I'm using:
body {
}
.grid
{
color: #333333;
}
.grid-row
{
background-color: #EFF3FB;
}
.grid-row-alternating
{
background-color: White;
}
.grid-selected-row
{
color: #333333;
background-color: #D1DDF1;
font-weight: bold;
}
.grid-header, .grid-footer
{
color: White;
background-color: #507CD1;
font-weight: bold;
}
.grid-pager
{
color: White;
background-color: #2461BF;
text-align: center;
}
.grid-row-edit
{
background-color: #2461BF;
}
I'm guessing the bright blue is very similar to the color of a hyperlink.
Making the gridview sortable means you'll have an a tag inside your header instead of just plain text.
This should sort it:
.grid-header a { color: White; background-color: #507CD1; font-weight: bold; }
This is the only way I can get it to work:
.HeaderStyle a
{
background-color: #DE7B0A;
color: White!important
}
I've noticed that the .aspx that gets rendered puts a style="color:#333333" tag on the link itself. Making the color option !important to override the default rendering is the only way I can get it to work.
Hope that helped someone.
The following worked for me. Add:
.grid-header th a
{
color: White;
}
The "th a" works regardless of AllowSorting.
I'm not sure how you're getting a white background on your header w/ or w/o the sorting because you have your grid-header background set that blue color (#507CD1) in your CSS:
.grid-header, .grid-footer { color: White; background-color: #507CD1; font-weight: bold; }
here's what it needs to be if you want the header background white (you'll need change the font color to something darker also):
.grid-header, .grid-footer { color: #000; background-color: #fff; font-weight: bold; }
and you also need to remove the ForeColor from the GridView's HeaderStyle attribute to be able to see the text in your header like so:
<HeaderStyle CssClass="grid-header" />
The header color in the stylesheet is correct: #507CD1 is bright blue. Where does it show up as white, then? In Visual Studio's designer? Do you mean for the header background to be white, or the text?
Also, it couldn't hurt to remove the ForeColor="White" from the markup. It's already in the stylesheet.
Update: I haven't read the question thoroughly enough, my apologies. The above is nonsense. (Or the question has been modified while I was composing my answer. Don't know)
Note that the addition of the th in style that James in Indy suggested , as in
.grid-header th a { color: White; }
will prevents links in pager section from being effected by setting you use for sort column.