I have got a listview which is styled with css but dosent work.Am I missing something here.
<asp:ListView ID="msg_list" runat="server">
<ItemTemplate>
<tr class="myitem">
<td> <asp:Label role="menuitem" ID="msg_lbl" runat="server" text='<%#Eval("msg")%>' /> </td>
</tr>
<%--<hr style=" margin-top:1px; margin-bottom:1px; " />--%>
</ItemTemplate>
</asp:ListView>
Here is the css
.myitem
{
background-color:Red;
}
Table rows (tr) can't be styled as other elements (e.g. table cells (td)), meaning they don't react on every kind of styling. Why don't you just write:
Fiddle
<asp:ListView ID="msg_list" runat="server">
<ItemTemplate>
<table>
<tr class="myitem">
<td>
<asp:Label role="menuitem" ID="msg_lbl" runat="server" text='<%#Eval("msg")%>' />
</td>
</tr>
</table>
<%--<hr style=" margin-top:1px; margin-bottom:1px; " />--%></ItemTemplate>
</asp:ListView>
tr.myitem td{
width:200px;
height:20px;
border:2px solid;
background:red;
}
OR
Fiddle
<asp:ListView ID="msg_list" runat="server">
<ItemTemplate>
<table>
<tr class="myitem">
<td>
<asp:Label role="menuitem" ID="msg_lbl" runat="server" text='<%#Eval("msg")%>' />
</td>
</tr>
</table>
<%--<hr style=" margin-top:1px; margin-bottom:1px; " />--%></ItemTemplate>
.myitem {
background:red;
}
EDIT
You need to add <table> tag
Related
I have a custom control, which has a Button + image, if image(down arrow) is clicked, a DIV should display, just like Dropdownlist.
However, its pushing the page contents to down to display the DIV. How to fix this.
It should just behave like dropdown
List should display on top of Button instead button
<table id="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Button ID="btnPost" runat="server" CssClass="postButton" OnClick="btnPost_Click" />
<asp:Button ID="btnDropDown" runat="server" CssClass="dropdownButton" OnClick="btnDropDown_Click" />
</td>
</tr>
<tr>
<td>
<div runat="server" id="divDropDownPanel" visible="false" style="text-align: left;
overflow: scroll; float: left; border: thin solid lightgrey; width: 160px; height: 120px;
background-color: #FFFFFF; position: absolute; z-index: 999;">
<asp:Repeater ID="rptDropDownContent" runat="server" OnItemDataBound="rptDropDownContent_ItemDataBound">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="left">
<asp:CheckBox ID="chkChannel" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tr> </table>
</FooterTemplate>
</asp:Repeater>
<br />
</div>
</td>
</tr>
Here what I've done and whats my problem. First of all i got a big table with a lot of td the first td on top of my table containt anoter table and (here come my problem) theres a space under that little table and I don't know why.
Here's the code for my table:
<div runat="server" class="ReportPage" >
<table runat="server" class="ListReportBigTable" align="center">
<tr>
<td class="style13" colspan="3" >
<table width="46%" align="center"style="height:50%; "cellpadding="0">
<tr>
<td align="left">
<asp:Label ID="LB_ChooseReport" runat="server"
Text="Choisissez un dossier médical: " Font-Size="Small">
</asp:Label>
</td>
</tr>
<tr>
<td style="vertical-align:bottom" align="left">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div id="div_Filter" runat="server" visible="false" align="left">
<asp:Label ID="LBL_FilteredBy" runat="server" width="18%" Text="Patient : "
Font-Size="Small" style="margin-left: 0px"></asp:Label>
<asp:DropDownList ID="DDL_FilterSelect" runat="server" AutoPostBack="true"
Width="25%" CssClass="DDL_Filter" Font-Size="Small" Height="18px"></asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel></td></tr></table>
<br />
</td>
and here the CSS:
.ListReportBigTable
{
height:25%;
width:55%;
text-align:center;
vertical-align:middle;
border: thick solid black;
margin-left: 0px;
}
thx in advance
I don't know if it's a typo but you are closing with a </td> after your closing </table> tag. In addition you have a <br /> before the closing misplaced </td> which would obviously add space to the bottom.
Try changing the closing </td> to </table></div> and removing the <br />
In addition, in your CSS try adding margin-bottom: 0px; and padding-bottom: 0px; to see if this has an effect.
Also, what is after the table? Maybe whatever is being displayed after the table has it's own top margin/padding?
Do you have a link to the actual page where this is occuring so we can examine with Firebug or similar and try to figure it out?
here is my CSS:
.body
{
font-family : Segoe UI;
}
.table{
width : 50%;
font-size:medium;
border-spacing:5px;
}
.leftCol
{
width:15%
}
.RightCol
{
width:35%
}
.header
{
width:35%;
font-weight:900;
text-align:left;
}
.dates
{
color:GrayText;
font-size:small
}
.pictures
{
width:10%;
}
.userName
{
width:10%;
text-align:left;
}
.smallTable
{
width:20%;
}
Here is the HTML markup:
<table class=".table">
<tr>
<td rowspan="3" class=".leftCol">
<asp:Label ID="ImageLabel" runat="server" Text='<%# Eval("Image") %>' />
</td>
<td class=".header">
<asp:Label ID="UserNameLabel" runat="server" Text='<%# Eval("UserName") %>' />
</td>
</tr>
<tr>
<td class=".rightCol">
<asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
</td>
</tr>
<tr>
<td class=".dates">
<asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
</td>
</tr>
</table><hr />
the other one:(this table width actually works)
<table class=".smallTable">
<tr >
<td class=".pictures">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Pictures") %>' /></td>
<td class=".userName" align="left">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>' /></td>
</tr>
</table><hr />
so, instead of following the rules, VS uses 100% width for the table using .table class, and then it just arranges in justified. The dates does not appear in gray colour ... and basically nothing follows. But i can assure you that the class names i wrote and everything is correct as i check. It just doesnt work . Do you know anyway i can force VS 2010 to do this ?
In all class that you declare on the tags you must place them with out the dot. Eg:
<table class="smallTable">
and change the class name .table to something else because the table is reserve for all tables and probably this type of variables lead to bugs. Do not mix up the tag names with the css declare.
The css table{ width : 50%; } change all the tables on the page.
The css body{ font-family : Segoe UI; } change all the body fonts.
The css .body{ font-family : Segoe UI; } is change only what you declare on class as body but eventually can lead to bugs and errors .
I'm using a datalist to display images. There are two columns per row but the spacing between the columns is too little. Is there a way to place a fixed spacing between the columns?
<td class ="DLSettings">
<asp:DataList ID="DlReviewImages" runat="server"
RepeatColumns="2" RepeatDirection="Horizontal"
HeaderStyle-VerticalAlign="Top">
<ItemTemplate>
<table >
<tr>
<td colspan="2">
<table cellspacing="0" cellpadding="0" border="0" class="tableborder">
<tr>
<td align="center">
<a href="" target="_blank" runat="server" id="AImage">
<img runat="server" id="ThumbnailReviewImage" width="250" height="200" border="0"/> </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
CSS :
.DLSettings{
border-width:1px;
border-color:Black;
border-style:solid;
background-color: #E3E3E3;
padding:5px 10px 30px 30px;
}
Thanks in advance
BB
I would just use the CellPadding property to increase the spacing between columns:
<asp:DataList ID="DataList1" runat="server" CellPadding="5" ...>
You don't need either of the tables in your ItemTemplate either. They're just taking up space and slowing things down. Try using the ItemStyle for alignment instead:
<asp:DataList ID="DlReviewImages" runat="server" RepeatColumns="2" CellPadding="5" RepeatLayout="Table" RepeatDirection="Horizontal" HeaderStyle-VerticalAlign="Top">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<a href="" target="_blank" runat="server" id="AImage">
<img runat="server" id="ThumbnailReviewImage" width="250" height="200" border="0"/>
</a>
</ItemTemplate>
</asp:DataList>
You could add padding to the right of the table cells, so in the css...
td{ padding-right: 10px; }
I have a table in ASP.Net like this.
<table width="100%">
<tr>
<td rowspan="4" colspan="2" class="style1">
</td>
<td>
<asp:Label ID="label1" runat="server" Text="Label1"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Width="136px">
</asp:TextBox>
</td>
</tr>
<tr>
<td><asp:Label ID="label2" runat="server" Text="Label2"></asp:Label></td>
<td><asp:TextBox ID="TextBox1" runat="server" Width="136px">
</asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="label3" runat="server" Text="Label3"></asp:Label></td>
<td><asp:TextBox ID="TextBox2" runat="server" Width="136px">
</asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="label4" runat="server" Text="Label4"></asp:Label></td>
<td><asp:TextBox ID="TextBox3" runat="server" Width="136px">
</asp:TextBox></td>
</tr>
</table>
I want to give border line to first td element which contains the colspan and rowspan. Not to the entire row.
Please give solution.
If you want border only on the td with class style1 :
table, tr, td { border: none; }
td.style1 { border: 1px solid black; }
Try jquery http://jquery.com/
Add this in your head
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
then add this in the body
<script>
$('table tr td:first').css('border','1px solid');
<script/>
Set this style on the td:
<style type="text/css">
.firsttd { border-color: #000000; border-style: solid; }
</style>
...
<td class="firsttd" rowspan="4" colspan="2" >