I am new to using Bootstrap and want to create a responsive layout that has 2 columns side by side for my posts. Example
I want to achieve the 2 column arrangement seen under Portfolio. I have looked at the source and see various classes that don't seem to be included in the standard Bootstrap. I am using the Bootstrap version included with an MVC6 project in VS2013. Any help or a nudge in the right direction is appreciated.
My attempt to date causes this to occur. I end up with the gap.
Here my MVC code that causes the gaps to occur:
<div class="container">
#For Each item In Model.ToList
#<div class="col-md-6">
<div class="item">
<div class="content">
#Html.Raw(GetImageHelper.getImage(True, item.PostSummary))
<h3>
#item.PostTitle
</h3>
#Html.Raw(item.PostSummary.StripStyle)
</div>
</div>
</div>
Next
</div>
Thank you
It looks like you didn't use clearing properly. My solution for that issue is to use bootstrap row class. Following example also supports responsiveness:
<div class="row">
<div class="col-md-6 col-xs-12"></div>
<div class="col-md-6 col-xs-12"></div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12"></div>
<div class="col-md-6 col-xs-12"></div>
</div>
...
This is an unequal height problem. Float tries to fill the available area as much as possible, but when you have one column that's taller than another, it knocks the next float object off to the right a little. While #luke is right that you can clear each row to solve the problem, that also kills your site's responsiveness, as now you can only have two or less per row. For this particular example, that may not be a problem. You've got an initially even number of columns and for very small screens you can just scale down to one per row. In other situations, though, such as wanting to have three per row perhaps in nice wide-screen displays, you'd be out of luck.
You might want to take a look at the article, Bootstrap 3 Responsive Columns of Same Height, on Minimit.
Related
I am using both Sementic UI and Jquery UI. However, I want to use Semantic UI's accordion and there seems to be conflict when I call Semantic UI's accordion class.
Sample:
<div class="ui accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
Any suggestions?
I used Semantic UI with jQuery UI and there isnt a problem for me.
Did you initialize your semantic ui accordion in your main.js?
$('.ui.accordion')
.accordion()
;
Add the above code in your document load javascript function, and it should work!
(function($) {
$('.ui.accordion')
.accordion()
;
}(jQuery));
Also make sure jQuery JS is added before semantic JS.
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Semantic-ui JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
jquery ui and semantic have an accordion, so there is a conflict.
For fix, download from here and check all WITHOUT accordion.
I try and it's fix.
Hope that it could work for you.
As others have noted, this is a conflict between the JUI and SUI accordion functions.
I haven't seen any mention of the (currently closed) item in the SUI issue tracker about this. You could weigh in there (or, better, offer a PR) if you're inclined.
I'm building a database-driven web application, heavy CRUD stuff, such as creating, editing, and displaying people's contact information and other related data. Most information out there seems to be focused on how to design Bootstrap forms for inputting/editing data, but not much out there about proper read-only (i.e. data "display") layouts.
For example, I could do something like this:
<div class="form-group">
<label class="control-label col-md-3">First Name</label>
<div class="col-md-9 form-control-static">
#Html.DisplayFor(model => model.FirstName)
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Last Name</label>
<div class="col-md-9 form-control-static">
#Html.DisplayFor(model => model.LastName)
</div>
</div>
... and so on (for all profile properties). But this kind of a layout seems more typical/appropriate for create and edit screens with actual form controls.
I'm just wondering if there are good examples of applications (GitHub or elsewhere), of nice semantic layouts using consistent Bootstrap components, with standard-based, accessible HTML, that someone can point me to.
In addition to the simple First & Last Name scenario above, you can imagine a ton of other "person" related properties (address, email(s), phone(s), etc.). Just looking for something established to follow.
Consider using the description list element, dl. Bootstrap has styles for these and it is designed for creating lists of information:
<dl>
<dt>First Name<dt>
<dd>Jiveman</dd>
<dt>Last Name<dt>
<dd>Jivemanerson</dd>
<dl>
Bootstrap styles will target the element, so you do not need to add classes. However, you can add dl-horizontal to the dl element if you'd like to display things horizontally.
These elements also have default implicit ARIA tags for improved accessibly:
dl: role=list
dd: role=definition
dt: role=listitem
I'm just starting using jquery mobile in a project. The problem I'm having is that every anchor tag I add, it sets its content to a fixed height value. I can't find a way to modify that behaviour.
An example of the code I'm using is:
<div data-role="content" data-theme="none" class="flex-container">
<div><strong>Something</strong></div>
<img src="../animg.png" alt="Icon" />A text
</div>
Does it only happens to me?
I think this depends where your link is. Is it in a listview?
I tried to make two links with two different images inside (different size) and I don't see the behaviour you are describing.
Also, even though probably unrelated, # in links is normally used to link to another page.
See here - http://jsfiddle.net/TeNCE/
Can you either provide your jsFiddle or edit this one?
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" data-theme="none" class="flex-container">
<div><strong>Something</strong></div>
<img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/64/social_google_box.png" alt="Icon" />
<img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png" alt="Icon" />
</div>
</div>
I have some 'boxes' that use a javascript scrolling library to display content. The box contains 4 visible content nuggets like this:
<div class="item nugget lesson">
<h3>
<a href="/en/dance_genres/22-authentic-jazz" title="Details and Information for 'Authentic Jazz'">
Authentic Jazz
</a>
</h3>
<div class="thumb">
<a href="/en/dance_genres/22-authentic-jazz" title="Details and Information for 'Authentic Jazz'">
<img alt="22" src="http://common-resources.idance.net.s3.amazonaws.com/images/model_resources/dance_genres/thumb/22.jpg">
</a>
</div>
History: Grounded in vintage videos, the modern revival of ...
<br>
<a href="/en/dance_genres/22-authentic-jazz" title="Details and Information for 'Authentic Jazz'">
<img alt="Lesson_view" src="/images/objects/lesson_view.png?1276105734">
</a>
</div>
When I render more than 50 of these partials, rails rendering load time is noticeable slow (over 2 seconds). I've optimized the sh*% out of my db queries and even added counter_cache fields, so that is not the slowdown.
I'm not talking about load in the browser, but rails processing time.
Please see load times here: http://pastebin.com/pSrNSSsF
Is this normal?
This is normal. You can try rendering a collection, for a bit of a performance gain. (Or cache.)
I am using ajax to load 3 jsps in a master page but the problem is it loads one after the other? I wanted to know if struts 2 can handle 3 action class calls at the same time? Or is it even possible to make such calls? My page is getting slow because of this, is there any other way to handle this?
<div id="content">
<div class="col1">
<div id="content_right">
<div class="curved section_content">
<div id="sub_header" class="curved_top">
<h2>
<s:text name="ft.history.title.details" />
</h2>
</div>
<sj:div cssClass="ajaxDiv" href="transferdetailhistory"
id="transfer_detail_content">
<div class="ajaxSection">
<div class="centeredAjaxSection">
<center>
<img style="vertical-align: middle;" alt="Loading"
src="${pageContext.request.contextPath}/img/bigindicator.gif">
</center>
</div>
</div>
</sj:div>
</div>
</div>
</div>
this would load the history page, like wise i load 2 more jsps
Struts2 can handle significantly more than three simultaneous requests. There are many large, scalable applications using the Struts2 framework.
The issue is most likely related to your code.
we are in our application using such cases in every now and than and never faced problem with this.
better come up with some code may be problem with your code or some configuration as Steven said in his repply