EDIT
It was fixed by adding width: 100% to the css.
I have a dynamically created treeview that pulls locations as parent nodes and lists deals at those locations in the child nodes.The treeview is dynamically created, so it's not like I can put a div around it and format the div. I've tried that. The formatting in the div doesn't show up at all. I want the treeview to display like this:
_ Location A
____ Deal A
____ Deal B
____ Deal C
_ Location B
____ Deal A
____ Deal B
____ Deal C
But right now it displays centered and it looks ugly. I've tried using a div, I've tried using classes. The nodes refuse to left align and stay firmly in the center. I know the class is working because I can change the margins and the border and the background color, but nothing touches the actual text.
aspx:
<asp:MultiView ID="LoginView" runat="server">
<asp:View ID="VendorContent" runat="server">
<h2>My Locations</h2>
<hr style="margin-left: 10%; margin-right: 10%">
<br />
<div class="location" runat="server">
<div id="treeview" runat="server">
<asp:TreeView ID="LocationTreeView" runat="server" Value="Left" CssClass="treeview">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<asp:Button runat="server" ID="saveChanges" OnClick="saveChanges_Click" Text="Save Changes" CssClass="save_treeview"/>
<a id="newDealLink" href="deals.aspx">Make a new deal</a>
</div>
</asp:View>
</asp:MultiView>
aspx.cs:
This is called in the page load if the view is a vendor:
private void loadVendorTree(UserInfo userinfo)
{
LocationTreeView.ShowCheckBoxes = TreeNodeTypes.All;
foreach (Location location in locations)
{
List<int> deal_IDs = new List<int>();
TreeNode node = new TreeNode(location.Address, location.Location_id.ToString());
node.ShowCheckBox = false;
foreach (Deal deal in deals)
{
TreeNode dealNode = new TreeNode(deal.Info, deal.Deal_id.ToString());
if(location.Deals.Contains(deal)){
dealNode.Checked = true;
}
else
{
dealNode.Checked = false;
}
deal_IDs.Add(deal.Deal_id);
dealNode.SelectAction = TreeNodeSelectAction.Select;
node.ChildNodes.Add(dealNode);
}
LocationTreeView.Nodes.Add(node);
}
}
css:
.treeview {
text-align: left;
margin: .5em 0;
padding-left: 0;
padding-right: 6em;
color: black;
border: 2px solid pink;
}
.save_treeview {
margin-left: .5em;
margin-bottom: .5em;
width: 10em;
}
.location {
text-align: left;
max-width: 45em;
margin: 0 auto;
background: rgba(255,255,255,0.5);
border: 2px solid #dcdaf1;
}
If anyone can help me or direct me to something that can I would really appreciate it.
maybe try nested unordered lists like this:
<ul>
<li>Location A</li>
<li>
<ul>
<li>Deal A</li>
<li>Deal B</li>
<li>Deal C</li>
</ul>
</li>
<li>Location B</li>
<li>
<ul>
<li>Deal A</li>
<li>Deal B</li>
<li>Deal C</li>
</ul>
</li>
</ul>
Then just style the unordered lists and list items with css and you are good.
Related
I am having a problem with how to display a link in Sitecore. Currently I have three fields that I use: Name, Title and Link. All three of these fields are within a div tag, so...
<div class="container">
<div class="name"><sc:FieldRenderer ID="ColumnName" FieldName="Name" runat="server" /></div>
<div class="title"><sc:FieldRenderer ID="ColumnTitle" FieldName="Title" runat="server" /></div>
<div class="link"><sc:FieldRenderer ID="ColumnLink" FieldName="Link" runat="server" /></div>
</div>
For regular view, the link tag is being displayed as just text (that is written in Sitecore) but when it switches to mobile view, the container becomes the link with the Name and Title as the only thing showing and taking away what is in the Link field. My problem is how do I make the container the same link as the one that displays as text in desktop view? Is there a way have the text not be displayed and put an overlay container ontop of everything but just have the background as transparency to make the container go to the same link? For the backend, I just used a Listview that contained everything to make the fields show:
protected void Page_Load(object sender, EventArgs e)
{
Item item = this.DataSourceItem;
lvContains.DataSource = ((MultilistField)item.Fields["Columns"]).GetItems();
lvContains.DataBind();
}
protected void lvContains_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
Item item = (Item)e.Item.DataItem;
((FieldRenderer)e.Item.FindControl("ColumnName")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnTitle")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnLink")).Item = item;
}
}
Assuming you are using a responsive design, for the mobile/tablet breakpoints you can add some additional CSS properties to make the link the full height/width of the parent container and hide the text:
.container { border: solid 1px red; position: relative; }
.name { border: solid 1px blue; }
.title { border: solid 1px green; }
.link a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-size: 0;
color: transparent;
}
<div class="container">
<div class="name">Item Name</div>
<div class="title">Item Title</div>
<div class="link">Item Link</div>
</div>
If you are not using a responsive design, and using device detection, then you can add an additional CSS class to the link and modify the css to match:
.link a.mobile {
...
}
And add the CSS Class in code behind:
((FieldRenderer)e.Item.FindControl("ColumnLink")).CssClass = "mobile";
My code have the problem of embedded for loop can't access the variables. I am using C#. Here is the codes:
<% List<ProductPacking> categoryList = new List<ProductPacking>();
categoryList = packBLL.getAllCategory();
foreach(ProductPacking cl in categoryList) { %>
<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- First collapsible panel extender header -->
<div class="form-group" style="background-color: #ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
<%= cl.categoryName; %>
</div>
However, at this line: <%= cl.categoryName; %>, it told me the name cl does not exist in current context. I wonder why is it so.
I think is the way of how you are closing the tags in this case is the for each ends before the elements you want to render, try to close that at the end of the html to display and avoid using asp tags as well.
try something like
<%
StringBuilder sb = new StringBuilder();
List<ProductPacking> categoryList = new List<ProductPacking>();
categoryList = packBLL.getAllCategory();
foreach(ProductPacking cl in categoryList) {
sb.AppendFormat("<div>{0}</div>",cl.categoryName);
//some more html here
}
response.write(sb.ToString());
%>
but I'd prefer to use a grid or another similar control and customize the row template to make my life easier
I am a new ASP.NET developer and a new user of Twitter Bootstrap. I am trying to have a breadcrumb in my ASP.NET application. I already developed it but I am trying to apply the style of Twitter Breadcrumb on it. It is really too difficult to apply specific CSS style to ASP.NET web-forms control.
So how to do that?
My ASP.NET Code:
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu>
<asp:SiteMapPath ID="SiteMap1" runat="server" PathSeparator=" > " ParentLevelsDisplayed="1"
PathDirection="RootToCurrent" RenderCurrentNodeAsLink="false" ShowToolTips="true"></asp:SiteMapPath>
Twitter Bootstrap style of Breadcrumb:
<style>
.breadcrumb
{
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb > li
{
display: inline-block;
}
.breadcrumb > li + li:before
{
padding: 0 5px;
color: #cccccc;
content: "/\00a0";
}
.breadcrumb > .active
{
color: #999999;
}
</style>
Fyi, in HTML the Breadcrumb will be developed as following:
<ol class="breadcrumb">
<li>Home</li>
<li>Library</li>
<li class="active">Data</li>
</ol>
The easiest way to add a class to a server control is to add the CssClass="" parameter and specify what classes you want to add, like this:
<asp:SiteMapPath
ID="SiteMap1"
runat="server"
PathSeparator=" > "
ParentLevelsDisplayed="1"
PathDirection="RootToCurrent"
RenderCurrentNodeAsLink="false"
ShowToolTips="true"
CssClass="breadcrumb">
</asp:SiteMapPath>
However, due to the way the SiteMapPath server control generates markup, you will need to do some additional modifications to your control, as well as to Bootstrap's breadcrumb class.
First, the SiteMapPath server control has a property called PathSeparator that allows you to specify what character separates links. If none is specified, it will use and angle bracket by default. Bootstrap's breadcrumb class uses a forward slash to separate links, so you need to change your PathSeparator property from PathSeparator=" > " to PathSeparator=" / ".
Next, you will have to create a Node template for the SiteMapPath server control. This will tell the SiteMapPath control what template each node should follow, and will allow us to tell it to make li's instead of just s:
<asp:SiteMapPath
ID="SiteMap1"
runat="server"
PathSeparator=" / "
ParentLevelsDisplayed="1"
PathDirection="RootToCurrent"
RenderCurrentNodeAsLink="false"
ShowToolTips="true"
CssClass="breadcrumb">
<NodeTemplate>
<li>
<asp:HyperLink
id="lnkPage"
Text='<%# Eval("Title") %>'
NavigateUrl='<%# Eval("Url") %>'
ToolTip='<%# Eval("Description") %>'
Runat="server"
/>
</li>
</NodeTemplate>
</asp:SiteMapPath>
Finally, you will need to modify the breadcrumb class to include the SiteMapPath control's spans in its nesting:
.breadcrumb > span > li
{
display: inline-block;
}
.breadcrumb > span > li > a:active
{
color: #999999;
}
If you don't want to use javascript to remove the hyperlink from the current node, this is what I did:
<ol class="breadcrumb">
<asp:SiteMapPath runat="server"
PathSeparator=" / "
PathDirection="RootToCurrent"
RenderCurrentNodeAsLink="false">
<CurrentNodeStyle CssClass="active"></CurrentNodeStyle>
<PathSeparatorStyle CssClass="path" />
</asp:SiteMapPath>
</ol>
Then I had to add in css for the spans to make it looks like Bootstrap's breadcrumbs. Those are just the colors I used, and I styled the path separator with some padding to match how Bootstrap did it.
.breadcrumb > span > span a { text-decoration: none; color: #00a9c6;}
.breadcrumb > span > span a:hover { text-decoration: underline;}
.breadcrumb > span > span.active { color: #777; }
.breadcrumb > span > span.path { color: #d1d1d1; padding: 0 5px;}
Here's an alternative that worked for me.
<div class="breadcrumb">
<asp:SiteMapPath ID="SiteMap1"
runat="server"
PathSeparator=" / "
ParentLevelsDisplayed="1"
PathDirection="RootToCurrent"
ShowToolTips="true">
<CurrentNodeStyle CssClass="current-node"></CurrentNodeStyle>
<NodeTemplate>
<li>
<asp:HyperLink
id="lnkPage"
Text='<%# Eval("Title") %>'
NavigateUrl='<%# Eval("Url") %>'
ToolTip='<%# Eval("Description") %>'
Runat="server"
/>
</li>
</NodeTemplate>
</asp:SiteMapPath>
</div>
and the css:
.breadcrumb > span > span > li
{
display: inline-block;
}
This method allows the bootstrap floating elements to render inside the "breadcrumb" block.
Note: the NodeTemplate block overrides the RenderCurrentNodeAsLink="false" parameter because of the Hyperlink element. To overcome this, I used javascript to remove the hyperlink from the CurrentNode element via the class selector (notice the CurrentNodeStyle element).
Hope this helps.
More simple:
<div class="panel panel-default">
<div class="panel-heading">
<asp:SiteMapPath ID="SiteMapPath4" runat="server" SiteMapProvider="WebSiteMap" ParentLevelsDisplayed="3" PathSeparator=" / ">
</asp:SiteMapPath>
</div>
</div>
asp.nettwitter-bootstrap
I have a listview of buttons(I wanted to have hyperlinks actually but have no idea how to execute without the onclick event) where I can click and show the sub categories products of a master category on another listview(already binded with products of master category table). This is my code below, apparently it does not work as expected and throws the error below:
"Both DataSource and DataSourceID are defined on 'ListView_Products'. Remove one definition."
Can someone please advice how to deal with this? Thanks.
Here is a "picture" of what I am trying to do:
**ListView 1(Sub Category)** **ListView 2(Master Category)**
Cotton "ALL THE DRESSES"
Silk
So when I click cotton in ListView1, only dresses made of Cotton will be displayed on ListView2.
<asp:ListView ID="ListView_ProductsMenu" runat="server"
DataKeyNames="CategoryID" DataSourceID="EDS_Category_Menu" >
<EmptyDataTemplate>No Menu Items.</EmptyDataTemplate>
<ItemSeparatorTemplate></ItemSeparatorTemplate>
<ItemTemplate>
<li style="color: #B6B6B6; text-align: left; font-family: candara; font-size: small;" class="SideMenu">
<asp:Button ID="Button1" runat="server" Text='<%# Eval("Category_Sub_Name")%>' OnClick='<%# FormattedCategory((int)Eval("CategoryID"),(int)Eval("Category_Sub_ID")) %>' />
</li>
</ItemTemplate>
<LayoutTemplate>
<ul ID="itemPlaceholderContainer" runat="server" style="font-family: Verdana, Arial, Helvetica, sans-serif;">
<li runat="server" id="itemPlaceholder" />
</ul>
<div style="text-align: left;background-color: #FFCC66;font-family: Verdana, Arial, Helvetica, sans-serif;color: #333333;"></div>
</LayoutTemplate>
</asp:ListView>
Code behind:
protected string FormattedCategory(int cID, int subCatID)
{
using (CommerceEntities db = new CommerceEntities())
{
ListView_Products.DataSource = null;
ListView_Products.DataSource = (from c in db.Categories_Sub
where c.CategoryID == cID
& c.Category_Sub_ID == subCatID
select c);
ListView_Products.DataBind();
//foreach (var item in subCat)
//{
// ListView_ProductsMenu.DataBind();
// }
}
return null;
}
Try to remove that attribute from <asp:ListView ... DataSourceID="EDS_Category_Menu"
Nevermind, it's ListView_Products.DataSourceID = null; actually. Thanks.
Hi I am working with a JQuery expand image function and I needed the expanded image to be on the front overlapping others but somehow I couldn't find a way to do it, I have tried to place the z-index on multiple locations but no help, please kindly advice, thanks!:
<style type="text/css">
.growImage {position:inherit ;width:80%;left:15px;top:15px; z-index:1;}
.growDiv { left: 60px; top: 60px;width:130px;height:130px;position:inherit ; z-index:-1; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.growImage').mouseover(function () {
$(this).stop().animate({ "width": "100%", "right": "10px", "top": "20px" }, 200, 'swing');
}).mouseout(function () {
$(this).stop().animate({ "width": "80%", "right": "15px", "top": "15px" }, 400, 'swing');
}); ;
});
</script>
My DataList:
<div style="width: 414px; height: 114px;">
<div class="MostPopularHead">
<asp:Label ID="LabelTitle" runat="server" Text=" Customers who bought this also bought:"></asp:Label></div>
<div id="Div1"
style="padding: 10px; background-color:#EDECB3; height: 322px; width: 372px;"
runat="server">
<asp:DataList ID="DataItemsList" runat="server" RepeatColumns ="3" Width="16px"
Height="108px" >
<HeaderTemplate></HeaderTemplate>
<ItemTemplate>
<a class='MostPopularItemText' href='ProductDetails.aspx?productID=<%# Eval("ProductId") %>&&CategoryId=<%# Eval("CategoryId") %>'
style="padding-right: 3px; padding-left: 3px">
<div class="growDiv">
<img class="growImage" alt="image" src='Styles/CatalogImages/Images/Thumbs/<%# Eval("ProductImage") %>'/>
</div></a>
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:DataList>
</div>
</div>
can you make with this
.css('z-index', parseInt( new Date().getTime()/1000 ));
Two things:
z-index will always be 'auto' unless using position of relative, absolute or fixed. Therefore, position:inherit will not work.
Update your css:
.growImage { position:relative; width:80%;left:15px;}
.growDiv {
position:relative; left: 60px; top: 60px;width:130px;height:130px;
}
Now, I made a JSFiddle to show that I got it working but I had to modify the HTML structure a bit: http://jsfiddle.net/Dpzur/4/
You will need to view the source created by your .aspx page to see how many divs, starting from any div with class: 'growDiv', that you must traverse upwards through until you are at the div element that represents its parent "ItemTemplate".. so you will need to modify my jQuery:
$(this).closest('.growDiv').first().css('z-index', 2);
to:
$(this).closest('.growDiv').first().closest('div').closest('div').css('z-index', 2);
, where you add in a .closest('div) for each div element that you need to traverse upwards through the DOM. Make sense?