I am unable to find the solution after much searching in too many sites.
Could you please help me how to fix the datagrid header while scrolling vertically?
I applied all the code changes which were given in different sites with no success.
<div class="radgrd1 radgrd123"> <div id="divTransfers" runat="server"> <asp:DataGrid ID="dgPTransfers" AutoGenerateColumns="false" runat="server" ShowFooter="true" CellSpacing="0" border="0" Style="width: 100%; border-collapse: collapse; table-layout: auto; empty-cells: show;" CssClass="MasterTable_Grid"> <HeaderStyle CssClass="Grid_Header" /> <ItemStyle CssClass="GridRow_Grid" /> <Columns></Columns></div></div>
I applied position: relative CSS for the 2nd column header, but it's working only for IE, not for Chrome or Mozilla browsers.
Related
I am using trying to style a .NET DropDownCheckList control to stylistically and functionally fit in one of my user controls.
Currently, I'm working the DropDownCheckList implementation as follows (I plan to convert the table structure to <div> and CSS styling once I figure out how to resolve the issue):
<asp:Panel ID="CmbCkBxPanel" runat="server" Height="20px" Width="160px" BackColor="White">
<asp:HiddenField ID="hfEmptyText" runat="server" />
<table id="CmbCkBxTable" style=" background-color:White; table-layout: fixed; height: 20px; border-collapse: collapse; border-style: solid; border-width: 1px; border-color:Black;" cellspacing="0" cellpadding="0" width="100%" runat="server">
<tr id="rowDD" style="border-style: none;background-color: White;" runat="server">
<td style=" white-space:nowrap;" valign="middle"><asp:textbox id="DDTextBox" ReadOnly="true" style="cursor: default; vertical-align:middle;" runat="server" Width="100%" ToolTip="" BackColor="White" font-names="Arial" BorderColor="Transparent" BorderStyle="None" ></asp:textbox></td>
<td id="colDDImage" width="16">
<asp:Image ID="btnImage" runat="server" /></td>
</tr>
</table>
<div style="z-index: 200; background-color: White; display:none; border-style:solid; border-width:thin; border-color:Black;" id="listdiv" runat="server">
<asp:CheckBoxList ID="CBList" runat="server" width="100%" style=" text-align:left; background-color:White;" RepeatColumns="1">
</asp:CheckBoxList>
</div>
</asp:Panel>
On page load, the control looks like this (note that I'm using it for the Account and Brand filters):
When I select the dropdown, however, it pushes the whole div downwards like so:
Question: Is it possible to overlap the div below, rather than pushing the blue container div downwards? Or is this an issue with the structure of my page?
If you need the container divs and their respective CSS to help me troubleshoot, I can include those.
Thanks!
If you don't want a div to occupy space in your page then you need to set it's position to absolute.
So im using the asp:changePassword which shows the form which allows the user to display the password;
I'm then centering the panel on screen. However I would like to add spacing/cell padding between the rows:
So far I have :
<div style="position:relative;left:300px;top:100px;padding:10px;">
<asp:ChangePassword ID="ChangePassword2" CancelDestinationPageUrl="~/Default.aspx" ContinueDestinationPageUrl="~/Default.aspx" runat="server">
</asp:ChangePassword>
</div>
I've tried:
TextBoxStyle-CssClass & BorderPadding and tried positioning the div inside the changePassword and using 'class' to center it.
i see there is a and then create table and rows etc...
Is there a simpler way to do this? All i want to do is seperate each row in the changePassword Panel by 'cellpadding =5px'
Please advise thank you
EDIT:
<div style="position:relative;left:300px;top:100px;padding:10px;">
<asp:GridView ID="GV" runat="server" CellPadding="0" CellSpacing="0">
<asp:ChangePassword ID="ChangePassword2" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid"
BorderWidth="1px" CancelDestinationPageUrl="~/Default.aspx" ContinueDestinationPageUrl="~/Default.aspx" runat="server">
</asp:ChangePassword>
</asp:GridView>
</div>
I think you need to be using the GridView control. Then in the markup, be sure to set cellpadding and cellspacing to zero and then apply the following CSS...
table { border-collapse: collapse; }
table tr, table td, table th { border: solid 5px #000; margin: 0; padding: 0; }
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Fixed GridView Header with horizontal and vertical scrolling in asp.net
I have a task to design to build a Scrollable Gridview with a fix header. I have tried developing it with a Div
<div id="DataDiv" style="overflow: auto; border: 1px solid olive;
width: 600px; height: 300px;" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
ShowHeader="false" RowStyle-VerticalAlign="Bottom">
<Columns>
<asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle Width="30px" />
<asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
<asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
</Columns>
</asp:GridView>
</div>
but it doesn't work as the header didn't get fix.
then i find one more code, as
<div style=" background-repeat: repeat-x; height: 30px;
width: 200px; margin: 0; padding: 0">
<table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" style="font-family: Arial;
font-size: 10pt; width: 200px; color: Black; border-collapse: collapse; height: 100%;">
<tr>
<td style="width: 30px; text-align: center">
ID
</td>
<td style="width: 50px; text-align: center">
Dbms
</td>
<td style="width: 30px; text-align: center">
Version
</td>
</tr>
</table>
</div>
<div style ="height:100px; width:617px; overflow:auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
ShowHeader="false" RowStyle-VerticalAlign="Bottom">
<Columns>
<asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle-Width="30px" />
<asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
<asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
</Columns>
</asp:GridView>
</div>
in this method, i am designing the header using pure html.
now the issue is, what is the best method to implement this requirement.
Aside from your problem there are few things that You should know about:
1) By design table cells will autoresize and match the content of the longest cell making the table readable. If You break this "rule" by making its header fixed You will have to take care about resizing header cell because header is no longer bound by the table rules.
2) Pure HTML/CSS solution will work ONLY if You set static lengths for all Your cells (both table and header). If content is to long to fit a cell and breaking lines is not possible (I sometimes work with german nouns so I know it's possible) everything will fall apart.
3) If You want a dynamic solution, You have to recalculate table cells with JS everytime content changes.
I guess it's pretty simply explained. If You need some examples please let me know and I will provide You with one.
Have fun!
I have done things like this a few times.
http://www.codeproject.com/Tips/471756/Fixed-Table-Header-atop-scrollable-GridView-in-ASP
The only tip I can give is stay away from vertical lines on the grid. It is tough to get the lines on the gridview and and the lines on the table to line up across browsers.
How do you set the colors and width of the gridlines in a DataGrid, in my DataGrid I cannot get the gridlines to show up or the rowlines.
<asp:DataGrid ID="OpenGrid" runat="server" PageSize="10" AllowPaging="True" DataKeyField="InvoiceID"
AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="Both"
Width="65%" BorderWidth="1px">
Try this <ItemStyle BorderColor="Blue" />
update
if you are familiar with .css you can take this concept and apply it.
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style>
.exampleDiv table
{
border-color: Blue;
}
.exampleDiv td
{
border-color: Blue;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="exampleDiv">
<asp:DataGrid ID="dgTest" runat="server">
</asp:DataGrid>
</div>
</asp:Content>
Besides setting BoderColor, set BorderStyle="Solid" and see if that helps.
DataGrid control ultimately render as HTML table. So before you continue looking for a problem with a control make sure that you don't have any CSS rules which are overwriting the control's definitions. For example if you have:
table {
border: 0px;
border-collapse: collapse;
}
then you won't see any vertical or horizontal border lines...
Bottom line if you have included any CSS definitions for table make sure they are not messing with your DataGrid rendering...
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.