I have designed a mockup in Photoshop and I intend to apply it to my product catalog's ListView control but it does not seem to be displaying it right (misaligned?) and I hope someone here could pintpoint my mistake as I've been trying to figure out to no avail.
Expected result/Mockup:
After debug (don't mind the missing photos):
Take a look at my codes,
CSS:
.productItem {
width: 200px;
float: left;
padding: 5px;
margin: 5px;
text-align: center;
background-color: White;
}
.cell1
{
width:117px;
height:27px;
background-image: url("images/blackbutton.jpg");
float:left;
font-size:12px;
vertical-align:middle;
color:White;
text-align:center;
}
.cell2
{
width:118px;
height:27px;
background-image: url("images/orangebutton.jpg");
float:left;
font-size:12px;
vertical-align:middle;
color:White;
text-align:center;
}
ListView narkup:
<div class="catalog">
<asp:ListView runat="server" ID="listView" GroupItemCount="3" DataSourceID="AccessDataSource1">
<LayoutTemplate>
<div style="height: 962px;">
<div style="width: 790px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
<asp:DataPager runat="server" ID="dpMyDatePager" PageSize="3" PagedControlID="listView" .Ю
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
</div>
<div>
<b>
<%# Eval("ProductBrand") %> <%# Eval("ProductModel") %></b>
</div>
<div>
Our Price: $<%# Eval("NormalPrice") %>
</div>
</div>
<div class="cell1">Add to cart</div>
<div class="cell2">View details</div>
</ItemTemplate>
</asp:ListView>
</div>
Change cell1 and cell2 width to 50%
and try following layout:
<LayoutTemplate>
<div style="height: 962px;">
<div style="width: 790px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</div>
<asp:DataPager runat="server" ID="dpMyDatePager" PageSize="6" PagedControlID="listView"></asp:DataPager>
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
</div>
<div>
<b>
<%# Eval("ProductBrand") %>
<%# Eval("ProductModel") %></b></div>
<div style="clear: right;">
Our Price: $<%# Eval("NormalPrice") %></div>
<div class="cell1">
Add to cart</div>
<div class="cell2">
View details</div>
</div>
</ItemTemplate>
Related
I have a label,checkboxlist and a datagridview within a div. I have used inline css to move items left. But it doesn't work as i expect. How can i move them? I want all the three items in a row. Below i have added my aspx code.
<div id="div2" style="width:100%; height:auto; margin-top:30px">
<div id="div21" style="width: 50%; height:auto">
<div id="div211" style=" width:15%; height:auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<asp:GridView ID="GridView1" runat="server" style="float:left">
</asp:GridView>
</div>
You need to wrap gridview in div and set float:left to that div. Also inner div needs to have float:left as well.
Try below html
<div id="div2" style="width:100%; height:auto; margin-top:30px">
<div id="div21" style="width: 50%; height:auto;float:left">
<div id="div211" style=" width:15%; height:auto;float:left">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div style="float:left;width:45%">
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField HeaderText="SomeText">
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
Place gridview in a div and set float:left; property for that div
try this please:
<div id="div2" style="width: 100%; height: auto; margin-top: 30px">
<div id="div21" style="width: 50%; height: auto; float: left;">
<div id="div211" style="width: 15%; height: auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" Style="margin-top: 10px; margin-left: 20px">
</asp:Label>
</div>
<div id="div212" style="width: 60%; height: auto; float: left">
<asp:CheckBoxList ID="chklstKPI" Style="width: auto; height: auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div id="div22" style="width: 45%; height: auto; float: left;">
<asp:GridView ID="GridView1" runat="server" Style="float: left">
</asp:GridView>
</div>
</div>
Please add style to the divs:
<div id="div2" style="width:100%; height:auto; margin-top:30px; text-align: left;">
<div id="div21" style="width: 50%; height:auto; display: inline;">
<div id="div211" style=" width:15%; height:auto; display: inline;">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left; display: inline;">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div style="display: inline; width:50%">
<asp:GridView ID="GridView1" runat="server" style="float:left">
</asp:GridView>
</div>
</div>
You have to set float : left in style property of div
here i give you one example simply try to copy paste it
<div id="div2" style="width:100%; height:auto; margin-top:30px; position:absolute">
<div id="div21" style="width: 50%; height:auto">
<div id="div211" style=" width:15%; height:auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:200px; position:absolute">
</asp:Label>
</div>
<div id="div212" style=" width:60%; margin-left:200px; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
I have users whose group policies block Javascript; so any use of that is out of the question.
I have found a page that performs the function that I need:
Pure CSS Popup Box
However, the popup is triggered after an anchor is clicked.
My issue issue is that I want the popup to trigger on the event change in an asp:DropDownList. My intent is that if an item is not listed in the DDL, then the user will be able to select the first item "Not Listed". After this selection I need to have the popup open with elements that will allow them to add the items to the database which populates the DDL.
I have attempted to use the following in the DDL OnSelectedIndexChanged event:
Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri.ToString() + "#popup1");
This idea has failed. I believe it is because I have it inside an Update Panel. The setup is as follows:
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<!-- Main Wrapper -->
<div class="wrapper wrapper-style2">
<div class="container">
<!-- breadcrumbs -->
<br />
<div class="row 200%">
<div class="12u">
<!-- Content -->
<div id="maincontent" runat="server">
<asp:UpdatePanel ID="upInputarea" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<%-- Equipment Data --%>
<section class="box post">
<h3 class="bold">Equipment Data</h3>
<asp:UpdatePanel ID="upEquipmentData" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<div id="EquipmentDataDiv2" runat="server" style="float: left; border-left: 2px solid rgba(144, 144, 144, 0.25); margin-right: auto; margin-left: auto;">
<asp:Panel ID="Pnl1" runat="server" CssClass="inputSet2">
<span>Model:</span>
<asp:DropDownList ID="ddlEquipmentDataModel" runat="server" AppendDataBoundItems="true" AutoPostBack="false" CssClass="round-corners " DataSourceID="SqlModel" DataTextField="Model" DataValueField="ID" />
</asp:Panel>
<asp:Panel ID="Pnl2" runat="server" CssClass="inputSet2">
<span>Item:</span>
<asp:DropDownList ID="ddlEquipmentDataItem" runat="server" AppendDataBoundItems="true" AutoPostBack="true" CssClass="round-corners width1" DataSourceID="SqlItem" DataTextField="Component" DataValueField="ID" OnSelectedIndexChanged="ddl_SelectedIndexChanged" />
</asp:Panel>
<asp:Panel ID="Pnl5" runat="server" CssClass="inputSet2">
<span>S/N:</span>
<asp:TextBox ID="txtEquipmentDataSN" runat="server" CssClass="round-corners " />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</section>
<%-- Submit Button --%>
<section class="box post">
<div class="inputSet">
<asp:UpdatePanel ID="upSubmit" runat="server" UpdateMode="Conditional" AssociatedUpdatePanelID="updateProgress">
<ContentTemplate>
<asp:LinkButton ID="lbSubmit" runat="server" class="button icon fa-info-sign" Style="cursor: pointer;" OnClick="btn_Click" Text="Submit" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</section>
<div id="popup1" runat="server" class="overlay">
<div class="css_popup">
<h2>Add Component to Database</h2>
<a class="close" href="#">×</a>
<div class="content">
<asp:Panel ID="Panel13" runat="server" CssClass="inputSet2">
<span>Item:</span>
<asp:TextBox ID="txtNewItem" runat="server" CssClass="round-corners " />
</asp:Panel>
<asp:Panel ID="Panel14" runat="server" CssClass="inputSet2">
<span>NSN:</span>
<asp:TextBox ID="txtNewNSN" runat="server" CssClass="round-corners " />
</asp:Panel>
<asp:Panel ID="Panel15" runat="server" CssClass="inputSet2">
<asp:LinkButton ID="lbAddItem" runat="server" class="button icon fa-info-sign" Style="cursor: pointer;" OnClick="btn_Click" Text="Add Item" />
</asp:Panel>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
<asp:UpdateProgress ID="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<div class="fancybox-loading">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/fancybox/fancybox_loading.gif" AlternateText="Loading ..." ToolTip="Loading ..." Style="margin-top: -22px; margin-left: -22px; position: fixed; top: 51%; left: 51%; background: url('/fancybox/fancybox_sprite2.png'); background-position: 2 -2px;" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The CSS for these elements mirror that of the link provided above.
hi i am doing a social network service on asp.net c#.I want to refresh the messages within 1 second without loading whole page. I am display messages using repeater control.
I want to refresh this repeater control continuously after 1 second, but whole page should not be reloaded.
repeater control code
setInterval(function () { $(".refresh").load(location.href + " .refresh"); }, 1000);
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
textbox code
<asp:TextBox ID="Message" runat="server" OnTextChanged="TextBox3_TextChanged" style="margin-left: 12px; text-align: left;" TextMode="MultiLine" Width="564px" Height="100px"></asp:TextBox>
Hope this helps:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Trans.aspx.cs" Inherits="WebClient.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(
function() {
setInterval(function () { $('#Repeater1').load(location.href + " #Repeater1"); }, 1000);
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</asp:Content>
CSS
#outer
{
position: relative;
z-index: 3;
width: 100%;
margin: 0px auto 0 auto;
background: #ffffff;
box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.2);
float:inherit;
}
#main
{
display:inline;
position: relative;
padding: 0px 0px 0px 0px;
width: 100%;
}
#header
{
position: relative;
padding: 28px;
height: 125px;
background: #ffffff;
color: #ffffff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
border-bottom: solid 1px #003B47;
}
#copyright
{
padding: 40px 0 80px 0;
text-align: center;
color: #777777;
}
HTML
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="outer">
<div id="header" style="background-color: lightgrey">
</div>
</div>
<div id="main">
<div id="sidebar" style="background-color: lightgrey">
<div id="menubar">
<h2>
Menu
</h2>
<ul class="linkedList">
<li>
<img id="img12" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Server Search
</li>
<li>
<img id="img13" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Service Status
</li>
<li>
<img id="img14" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Data Records
</li>
</ul>
</div>
</div>
<div id="content">
<div class="box">
<h2>
Member Details
</h2>
<p>
<asp:UpdatePanel id="Up1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvMem_Details" runat="server" SkinID="Professional" OnRowDataBound="gvMem_Details_RowDataBound">
<RowStyle Width="500px"/>
</asp:GridView>
<asp:Timer ID="Timer1" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel><br class="clear" />
</p>
</div>
<div class="box">
<h2>
Reservation Details
</h2>
<p>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvRes_Details" runat="server" SkinID="Professional" OnRowDataBound="gvRes_Details_RowDataBound">
</asp:GridView>
<asp:Timer ID="Timer2" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel>
</p>
</div>
</div><br class="clear" />
</div><br class="clear" />
</div>
<div id="copyright">
© Company. Design by Technies.
</div>
</form>
I have to stretch my div based on the content inside... i have head, body and copyright(lower) divs... I want body div size should be of its dynamic contents.
the code :
<telerik:RadListView ID="RadListView1" Width="100%" AllowPaging="True" runat="server"
Skin="Metro" allowsorting="true" ItemPlaceholderID="ProductsHolder" DataKeyNames="Product_ID" GroupPlaceholderID="CategoryHolder"
GroupItemCount="4" >
<GroupTemplate>
<fieldset style="float: left; width: 330px; margin-right: 15px;">
<legend><%#Eval("CATEGORY_NAME") %></legend>
<table>
<tr>
<td>
<asp:Panel ID="CategoryHolder" runat="server"></asp:Panel>
</td>
</tr>
</table>
</fieldset>
</GroupTemplate>
<LayoutTemplate>
<fieldset style="width: 100%; margin: 0 auto; border: none;" id="FieldSet1">
<telerik:RadDataPager ID="RadDataPager2" runat="server" PagedControlID="RadListView1"
Visible='<%# Container.PageCount != 1%>' Skin="Metro" PageSize="52">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev"
HorizontalPosition="LeftFloat" />
<telerik:RadDataPagerButtonField FieldType="Numeric" />
<telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last"
HorizontalPosition="RightFloat" />
</Fields>
</telerik:RadDataPager>
<br />
<asp:Panel ID="ProductsHolder" runat="server">
</asp:Panel>
<table cellpadding="0" cellspacing="4" width="100%;" style="clear: both;">
<tr>
<td>
<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
Visible='<%# Container.PageCount != 1%>' Skin="Metro" PageSize="52">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev"
HorizontalPosition="LeftFloat" />
<telerik:RadDataPagerButtonField FieldType="Numeric" HorizontalPosition="NoFloat" />
<telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last"
HorizontalPosition="RightFloat" />
</Fields>
</telerik:RadDataPager>
</td>
</tr>
</table>
</fieldset>
</LayoutTemplate>
<EmptyDataTemplate>
<div style="width: 100%; text-align: center;">
<b>No Results Found</b></div>
</EmptyDataTemplate>
<ItemTemplate>
<div style="float: left; padding-bottom: 20px; padding-left: 10px; padding-right: 10px;">
<div class="CardItem" style="margin: auto !important;">
<div class="cardDisplay">
<img src="../App_Themes/VivaTheme/images/loading_big.gif" alt="" onerror="javascript:this.onerror = null;this.src='../images/Orders/VivaNotAvailable.jpg';"
onload="RetrievePicture(this,'<%# Eval("PRODUCT_ID")%>');" class="lof-image"
width="180" height="117" style="margin-bottom: 5px;" />
</div>
<div class="points">
<%# DataBinder.Eval(Container.DataItem, "SALES_PRICE", "{0:###,###,###,##0.00}") + " " + Eval("CURRENCY_ABREVIATION")%>
</div>
<hr class="fleft" style="border: 1px solid #D9E1E3; width: 195px;" />
<div class="CardItemDesc">
<table width="100%" style="display: inline-block;">
<tr>
<td>
<%# Eval("PRODUCT_NAME")%>
</td>
</tr>
<tr>
<td>
<telerik:RadRating ID="RadRating1" Skin="Metro" runat="server" Enabled="false" Value='<%# Double.Parse(Eval("SALES_PRICE").ToString()) % 3 +2 %>'>
</telerik:RadRating>
</td>
</tr>
<tr>
<td>
<img src="../images/Orders/AddToCart.png" alt="Add to Cart" height="23" onclick="AddToCart(this, '<%# Eval("PRODUCT_NAME")%>', '<%# Eval("SALES_PRICE") %>', '<%# Eval("CURRENCY_ABREVIATION") %>', '<%# (Eval("UNIT_SYMBOL").ToString()=="K" ? "Kg" : (Eval("UNIT_SYMBOL").ToString() == "U" ? "Pc" : Eval("UNIT_SYMBOL"))) %>', '<%# Eval("PRODUCT_ID") %>', '<%# Telepaty.SecurityHelper.StringEncryptorDecryptor.Instance.EncryptString(Eval("PRODUCT_ID").ToString()) %>');return false;"
class="Clickable fleft" />
<% if (LoggedClient.Current != null)
{ %>
<img src="../images/Orders/BuyNow.png" alt="Buy Now" style="padding-left: 30px;"
height="23" onclick="javascript:window.location='Checkout.aspx?pID=<%# Telepaty.SecurityHelper.StringEncryptorDecryptor.Instance.EncryptString(Eval("PRODUCT_ID").ToString()) %>';return false;"
class="Clickable fright" />
<% }
else
{ %>
<img src="../images/Orders/BuyNow.png" alt="Buy Now" style="padding-left: 30px;"
height="23" onclick="javascript:window.location='/Login.aspx?ref=anonym&pID=<%# Telepaty.SecurityHelper.StringEncryptorDecryptor.Instance.EncryptString(Eval("PRODUCT_ID").ToString()) %>';return false;"
class="Clickable fright" />
<% }; %>
</td>
</tr>
</table>
</div>
</div>
</div>
</ItemTemplate>
</telerik:RadListView>
server side :
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
RadListView1.DataSource = OrderDataHelper.GetProductByCategoryforGrouping();
RadListView1.DataBind();
}
}
The RadListView control does not have an item placeholder specified
anyone know why this problem occured ?
You set ItemPlaceholderID="ProductsHolder" in your ListView but there is no PlaceHolder with given ID in your LayoutTemplate .
Just add this code to your LayoutTemplate
<LayoutTemplate>
<asp:PlaceHolder ID="ProductsHolder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
The error you are getting does means that you should declare a control in your LayoutTemplate which to determine where the items (ItemTemplate, EditItemTemplate etc.) should be instantiated.
Please refer to this live demo for a sample of how to construct RadListView programmatically.