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
Related
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.
I am using this code to show a dialog box that will confirm for a delete button, it works fine, but when it pops up it doesn't disable any controls of ASP.Net page, so I can click on any of the controls or text boxes,
First thing I wanna do is fade out the page when Jquery opens my Div tag BOX and second to disable all the controls.
here's the code
Div (Custom Dialouge box)
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
Script (jquery)
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='btDelete']").click(function()
{
$("#divConfMessage").fadeIn();
});
});
</script>
Button
<td>
<asp:Button ID="btDelete" runat="server" CssClass="gradientbutton" OnClick="btDelete_Click"
OnClientClick="this.disabled=true;this.value='Please Wait...';" Text="Delete" Width="200px" />
</td>
Css for Dialog Box
#divConfMessage
{
position: absolute;
width: 500px;
height: 200px;
top: 50%;
left: 30%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 2px solid #000;
DISPLAY:none;
background-color:White;
line-height:20px;
text-align:center;
}
Note
All of the code is in ASP content place holder for the page except CSS, I have 2 another Contents with different controls + a Master Page defining all these Content Place holders.
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<%# Page Language="C#" MasterPageFile="~/my.Master" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="a.b.c" Title="e" meta:resourcekey="PageResource1" %>
set Modal=true; for dilogbox there is modal property, you can set it as True.
try using Jquery dialogue box ( it comes with JqueryUI plugin).
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
EDIt: if you don't want to use buttons, then use like this
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true
});
or if you want to use CSS then you can try
#YourDivorContainerToShowAsDialog
{
position: absolute;
Z-index: withMaxValue
}
Give a higher Z-index for #divConfMessage and then the modal dalog will be on top everything.
When you add a dialog append it to body as this way:
add_block_page();
add_modal_box();
function add_block_page(){
var block_page = $('<div class="page"></div>');
$(block_page).appendTo('body');
}
function add_modal_box(){
var pop_up = $('<div id="divConfMessage"></div>');
$(pop_up).appendTo('.page');
}
Use one transperant image to fadeout the page.
Add one outerDiv and apply the image to the div.
<div id="outerDiv" style="display:none;">
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
</div>
CSS for outerDiv
# outerDiv
{
top:0%;
left:0%;
position:absolute;
background-image:url('../img/FloatingPanel.png');//transperant image
color:White;
z-index: 1102;
Height:100%;
width:100%;
}
Give a higher Z-index for #divConfMessage than the Z-index of outerDiv(ie:1103).
Show the outerDiv onclick of btDelete
I have the following source in a user control:
<asp:Panel runat="server" ID="PanelParametersList" CssClass="AccessReportParameterControls"></asp:Panel>
<div class = "buttonpanel">
<asp:Button ID="Button1" runat="server" Text="View Report"
onclick="Button1_Click"></asp:Button>
<asp:Button ID="Button2" runat="server" Text="Back"
onclick="Button2_Click"></asp:Button>
</div>
In the header of the containing aspx page I am adding css styles:
<style type="text/css">
.ReportViewer_AccessReportViewer { position:absolute; top:50px; }
.ReportViewer_AccessReportViewer_noparams { position:absolute; top:0px; }
.AccessReportParameterControls {width: 100%; background-color: #E4E4EC; padding: 5px; }
.ParameterContainer {width: 100%;}
.ParameterControlLabel {padding:0, 10, 0, 10;}
.AccessReportParameters {width: 100%;}
.buttonpanel {margin:0 auto; }
</style>
I am trying to center the contents of the button panel div but am having no luck.....any ideas?
For centering content in a div
text-align:center;
<div class = "parent">
<button />
</div>
Style:
.parent{
text-align:center;
}
This is all you need to do. Set the text-align to center in any parent container and the inline elements will follow the rule.
As a good practice I would advice you to place your styles in a different style.css file and place this in your .asp files:
<link href="style.css" rel="stylesheet" type="text/css" />
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?
Above is an image of the rendered css when I changed the bg color of .speech_bubble_content to red. The bubble isn't displaying properly.
I am using the following code to retrieve data from a database and bind it to a repeater. I am also using css to display a speech bubble around what I want to display. I noticed that data is displayed when I place a label outisde of the div - and nothing is retrieved when the label is inside the div - in this case creation date is displayed, but story is omitted. Why is this happening? Thanks for your help. I believe this is caused by css.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="speech_bubble">
<b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
<div class="speech_bubble_content">
<p>
<asp:Label ID="story" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Story") %>'></asp:Label>
</p>
</div>
<b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
<em></em><span></span>
</div>
<asp:Label ID="user" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CompanyRole") %>'></asp:Label> <asp:Label ID="date" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CreationDate") %>'></asp:Label>
</ItemTemplate>
</asp:Repeater>
Here's the CSS:
.speech_bubble{
background: transparent;
margin:10px 0;
}
.speech_bubble_content{
display:block;
background:#fff;
border:3px solid #ddd;
border-width:0 3px;
}
.speech_bubble p{
padding:0.5em 0;
color:#000;
margin:0 15px;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
display:block;
overflow:hidden;
font-size:0;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
height:1px;
}
.sb4, .sb5, .sb6, .sb7{
background:#fff;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
.sb1 {margin:0 8px; background:#ddd;}
.sb2 {margin:0 6px; background:#ddd;}
.sb3 {margin:0 4px; background:#ddd;}
.sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.sb6 {margin:0 2px; background:#fff; border-width:0 3px;}
.sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;}
.speech_bubble em{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:12px solid #ddd;
border-left:12px dotted transparent;
border-right:12px dotted transparent;
margin-left:50px;
}
.speech_bubble span{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #fff;
border-left:10px dotted transparent;
border-right:10px dotted transparent;
margin-left:52px;
margin-top:-15px;
}
Yes do as rene suggest. View the source, HTML copy it and the CSS and save it to http://jsbin.com/ and send the Link back here so we can see the REAL html that .NET generates.
You might also just want to have
<%#DataBinder.Eval(Container.DataItem, "Story") %>
instead of using a asp:label as it will add unwanted HTML tags.