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; }
Related
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
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?
I have a HTML table (black) which fills a window (blue). The table contains two rows.
When I resize the window, row 1 (red) height must be variable and row 2 (green) height constant.
Row 1 content is are dynamically generated (a tab strip and a tree view - both Telerik).
Row 2 contains two columns.
In other words, how to make the row 1 autosize itself when the windows is resizes?
All I have done, so far, is this:
<table style="width:100%;">
<tr style="height:100%;vertical-align:top;overflow:auto">
<td colspan="2">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Width="100%" Height="100%">
<Tabs>
<telerik:RadTab runat="server" Text="Tab1" Selected="True">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Tab2">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" SelectedIndex="0" Height="100%">
<telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" style="border: 1px solid grey">
<telerik:RadTreeView ID="RadTreeView1" runat="server"></telerik:RadTreeView>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Height="100%" style="border: 1px solid grey">
<telerik:RadTreeView ID="RadTreeView2" runat="server"></telerik:RadTreeView>
</telerik:RadPageView>
</telerik:RadMultiPage>
</td>
</tr>
<tr>
<td style="font: normal 12px arial; text-align: left;">
<asp:CheckBox ID="CheckBox1" runat="server" Text="Do something when checked." AutoPostBack="true" />
</td>
<td style="text-align: right">
<telerik:RadButton ID="CancelButton" runat="server" Text="Cancel" OnClientClicked="windowClose" UseSubmitBehavior="false">
</telerik:RadButton>
</td>
</tr>
</table>
Simple answer for a simple question. Set a relative height (%) for first row and a fixed height (px) for second row!
<table style="width:100%;">
<tr style="height:100%;vertical-align:top;overflow:auto">
....
</tr>
<tr style="height:100px;">
....
</tr>
</table>
Adjust the 100px to whatever height Row 2 must have.
Also, set the table's height to the window's height using javascript and onload method.
The javascript would be:
document.onload = new function(){
var theTable = document.getElementById("myTable");
theTable.style.height = (document.height)+"px";
}
See fiddle.
add this on whichever row you wish to auto -size , even height also you can give it % rather than PX ,like
<tr style="width:10%;height:20px;">
<td style="font: normal 12px arial; text-align: left;">
<asp:CheckBox ID="CheckBox1" runat="server" Text="Do something when checked." AutoPostBack="true" />
</td>
<td style="text-align: right">
<telerik:RadButton ID="CancelButton" runat="server" Text="Cancel" OnClientClicked="windowClose" UseSubmitBehavior="false">
</telerik:RadButton>
</td>
</tr>
I am getting problem in alignment of element that is in FooterTemplate of GridView.
Anyone suggest me how to do it.The Code is:
<asp:GridView ID="gvComment" runat="server" AutoGenerateColumns="false"
OnRowDataBound="gvComment_RowDataBound" OnRowCreated="gvComment_RowCreated" Width="100%" ShowHeader="false" BorderWidth="0px" ShowFooter="true">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td valign="middle" align="left" style="width:10%"><img id="imgUser" src="" alt="" title="" runat="server" /></td>
<td align="left" valign="top">
comment comment
<asp:Label ID="lblNameComments" runat="server" Visible="false" ></asp:Label>
</td>
</tr>
<tr><td colspan="2" style="height:7px;"></td></tr>
<tr>
<td colspan="2" style="padding-top:10px;background-image:url(../Images/dotted_line.jpg);background-repeat:repeat-x;background-position:center;"></td>
</tr>
<tr><td colspan="2" style="height:7px;"></td></tr>
</table>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<FooterTemplate >
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td align="left">
Footer Text
Footer Text
Footer Text
</td>
</tr>
</table>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I have set align property of td left but it doesn't work.Page output shown in image.
It does align left.
Please put complete code (css included) here:
http://jsfiddle.net/T364r/