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
Related
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 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?
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?
I am using asp.net. and I have a div which should be organised in dynamic manner. Meaning I want to organise the div in dynamic manner. My divs are
<div id="LatestReviews" runat="server">
LatestReviews
</div>
<div id="PopularListings" runat="server">
PopularListings
</div>
<div id="Headlines" runat="server">
Headlines
</div>
<div id="LatestEvents" runat="server">
LatestEvents
</div>
<div id="NewJobs" runat="server">
vNewJobs
</div>
<div id="LatestClassifieds" runat="server">
LatestClassifieds
</div>
<div id="NewWishes" runat="server">
NewWishes
</div>
<div id="SalesAndDiscounts" runat="server">
SalesAndDiscounts
</div>
I want the LatestClassifieds should come in first place and LatestReviews to Come in place of LatestClassifieds and so on and so forth. I want to do it by C# code. I have a datatable which has the sequence of ordering div for the page. According to the Sequence I want to organise DIV. I Find to cut paste for the textbox but not the asp control. Is there any solution for cut paste Divs in C#?? any solution are surely appretiated.
There is something else you can try to archive the same;
Add the Sequence/Priority column in you DB for each of the category.
Then wile fetching the data for DB short as per Sequence/Priority and then add it to HTML using c# code.
The advantage here is that you will be able to change the location/occurrence of any item without changing you code.
Hope it helps...!!!
I am trying to use the jquery accordion with a repeater. I used the sample directly from the jquery documentation. When I click on the section links, the details open and expand, but you can't see any of the text. The html output looks right to me, not sure where this is going wrong.
<script>
$(document).ready(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<asp:Repeater ID="respondToExceptionsList" runat="server">
<ItemTemplate>
<h3>Section 1</h3>
<div>
sdfffffffffffffff
</div>
</ItemTemplate>
</asp:Repeater>
</div>
This is the html output.
<DIV id=accordion class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role=tablist jQuery1315324170464="2">
<H3 aria-expanded=true class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role=tab tabIndex=0 jQuery1315324170464="3">
<SPAN class="ui-icon ui-icon-triangle-1-s" jQuery1315324170464="13"></SPAN><A tabIndex=-1 href="#">Section 1</A></H3>
<DIV style="HEIGHT: 19px" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role=tabpanel>sdfffffffffffffff </DIV>
</DIV>
This is related to the accordion height being set to zero. I am having the same issue using the accordion in an html repeater generated using angularjs. To fix the problem, the accordion must be refreshed after the data is loaded. I found the answer in the jquery forums here.