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.
Related
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.
So I have an app that I am trying to strip out all of the JQuery Mobile and now use Intel's App Framework. I am having trouble figuring out how to integrate multiple html pages into the app so that I don't have to have all my code in a single file. I tried this:
$.ui.loadContent("page2.html");
but that doesn't seem to work. I get a 'loading content' spinner but nothing seems to happen.
How do I link pages together from different files?
Ok so I have figured it out. The documentation can sometimes be hard to search and there is no search box available on their website right now. But if you go to the quickstart and then then AFUI(on the left) and then panel properties they say:
data-defer="filename.html" - This will load content into the panel
from a remote page/url. This is useful for separating out content into
different files. af.ui.ready is not available until all files are
loaded asynchronously.
So in my index.html file I have something like this:
<div id="afui">
<nav>
<ul class="list">
<li>Post a Lunch</li>
<li>Personal Profile</li>
<li>Select University</li>
</ul>
</nav>
<!--Main View Pages-->
<div class="panel" title="Events" id="event-list_panel" data-defer="event-list.html" data-load="loadMainEventsList"> </div>
<div class="panel" title="Description" id="description_panel" data-defer="description.html" data-load="loadEventDetails"> </div>
<div class="panel" title="Select University" id="select-university_panel" data-defer="select-university.html"> </div>
</div> <!--id="afui"-->
and then I have the details of each page in seperate files. In my mind this does a literal copy/paste, and I haven't found any evidences yet that it isn't just a copy/paste.
Update:
in AF3 data-defer is now data-include
I'm using jQuery mobile and Knockout JS (latest versions of both).
I cannot seem to style a horizontal list after knockout updates the dom.
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
<h2>Static</h2>
<div id="staticControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
3G
SD
HD
HD+
/div>
The "Static" looks good, but the "dynamic" is not styled by jQuery mobile. I've tried several methods of trying to make this work, and I am missing something... after knockout runs, I do:
$("#dynamicControlgroup").trigger("create")
$("#dynamicControlgroup").children('a').buttonMarkup({ inline: true,mini: true,corners: true, type: "horizontal"});
But here is what it looks like:
Thoughts?
After appending new items, use the below code.
$('[data-role="controlgroup"]').controlgroup().trigger('create');
Note: Creating completely new controlgroup doesn't get enhanced corners dynamically. However, appending new items into existing controlgroup corners get enhanced. This problem can be solved by adding ui-first-child and ui-last-child classes.
$('[data-role="controlgroup"] a').first().addClass('ui-first-child');
$('[data-role="controlgroup"] a').last().addClass('ui-last-child');
Demo
Turns out with Knockout you need to remove the controlgroup from the div so you dont get the "empty wrapper". So the dynamic code looks like:
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
and then on page load, you can call
$('#dynamicControlgroup').controlgroup().trigger('create');
$('#dynamicControlgroup a').first().addClass('ui-first-child');
$('#dynamicControlgroup a').last().addClass('ui-last-child');
and this works. Thanks to Omar for the help on the first/last rounded classes tip!
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