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; }
Related
Source : https://www.codeproject.com/Articles/614041/GridView-with-Fixed-Header-and-Scroll-Bar
I have create a CSS class for fixing my header inside a bootstrap panel.
CSS
.FixedHeader {
position: absolute;
font-weight: bold;
background-color:aquamarine;
}
ASP.NET GridView
<div class="panel-body" style="overflow-y:scroll;">
<asp:GridView ID="myGridView" runat="server" Width="560px"
class="table table-hover table-bordered"
align="center" HeaderStyle-Wrap="true"
HeaderStyle-CssClass="FixedHeader"
>
The result is pretty funny. It's better explained by the image below.
You can see the three column headers on the left... The size of the header columns shrinks...
UPDATE
Below is the result when I put width:100% in the header css class
Please try to add with 100%for the header.
I'm new to CSS and I'm trying to accomplish the following on IE10:
I have the asp datagrid with the css class "maintbl"
<asp:DataGrid CssClass="maintbl" ID="dg" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn ReadOnly="true" DataField="UpdateOn" DataFormatString="{0:MMMM d, yyyy}" HeaderText="Date Modified" SortExpression="UpdateOn" ></asp:BoundColumn>
<asp:BoundColumn DataField="Message" HeaderText="Message" SortExpression="Message"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
The html generated is similar this:
<table class="maintbl">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I'm trying to apply css specifically to the first tr. I've tried this in css file but it's not working.
.maintbl table tbody tr:first-child {
border: 1px solid white;
background-color: #167F92;
color: white;
padding: 1em;
text-align: center;
}
Please help me with what I'm doing wrong.
Try changing your css selector to be something like
table.maintbl tbody tr:first-child
In your original selector, it was looking for the .maintbl element, then a child table element, then tbody, then tr. Now it is looking for a table element with the .maintbl class (and then looking for child elements from there).
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.
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.
I work on C# Asp.net
Main div
---- table
want to show this div on middle of the form.i want to build a login form.my table contain
User name:**(it's a lable,on browser it's broken like user
name : show why?)**
password:
<div id="main">
<table width="600px" border="1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" CssClass="cssLabel" Text="User Name :"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server" CssClass="cssLabel" Text="Password :"></asp:Label>
</td>
</tr>
</table>
</div>
want to show div on middle of the form? and why my lable text are going to broken how to solve it?
if u gone to google.com than you see text box take position on middle of the frame.i want this .i want my controls also take position on the middle of the frame.How to do that?
You can use this to show idiv n the middle of the form:-
<div style="margin-left:auto;margin-right:auto;">Put the controls here </div>
You've edited your question now so this doesn't give you the exact code you need, but would help you work it out / others who view your question with a similar problem. So here goes... you need
something like this:
<style type="text/css">
.wrp { width: 100%; text-align: center; }
.frm { text-align: left; width: 500px; margin: auto; border: 1px solid black; }
.fldLbl { white-space: nowrap; }
</style>
<div class="wrp">
<div class="frm">
<span class="fldLbl">User name:</span>
</div>
</div>
try this option, that is style the div with style="width:100%;text-align:center"