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.
Related
I want to upload multiple images in,but it is not selcting multiple images
<div class="col-md-4">
<div class="form-group m-b">
<label>Small Image</label>
<asp:FileUpload ID="fileUp1" runat="server" AllowMultiple="true"
CssClass="form-control" />
<small style="color: red;">Image Size Should be 280*282 px</small>
</div>
</div>
Might be of an issue of asp control. Check attribute multiple is present after rendering by inspecting the file upload control in dev tools
If not add it explicitly
<asp:FileUpload ID="fileUp1" runat="server" multiple CssClass="form-control" />
So needed help again
Sorry a bit confusing but, I am trying to create a chat box which user can submit and then retrieve it again from the DB, I am following this script https://bootsnipp.com/snippets/EkQe7
As you can see, from the HTML code, there is two types, one is when you chat and another is when other people chat,
<div class="chat">
<div class="chat-history">
<ul class="chat-ul">
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
</ul>
</div> <!-- end chat-history -->
</div> <!-- end chat -->
So now, what I am trying to do is from the retrieve the message from DB then code-behind submit the HTML code into the Repeater,
If it is "You", then will use this code
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
If it is other people, then will use this code
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
My question is how to do that from Code-Behind PageLoad? How to add the code above into the Repeater from code-behind?
Thanks!
First, you'll have to retrieve the records in the database in the code behind. (See this msdn article for details)
messages.DataSource = myMessages;
messages.DataBind();
Now we can use Repeater, in which the html is separated by author, to iterate the data. Note that I am assuming how your database of messages is structured.
<asp:Repeater id="messages" runat="server">
<ItemTemplate>
<div runat="server" visible='<% (Container.DataItem("author") == "us") %>'>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
<%# Eval("testMessage") %>
</div>
</li>
</div>
<div runat="server" visible='<% (Container.DataItem("author") != "them") %>'>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name"><%# Eval("authorName") %></span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right">
<%# Eval("testMessage") %>
</div>
</li>
</div>
</ItemTemplate>
</asp:Repeater>
I haven't tested this code, but its a high level idea of what to do. You may also want to see some Examples on using Repeater.
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 have added bootstrap to my application and when i wrote
<div class="container-fluid">
<div class="row" ng-repeat="user in users " style="border: 1px solid black"
ng-click="goToUserDetails(user.Id)">
<div class="col-md-4 text-center">{{user.Email}}</div>
<div class="col-md-4 text-center">{{user.Name}}</div>
<div class="col-md-4 text-center">{{user.Password}}</div>
<div class="col-md-4 text-center">
<span class="glyphicon glyphicon-trash" ng-click="delete(user.Id);$event.stopPropagation();">
</span>
</div>
</div>
<button class="btn btn-danger" ng-click="gotoAddUser()">Add</button>
</div>
It works , but when I want to add a card
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Button
</div>
</div>
It doesn't recognize the bootstrap "card" classes (the btn works )
Can someone help me pls?
There is no default Card design in Bootstrap 3.3.6 or lower version.
So now we have only two option for design card.
The standard way is Upgrade your Bootstrap version like move 3.3.6 or lower to Bootstrap 4. Bootstrap 4 Card
--- OR ---
Write your own stylesheet for card design if you want your card design same as well as Bootstrap common design then you can pick that CSS from Bootstrap 4 Card. In this case you can just pick those design which was you actually need for your Card no any other extra CSS so it will not effect your other sections or modules.
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?