I have the following code in ASP.NET.
The problem is that this HyperLink(hpRecord) works for all surface of "posts_listDiv" other than the two images which are not clickable in IE 9.
I tested that code and works fine in all browsers other than Internet Explorer.
<asp:Repeater ID="RepeaterCategories" runat="server">
<ItemTemplate>
<asp:HyperLink ID="hpRecord" runat="server" NavigateUrl='link'>
<div id="posts_listDiv" class="posts_listDiv">
<div id="pict1Div" class="pict1Div">
<asp:Image ID="picture" runat="server" Width="100px" Height="80px" ImageUrl='link'/>
</div>
<div id="pict2Div" class="pict2Div">
<asp:Image ID="pict2" runat="server" Width="100px" Height="80px" ImageUrl='link'/>
</div>
<div id="detailsDiv" class="detailsDiv">
<%--text--%>
<%# Eval("...")%>
<br />
<%--by user--%>
<i style="color:blue"><%# Eval("FirstName") %> </i>
</div>
</div>
</asp:HyperLink>
</ItemTemplate>
</asp:Repeater>
and this is CSS for "posts_listDiv":
.posts_listDiv
{
background-color:red;
margin-left:5px;
float:left;
width:232px;
height:171px;
word-wrap: break-word;
font-size:14px;
margin-left:8px;
margin-top:10px;
}
Add a style to "posts_listDiv" parent div.
.parent {
display: block;
}
Related
hI am having some trouble with this asp.net template. I tried Text-decoration: none but it didn't work.
<telerik:RadListView ID="NewsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="ItemsContainer" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li style="list-style-type:none;" data-sf-provider='<%# Eval("Provider.Name")%>' data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.News.Model.NewsItem">
<h2 style="font: 13px Verdana; color:black; text-decoration:none;">
<sf:DetailsViewHyperLink TextDataField="Title" ToolTipDataField="Description" data-sf-field="Title" data-sf-ftype="ShortText" runat="server" />
</h2>
<span style="font:8px Verdana" >
<sf:FieldListView ID="summary" runat="server" Text="{0}" Properties="Summary" WrapperTagName="div" EditableFieldType="ShortText"/>
</span>
</li>
</ItemTemplate>
</telerik:RadListView>
<sf:Pager id="pager" runat="server"></sf:Pager>
Both the color of the link, and the Underline are still staying. how can i change that?
this is the result:
Give your H2 a class name. lets say "link_holder". then in your CSS try something like
h2.link_holder a
{
text-decoration:none;
}
Also, can you give the sf:DetailsViewHyperLink a CssClass?
I have created a web page that looks as follows:
I have used css display:table to create the overall layout. My intention is to have 3 columns, the left for message type filter, middle for date filters and right for the apply filters checkbox and refresh grid button. The gridview appears in a stand-alone div below the table divs
My problem is I have not been able to get the "right" applyFilters div to stay in-line at the right of the screen. The broswer insists on displaying under the dataFilters div. Note, this can't be seen from the screen grab but there is lots of availabl space to the right of the dateFilters div.
Could anyone please let me know how I can correct this problem.
Aspx
<div id="layoutTable" style="display:table">
<div id="layoutRow1" style="display:table-row">
<div id="dataFilters">
<div id="table1Row1" style="display:table-row">
<span id="msgTypeFilter" class="filterProp">Message Type:
<asp:DropDownList ID="ddlMessageType" DataSourceID="dsmessageType" AutoPostBack="false"
DataValueField="messageType" runat="server" AppendDataBoundItems="true">
<asp:ListItem Text="All" Value="%"></asp:ListItem>
</asp:DropDownList>
</span>
</div>
<div id="table1Row2" style="display:table-row">
<%--additional filters here--%>
</div>
</div> <%--end data filters--%>
<div id="dateFilters">
<div id="table2Row1" style="display:table-row">
<span class="filterProp" id="startDate">Start Date:<asp:TextBox
ID="txtReceivedFilterStart" runat="server" Text="01/01/2013"
AutoPostBack="False" />
<ajaxToolkit:MaskedEditExtender ID="medReceivedStart" runat="server" MaskType="Date"
Mask="99/99/9999" MessageValidatorTip="true" TargetControlID="txtReceivedFilterStart"
AcceptAMPM="false" />
</span>
<span class="filterProp" id="endDate">End Date:<asp:TextBox
ID="txtReceivedFilterEnd" runat="server" Text="31/12/2050"
AutoPostBack="False" />
<ajaxToolkit:MaskedEditExtender ID="medReceivedEnd" runat="server" MaskType="Date"
Mask="99/99/9999" MessageValidatorTip="true" TargetControlID="txtReceivedFilterEnd" />
</span>
<span class="filterProp" id="whichDateFilter">Apply date filter to:
<asp:DropDownList runat="server" id="ddlDateFilterFieldname">
<asp:ListItem Value="ReceivedTime" Text="Received Time" />
<asp:ListItem Value="SentTime" Text="Sent Time" />
</asp:DropDownList>
</span>
</div>
<div id="table2Row2" style="display:table-row">
<span class="filterProp" id="startTime">
Start Time:<asp:TextBox ID="txtReceivedStartTime"
runat="server" Text="00:00:00" AutoPostBack="False" />
<ajaxToolkit:MaskedEditExtender ID="medReceivedStartTime" runat="server" MaskType="Time"
Mask="99:99:99" MessageValidatorTip="true" TargetControlID="txtReceivedStartTime"
AcceptAMPM="false" />
</span>
<span class="filterProp" id="endTime">
End Time:<asp:TextBox ID="txtReceivedEndTime" runat="server"
Text="23:59:59" AutoPostBack="False" />
<ajaxToolkit:MaskedEditExtender ID="medReceivedEndTime" runat="server" MaskType="Time"
Mask="99:99:99" MessageValidatorTip="true" TargetControlID="txtReceivedEndTime"
AcceptAMPM="false" />
</span>
<span class="filterProp" id="medValidators">
<ajaxToolkit:MaskedEditValidator ID="mvalReceivedStart" runat="server" ControlToValidate="txtReceivedFilterStart"
InvalidValueMessage="Incorrect format for date" ControlExtender="medReceivedStart"
TooltipMessage="Enter date in format dd/mm/yyyy" />
<ajaxToolkit:MaskedEditValidator ID="mvalReceivedEnd" runat="server" ControlToValidate="txtReceivedFilterEnd"
ControlExtender="medReceivedEnd" InvalidValueMessage="Incorrect format for date"
TooltipMessage="Enter datee in format dd/mm/yyyy" />
<ajaxToolkit:MaskedEditValidator ID="mvalReceivedStartTime" runat="server" ControlToValidate="txtReceivedStartTime"
InvalidValueMessage="Incorrect format for time" ControlExtender="medReceivedStartTime"
TooltipMessage="Enter time in format hh:mm:ss" />
<ajaxToolkit:MaskedEditValidator ID="mvalReceivedEndTime" runat="server" ControlToValidate="txtReceivedEndTime"
InvalidValueMessage="Incorrect format for time" ControlExtender="medReceivedEndTime"
TooltipMessage="Enter time in format hh:mm:ss" />
</span>
</div> <%--end table2Row2--%>
</div> <%--end dateFilters--%>
<div id="applyFilters">
<div id="tbl3row1" style="display:table-row">
<span class="filterProp" >
<asp:CheckBox ID="chkFilter" runat="server" Text="Apply Filters"
AutoPostBack="False" oncheckedchanged="chkFilter_CheckedChanged"/>
</span>
</div>
<div id="tbl3row2" style="display:table-row">
<span >
<asp:Button ID="btnRefresh" runat="server" Text="Refresh Grid"
onclick="btnRefresh_Click" class="button" />
</span>
</div>
</div>
</div> <%--end layout row 1--%>
</div> <%--end layout table--%>
CSS
.filterProp
{
/* float:left; */
display:table-cell;
}
#resultsGrid
{
padding: 20px 0px 20px 0px;
float: left;
}
#dateFilters > .filterProp
{
text-align: left;
}
#dateFilters
{
border: thin solid #C0C0C0;
display:table;
}
.filtersTitle
{
font-weight: bold;
margin-right: 20px;
}
#dataFilters
{
display:table;
float:left;
border: thin solid #C0C0C0;
}
#applyFilters
{
display:table;
}
.button
{
background-color: #00CC99;
color: #FFFFFF;
}
.button:hover
{
background-color: #33CCCC;
color: #FFFFFF;
}
.gridPager
{
text-align: right;
background-color: #C0C0C0;
color: #000000;
}
You could give the three columns a definitive width and float them (...or not. If you have enough space floating wouldn't be necessary but taking them out of the flow and floating them next to each other would work). Your date filters expand so that the apply filters div wraps. Giving them a definitive width will align the date text boxes vertically, leaving more space at the end for the apply filters div. Experiment with the numbers (using percentage would be best, and the wrapper would be set at 100%). So for your Message type, make it 40%, your date type could be 20%, and your apply type would be 40%.
edit: I see you have the apply portion in a span. Maybe placing that in a div separate from the date div would allow more control in positioning (making it a block element as opposed to an inline element).
I'm trying to learn CSS3 and get away from using table tags. Working with Visual studio 2010, .net 4.0 and vb.nt in an asp.net project. I have a listview that i'm trying to get the rows to alternate color. What i have works but only partially. What is rendered to screen is several rows that have wrapping text. The shading is only effecting a small line across the screen.. it does not cover the entire row. Here is the code:
div.row
{
clear: both;
padding-top: 5px;
}
div.row:nth-child(1n+3)
{
background-color: #C0C0C0;
}
div.row span.label
{
float: left; /*width: 100px;*/
text-align: right;
padding-right: 5px;
font-weight: bold;
}
div.row span.cell
{
float: left; /*width: 335px;*/
text-align: left;
}
Here is the markup:
<ItemTemplate>
<div class="row" >
<span class="cell" style="width: 200px;">
<asp:HyperLink ID="lblCalendarDataID" runat="server" NavigateUrl='<%# "CalendarAddEdit.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
Text='<%# databinder.eval(container.dataitem,"Title")%>' />
</span>
<span class="cell" style="width: 150px;">
<asp:Label ID="lblStartDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartDate1","{0:d}")%>' />
-
<asp:Label ID="lblEndDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndDate1","{0:d}")%>' />
</span>
<span class="cell" style="width: 150px;">
<asp:Label ID="lblStartTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartTime1", "{0:t}")%>' />
-
<asp:Label ID="lblEndTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndTime1", "{0:t}")%>' />
</span>
<span class="cell" style="width: 350px;">
<asp:Label ID="lblDescription" runat="server" Text='<%# databinder.eval(container.dataitem,"Description")%>' />
</span>
<span class="cell" style="width: 50px;">
<asp:HyperLink ID="hlDeleteID" runat="server" NavigateUrl='<%# "CalendarDelete.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
Text="Delete" />
</span>
</div>
</ItemTemplate>
anyone know what i'm doing wrong. I tried to use the alternatingItemTemplate but could not get it to shade. In that senerio.. i did a
<div class="row" style="background-color: #C0C0C0;">
any help would be great.
To have your background shading do what you want, try modifying this style:
div.row:nth-child(1n+3)
{
background-color: #C0C0C0;
}
to be this:
div.row:nth-child(1n+3) span
{
background-color: #C0C0C0;
}
to actually apply the background color to the spans that contain the content.
I'm displaying summary and details customer info in each repeater row - inside the repeater .
The summary stuff is it's own div: (id="divHistory_Summary). The details stuff in it's own div: (id="divHistory_details" )
The details div is hidden by default with inline style: display: none;
<asp:Repeater ID="RepeaterCustHistory" runat="server">
<ItemTemplate>
<div id="divHistory_Summary" class="cust_summary" style="width: 100%; cursor: pointer" >
<div id="divTicketNumber" style="display: inline; float: left;">
<u><strong>Ticket ID:</strong> <asp:Label ID="lblCustHelpDeskTicketId" runat="server" Text='<%# Eval("HelpDesk_id") %>' /></u>
</div>
<div id="divProblem" style="display: inline; float: left; padding-left: 10px;">
<strong>Problem:</strong> <asp:Label ID="lblProblem" runat="server" Text='<%# Eval("HelpDesk_problem") %>' />
</div>
<div id="divStatus" style="display: inline; float: left; padding-left: 10px;">
<strong>Status:</strong> <asp:Label ID="Label1" runat="server" Text='<%# Eval("HelpDesk_name") %>' />
</div>
</div>
<div id="divHistory_details" class="cust_details" style=" width: 100%; float: left; display: none; ">
<strong>Solution:</strong> <asp:Label ID="lblSolution" runat="server" Text='<%#Eval("HelpDesk_solution") %>' ></asp:Label>
</div>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
At the bottom of my aspx page I have my jquery:
<script src='<%= ResolveUrl("~/Scripts/jquery-1.4.1.js") %>' type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cust_details").hide();
$(".cust_summary").click(function () {
$(this).next(".cust_details").slideToggle(100);
});
});
</script>
I don't have the jquery.js file in the head of my app, so I hope it's ok to call the script right here. This app has many nested master pages, and didn't know which one to put the call to jquery file.
The page loads, repeater populates, the details stuff is hidden. When clicking the summary div, nothing happens - the details stuff won't show.
Does anyone have any ideas on how to get this show/hide div to work like this? THank You!
I'm using VS2010, Framework 2.0, C#
Try this:
$(this).nextAll('div[class="cust_details"]').eq(0).slideToggle(100);
I have ran a quick test and it seems to be working.
Try this:
<script type="text/javascript">
$(document).ready(function () {
$(".cust_details").hide();
$(".cust_summary").click(function () {
$(this).nextAll('div[class="cust_details"]').eq(0).slideToggle(100);
});
});
</script>
I am using DataList control to show three products per line horizontally. But there is layout problem and it pushes up the product image container element like the below :
Data List Layout problem http://www.pixelshack.us/images/wwmlzkvhxsr7b2l0ptcl.jpg
Here is the code :
<asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" RepeatLayout="Table"
DataSourceID="ObjectDataSourceCategories" RepeatDirection="Horizontal" CellSpacing="10" CellPadding="0" HorizontalAlign="Center" ItemStyle-Wrap="true">
<ItemTemplate>
<a href='<%# "Items.aspx?catId=" + (string)Eval("id") %>'>
<asp:Image ID="Image1" CssClass="photo-border photo-float-left" runat="server" Width="165px"
Height="120px" ImageUrl='<%# "ProductImages/Thumbnails/" + (string)Eval("ImageUrl") %>'
AlternateText='<%#(string)Eval("ImageAltText")%>' /></a>
<br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "Items.aspx?catId=" + (string)Eval("id") %>'
Text='<%# Eval("Title").ToString()%>' Font-Bold="true" />
</ItemTemplate>
</asp:DataList>
How can I get over the problem ?
Thanks in advance.
I was having a similar issue. I ended up having to break the linked image and and text into their own div and style them accordingly:
<ItemTemplate>
<div class="outer">
<div class="top">
<asp:HyperLink id="hlImage" runat="server" CssClass="Font7">
</asp:HyperLink>
</div>
<div class="bottom">
<asp:Label id="lbText" runat="server" CssClass="Font7"></asp:Label>
</div>
</div>
</ItemTemplate>
I'm sure there are cleaner ways to do this and this is just example of what the HTML output might look like. This is just "off the cuff" but if you put in an empty htm file it will display.
<div style="width: 100px;">
<!-- first row -->
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="height:50px; background-color:Aqua; vertical-align:bottom;">
<span>text</span>
</div>
</div>
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="background-color: Aqua;">
<span style="height:50px; vertical-align:bottom;">text</span>
</div>
</div>
<!-- second row -->
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="height:50px; background-color:Aqua; vertical-align:bottom;">
<span>text</span>
</div>
</div>
</div>
You can most likely use RepeatLayout="Flow" ItemStyle="float:left;" in your DataList control to help as well.
I'm not sure off the top of my head how to fix this, but I would start by putting each item in a <div> or <span> and use CSS classes, instead of the control's styling. E.g.:
<Item Template>
<div class="myClass">...</div>
</Item Template>
Using this with Firebug to then debug is usually easier than figuring out how you're violating the control's height, etc.