I have a circular bootstrap circular progress bar I need to be able to set the value of the div in the code behind at the min it is set as follows
<div class="circle" style="padding-right: 0px;">
<div class="c100 p25">
<span>
<dx:ASPxLabel ID="paymentsCount" CssClass="dxeBase_DevEx-larger" Font-Size="Larger" runat="server" Text=""></dx:ASPxLabel>
</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
How would I be able to manipulate the p25 amount which is a percentage of 100% in code behind c# I have a value in payments count which is the amount of payments a user has made.
Something like that :
<div class="c100 p<%: ThePrecentage %>">
?
but what your are saying is that you can manage any value of class?
like p1,p2,... p100?
Related
I have client request where there will be 3 columns out of these 3 columns,if any one column data is empty i need to show empty label error in that particular column.i want to use repeater control only please tell me guys how can i handle this my front end code is below and i don't know how to handle from code behind please help
<asp:Repeater ID="Repeater_ClientSection" runat="server" Visible="false">
<ItemTemplate>
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<i class="service-icon fa fa-globe"></i>
<h4 class="title"><%#Eval("Client_Name")%></h4>
<p class="description"><%#Eval("Client_Details")%></p>
<a href="#" class="read-more">
<span>Read More</span>
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
[1]: https://ibb.co/48kF0Sz want to implement like this image
You could do a ternary operator in the ItemTemplate
<%# !string.IsNullOrEmpty(Eval("Client_Name").ToString()) ? Eval("Client_Name") : "EMPTY" %>
I am making a website (www.jocogolocal.com), and one of the objectives is to use Twitter bootstrapping to make all contents of the site fit the screen and eliminate as much white space as possible, but I feel like I am stuck because despite my efforts, it is not formatting the way I would like it, and sometimes it would even break the site with how bad / big the content / image banner gets. below is the code of both the master page and the page with the content, View Vendor, any help will be highly appreciated.
Master page
<asp:Table runat="server">
<asp:TableRow>
<asp:TableCell>
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="container">
<asp:Image runat="server" ImageAlign="Middle" ImageUrl="~/Images/JoCoGoBanner.png" class="img-responsive col-lg-12 col-md-12 col-sm-12 "/>
</div>
</div>
</div>
</div>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<br />
View Vendor
<ItemTemplate>
<tr>
<td>
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-12">
<p><asp:Label runat="server" ID="lblName" Enabled="false" Font-Bold="true" Font-Size="X-Large" Text='<%# Bind("Name") %>'/></p>
</div>
</div>
</td>
</tr>
There is no full answer to this question other than to point you in the right direction to help yourself.
Tables should be used to display tabular data. They shouldn't be used for full site layout which is what you are essentially doing. One of the main selling points to bootstrap CSS is that it has already fleshed out flexible building blocks for you to use. I'm assuming this is a school project? Challenge yourself to build the layout without tabular structure using divs and the bootsrap classes (containers, rows, cols). With the current site it looks like you are missing the point of bootstrap all togather.
If you are attempting to eliminate white space, stop stacking containers inside of containers inside of containers. Each one of these elements has their own padding and margin values so every time you do this, you are fighting against yourself even more.
For Example, your first table is full of unnecessary elements that are fighting against what you are trying to do.
You:
<table>
<tbody><tr>
<td>
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="container">
<img class="img-responsive col-lg-12 col-md-12 col-sm-12 col-xs-20" src="Images/JoCoGoBanner.png">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody></table>
Clean div with flexible layout using bootstrap:
<div class="jumbotron p-0"><img class="img-responsive col-lg-12 p-0" src="Images/JoCoGoBanner.png"></div>
Break free from tabular layout thinking or you will always be fighting against yourself dealing with flexible layout requirements.
I work for the public school system in Louisville, KY. I'm developing using html5, bootstrap, and asp.net/C#.
I'm developing a web page to display attendance data for our schools, approximately 180 schools total. The dataset is being pulled in from a SQL Server database and being dynamically built in the c# codebehind. The initial load of the data takes about 5 seconds to load all 180 schools.
The tabs are used to show filtered data -- the initial active tab shows All Students. The other tabs filter to show students who are on a lunch plan, at risk for dropping out, etc.
<div class="container-fluid">
<div class="panel with-nav-tabs panel-success" style="margin-bottom: 1px; padding-bottom: 1px;">
<div class="row" style="margin-bottom: 1px; padding-bottom: 1px;">
<div class="col-md-4" style="margin-bottom: 1px; padding-bottom: 1px;">
<div id="tabFilters" class="panel-heading" style="margin-bottom: 1px; padding-bottom: 1px;">
<ul class="nav nav-tabs">
<li class="active">All</li>
<li>At Risk</li>
<li>ECE</li>
<li>ESL</li>
<li>Gap</li>
<li>LEP</li>
<li>Section 504</li>
</ul>
</div>
</div>
</div>
<div class="panel-body scrollHorizontal">
<div class="tab-content">
<div class="tab-pane fade in active" id="all">
<asp:PlaceHolder ID="phStudMthAll" runat="server"></asp:PlaceHolder>
</div>
<div class="tab-pane fade" id="atRisk">
<asp:PlaceHolder ID="phStudMthAtRisk" runat="server"></asp:PlaceHolder>
</div>
<div class="tab-pane fade" id="ECE">
<asp:PlaceHolder ID="phStudMthECE" runat="server"></asp:PlaceHolder>
</div>
<div class="tab-pane fade" id="ESL">
<asp:PlaceHolder ID="phStudMthESL" runat="server"></asp:PlaceHolder>
</div>
<div class="tab-pane fade" id="Gap">
<asp:PlaceHolder ID="phStudMthGap" runat="server"></asp:PlaceHolder>
</div>
<div class="tab-pane fade" id="LEP">
<asp:PlaceHolder ID="phStudMthLEP" runat="server"></asp:PlaceHolder>
</div>
<div class="tab-pane fade" id="sec504">
<asp:PlaceHolder ID="phStudMthSec504" runat="server"></asp:PlaceHolder>
</div>
</div>
<div>
<table class="no-result" style="width: 1000px; align-content: center">
<tr>
<td style="font-size: 30px; font-weight: bolder; color: red">No Results Found</td>
</tr>
</table>
</div>
</div>
</div>
</div>
During initial development I filtered the dataset down to show data for just one school. Everything worked great -- switching between tabs was extremely quick. However, when I removed the filter and started passing data in for every school, it started taking between 7-10 seconds to switch from one tab to another. My first thought was that it's a rather large dataset so maybe it's just taking a while to load. Using jQuery I placed a console message in the window.load event so I could tell when the page was finished loading. After it was fully loaded I tried switching to another tab -- and using the tab onclick event I sent another console message telling me that the new tab had been selected. This "here" message gets displayed immediately, but then there's still the 7-10 second lag before switching to it. And as you see below I've commented out the doPostBack and set a breakpoint in my page_load codebehind function to verify it isn't hitting the code behind.
<script type="text/javascript">
//Called when the tab changes
function changeFilter(filterType) {
$("#filterType").val(filterType);
console.log("here");
//__doPostBack();
}
$(window).load(function () {
console.log("done");
});
</script>
At this point, I've removed all data loading events from the initial non-active tabs so that when they are selected, it should just display an empty panel immediately. The only data that is getting loaded is the initial page load, which as I mentioned takes about 5 seconds. Doing this and selecting a new tab after the load is completed is still taking 7-10 seconds. If I don't load any data at all, including not loading the initial data load, switching between the tabs becomes extremely quick again.
Any suggestions why the large dataset would be causing such a delay between switching tabs?
Hello I'm new to c# and bootstrap, I want to style my table like on the picture below using gridview and make it responsive, and I don't know how to implement it.
aspx code:
<div class="table-responsive">
<asp:GridView runat="Server" id="data" CssClass="table table-hover table-bordered"/>
</div>
css code:
.table-responsive{
margin: 20px;
}
But the output of my table looks like this
You cannot realize that structure with a GridView. What you really need is a FormView. Inside the FormView's ItemTemplate define a table with your required markup.
MSDN Url: Using the FormView's Templates
Not much idea about c#, but with bootstrap you can use classes row and col-sm-3, col-md-3, col-lg-3 for different views.
<div class="table-responsive">
<div class="row">
<div class="col-sm-3 col-md-3">section1</div>
<div class="col-sm-3 col-md-3">section2</div>
<div class="col-sm-3 col-md-3">section3</div>
<div class="col-sm-3 col-md-3">section4</div>
</div>
</div>
Form more help http://getbootstrap.com/css/#grid
I hope i make sense this, i have a repeater and on click of a button, the corresponding div should open up, I can do this when it is hardcoded however since its a repeater there will be different IDs. Here is my repeater;
<asp:Repeater ID="rptProfileStatus" OnItemDataBound="rptProfileStatus_OnItemDataBound"
runat="server">
<ItemTemplate>
<li class="bar1">
<a name="jh"></a>
<div align="left" class="post_box">
<div class="itembottom">
<span class="date">
<asp:Label ID="lblDate" Font-Underline="false"
ForeColor="white" runat="server"></asp:Label>
</span>
<span class='feed_link'>
</span>
<span class="commentsno">
2 comments
</span>
</div>
<span class="delete_button">
</span>
</div>
<div id="fullbox" class="fullboxahrefReply"></div>
<div id="commentload"></div>
</li>
</ItemTemplate>
</asp:Repeater>
Here is the jquery which i am trying to get to call it, it works now however when i start changing the ID's i will have a problem, how do i solve this;
//Comment Box Slide
$("[id$=ahrefReply]").live("click", function ()
{
var ID = $(this).attr("id");
$(".fullbox" + "ahrefReply").show();
$("#c" + "ahrefReply").slideToggle(300);
});
In the anchor's click event, you can do something like,
click="YourFunction(<%# ((YourClass)Container.DataItem).Id %>)"
Then handle the id in your function. You will have to modify this to work with your situation as well.
Try just walking up the DOM. Something like this:
$(this).parent().parent().find('fullboxahrefReply').show()