Q1. I have a hyperlink field in a grid view as below :
<asp:HyperLinkField Text="Analyze" />
I want it to be underlined at all times and not only when I hover. How do I do this ?
Q2. I want the header texts of the gridView to be center alligned.
I tried: HeaderStyle-HorizontalAlign="Left" but it doesn't work.
I also tried making a css class with :
<style type="text/css">
.header-center{
text-align:center;}
</style>
but this also doesn't work.
I am basically trying to center the header text,nothing fancy,but it is not happening.
You have to replace your code in BodyContent with the below.
Note: you can add your own colors to the grid
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style type="text/css">
#MainContent_GridView2 tbody tr th {
text-align: center;
background: #808080;
height: 40px;
}
#MainContent_GridView2 tbody tr {
height: 20px;
background-color: #CCC;
}
#MainContent_GridView2 tbody tr:hover {
background-color: #808080;
}
#MainContent_GridView2 tbody tr td {
text-align: center;
height: 30px;
}
.linkfield {
text-decoration: underline;
text-align: center;
}
</style>
<asp:GridView ID="GridView2"
runat="server"
AutoGenerateColumns="False"
AllowPaging="True"
AllowSorting="True"
PageSize="25"
Height="800px"
Width="1200px"
OnPageIndexChanging="GridView2_PageIndexChanging">
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="runId" DataTextField="runId" HeaderText="RunID" DataNavigateUrlFormatString="RunAnalysis.aspx?runId={0}" ItemStyle-Width="10%">
<ItemStyle Width="10%" CssClass="linkfield"></ItemStyle>
</asp:HyperLinkField>
<asp:BoundField DataField="prodDate" HeaderText="Date" DataFormatString="{0:MM/dd/yy}" ItemStyle-Width="10%">
<ItemStyle Width="10%"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="buildNumber" HeaderText="Build Number" ItemStyle-Width="10%">
<ItemStyle Width="10%"></ItemStyle>
</asp:BoundField>
<asp:HyperLinkField DataNavigateUrlFields="PercentAnalysed" DataTextField="PercentAnalysed" HeaderText="Percent Analysed" ItemStyle-Width="10%">
<ItemStyle Width="10%"></ItemStyle>
</asp:HyperLinkField>
</Columns>
<PagerSettings FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous" />
</asp:GridView>
</asp:Content>
Hope this helps.
Related
I am using the Ajax Modal Popup Extender to display a panel as a modal popup. I've applied a CSS class to the panel and everything displays fine. However, when I add the BackgroundCssClass property to my popup extender, the border on my panel does not show up. The modal background displays properly and everything else in the panel remains the same, but I can't get the border to display. What might be causing this?
**CSS**
.PopupPanel
{
width: 75%;
height: 55%;
text-align: center;
padding: 5px;
overflow: auto;
border-style: solid;
border-width: 8px;
border-color: #0055A5;
background-color: White;
}
.ModalBackground
{
background-color: rgba(170,170,174,0.5);
}
**ASPX**
<asp:Panel ID="InputPanel" runat="server" CssClass="PopupPanel">
<asp:Label ID="HeaderLabel" runat="server"
Text="[text here]"
Font-Size="Large"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="85%"
Height="65%" Wrap="False"></asp:TextBox>
<br />
<asp:Button ID="okButton" runat="server" Text="Submit"
CssClass="genericButton" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel"
CssClass="genericButton" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="InputPanel" TargetControlID="PasteButton"
BackgroundCssClass="ModalBackground" PopupDragHandleControlID="HeaderLabel">
</ajaxToolkit:ModalPopupExtender>
This is my grid view
<div class="gridView">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="MembershipID"
CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" AllowSorting="True"
OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="5">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
THe result of that code is the grid view shows 5 rows and the paging is under the fifth row.
my problem
the pager is not shows so I have to scroll to show it.
my quesiton
how can I make the pager shows without using scroll?
Edit
this is the css
.gridView
{
max-height: 280px;
overflow: auto;
}
.gridView th
{
font-size: 12px;
font-weight: bold;
height: 25px;
white-space: nowrap;
}
The max-height and overflow in the "gridview" class is causing the scroll-bar to appear.
Remove those properties.
Hello!
Can anyone tell me how can I place any Gridview in center in Div or panel? I have applied following CSS but its does not working:
<asp:Panel ID="pnlGrid" CssClass="panel" runat="server">
<div style="text-align:center">
<asp:GridView ID="grdReqApproval" runat="server" AutoGenerateColumns="false" CssClass="SimpleGrid">
<Columns>
<asp:BoundField DataField="Approved By" HeaderText="Approved By" />
<asp:BoundField DataField="User Name" HeaderText="User Name" />
<asp:BoundField DataField="Approval Time" HeaderText="Approvel Time" />
</Columns>
</asp:GridView>
</div>
</asp:Panel>
.panel
{
width: 330px;
padding: 10px;
min-height: 20px;
border: 1px solid #dcdcdc;
margin-left:auto;
margin-right:auto;
}
HorizontalAlign property of Gridview can solve your problem
<asp:Panel ID="pID" runat="server">
<div>
<asp:GridView ID="gvID" runat="server" AutoGenerateColumns="false"
HorizontalAlign="Center">
<Columns>
...
...
</Columns>
</asp:GridView>
</div>
Check this is working for me , Ultimatly gridview get converted to table so the apply following stylesheet to your gridview which i applied to table
CSS
.centered-table {
margin-left: auto;
margin-right: auto;
}
HTML
<div>
<table class="centered-table" border="1">
<tr><td>Pekin</td> <td>Illinois</td></tr>
<tr><td>San Jose</td><td>California</td></tr>
</table>
</div>
JsFiddle Demo
Slight case of thread necromancy, but I was having the same problem and managed to fix it by aligning the code block rather than the gridview itself.
Basically I set the width of the element to 40%, and left to 30% (which means right is also 30%, because maths) and that positions the whole lot, text, grid and all into the middle of the page.
The css looks roughly like this
GridExample
{
position:absolute;
left:30%;
width:40%;
padding:0;
margin:0;
}
on your div text-align: center
as you see here, your class works. Just be sure its parent container is wider so it can center
http://jsfiddle.net/C7ybw/
#container{
width:800px;
border:1px solid #000;
}
.div_text_center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div class="div_text_center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:GridView ID="GridView1" runat="server" HorizontalAlign="Center">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
i am trying to style my second column "mentor name" as i used css it give style to whole Grid i also tried "control styl css class = (some other css file)" and "item styl horizontal align=right" and also change property align = right by using # in css file but template field do not allow "id" to implement css my .aspx page and css ar below,
.mGrid {
width: 100%;
background-color: #fff;
margin: 0px 0 0px 0;
border: 0px #525252;
}
.mGrid table
{
border:0px;
}
.mGrid td {
padding: 2px;
border-width: 0px ;
background-color:#3A3F3E;
color: #fff;
text-align:left;
}
td#Mname {
text-align:left;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background-color:#3A3F3E;
border-width: 0px ;
font-size: 0.9em;
text-align:center;
}
<asp:GridView Width="300px" ID="GridView1" runat="server" AutoGenerateColumns="False"
Font-Size="10pt" OnRowCreated="GridView1_RowCreated" CssClass="mGrid">
<Columns>
<asp:BoundField DataField="mentor_id" HeaderText="Image" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/small_image.png" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mentor Name">
<ItemTemplate>
<asp:Label ID="Label1" Text='<%#Eval("mentor_FirstName")+ "</br> " + "<b>Experience: </b>"+Eval("mentor_experience") %> ' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
hopes for your suggestions thanks in advance
use td+td it will be applied to the Second td of the grid.
.mGrid td+td {
text-align:left !important;
}
.mGrid td+td+td {
text-align:left !important;
}
Here is a good post on this.
Styling the last td in a table with css
1My gridview code is like:
<asp:GridView runat="server"
ID="gvOpenProblems"
AutoGenerateColumns="true"
BorderColor="Black"
OnRowCreated="gvOpenProblems_RowCreated"
OnRowDataBound="gvOpenProblems_RowDataBound"
HeaderStyle-HorizontalAlign="Center"
Width="2000px"
AllowPaging="true"
PageSize="20"
OnPageIndexChanging="gvOpenProblems_PageIndexChanging">
<RowStyle HorizontalAlign="Left" />
<PagerStyle CssClass="gridpager"
HorizontalAlign="Left"
Width="200px" />
And CSS is like:
.gridpager, .gridpager td {
text-align: left;
color: Green;
font-weight: bold;
text-decoration: none;
border: 0;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.gridpager a {
color: Red;
font-weight: normal;
}
This works fine normally but when the number of pages is more than 10, and when I click on 10th page or 11th page all page numbers spread and go out of grid.
Is this a normal issue or is it an issue with the CSS?
The problem is that you're setting the width to 200px. You'd be forgiven for thinking that this applies to the containing table that the paging controls are held in, but it's not, it's the TD that the a & span tags are contained in.