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.
Related
I have a table which should be hidden when the page loads and is shown only on selection of a checkbox.
<table width="100%" id="C" datatable="ng" dt-options="dtOptionsfeature" class="celltable" style="display: none;">
I also tried it in css file
#C {
display: none;
}
It works if i remove the data tables . So can i not use css styling with data tables ? because other properties are working.
Try to hide table parent container
<div id="hide-table"><table width="100%" id="C" datatable="ng" dt-options="dtOptionsfeature" class="celltable" style="display: none;"></div>
#hide-table{display:none;}
so basically this is my layout. 3 row div (header content and footer)
what i want to do is emulate inside the content div a table format so i can display info as such
picture1 detail1
picture2 detail2
picture3 detail3
there are at least 10 rows of such info. doesn't have to be picture but can also be text
picture div will be about 150px while detail will be the rest. for the sake of example lets say 600px wrapper
i tried a few setups but it didn't come out the way i desired. in a table this would be a cinch but i would like a pure css table-less layout
something i tried but doesn't come out into columns
HTML
picture
item 1 goes here
picture2
item2 goes here
CSS
.itemwrapper{width:600px;}
picture{width:150px;float:left;}
item{width:450px;float:left;}
.clear {clear:both;}
please tell me how i can do this. jsfiddle example here - http://jsfiddle.net/4qvz220b/1/
table would be as simple as
<table width="500">
<tr>
<td width="150">picture1</td>
<td width="450">item1 goes here</td>
</tr>
<tr>
<td>
<td width="150">picture2</td>
<td width="450">item2 goes here</td>
</tr>
</table>
can someone point me in the right direction, i don't know much about css except what i can do through trial and error. the solution must be cross browser compatible css with no js or hacks etc.
please note that this is not to layout the entire page but just a two column content inside another div. if a unordered list can be used instead somehow, please let me know.
You almost got the structure right. You just need to use the right properties...
With css you can build the actual table structure using the display properties, as you have:
display: table
display: table-row
display: table-cell
And other, such as header and footer, if you use the right syntax.
So a basic example (without any style customization) would be something like:
FIDDLE LINK
<div class="mainwrapper">
<div class="itemwrapper">
<div class="picture">picture</div>
<div class="item">item 1 goes here</div>
</div>
<div class="itemwrapper">
<div class="picture">picture2</div>
<div class="item">item2 goes here</div>
</div>
</div>
css:
.mainwrapper {
display: table;
}
.itemwrapper {
display: table-row;
}
.picture, .item {
display: table-cell;
}
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; }
I am supporting a legacy application.
In the CSS there is the following rule:
.dashboard-panel table {
width: 100%;
}
So basically there are many panels, and for all tables in them the width is set to 100%.
Now the problem: in a dashboard panel I have put a calendar control from an external library (richfaces). This calendar control is using a table for displaying the days. And this width:100% is affecting the calendar table.
Example:
<div class="dashboard-panel">
<div id="content">
<table id="table1"> //this is ok
<tr>
<td>
<table id="richfacesCalendarTable"> //this not ok
</table>
</td>
</tr>
</table>
</div>
</div>
What is the proper solution here?
I don't want to go through every panel in this application and put a separate style there.
Mabye if you add something like that into end of your css:
.dashboard-panel table#richfacesCalendarTable {
width: your_desired_width_px !important;
}
or
.dashboard-panel table#richfacesCalendarTable {
width: auto !important;
display: table !important;
}
Hard to say for sure as this is only a small portion of HTML and CSS code you provided. There can be other elements that affects your result.
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"