Using just Angular JS Animate and Css Animation, I am trying to create an Expand/Collapse (Accordion) similar to the bootstrap collapse seen here: http://getbootstrap.com/javascript/#collapse
I have an issue with the expandable items, they pop back and forth depending on height of the expanded "show" content. See my Plunker for more a visual
My work so far:
var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);
expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
$scope.active = true;
$scope.active1 = true;
});
http://plnkr.co/edit/wBYsFM?p=info
You should use UI Bootstrap Accordion. This component is written in pure AngularJS.
<div class="list card benefit-listCard">
<h3 class="accordion" ng-class="{active:accordion1}">
<a href ng-click="accordion1=!accordion1" style="padding:0px;"><div class="item item-avatar benefit-itemAvatar">
<img src="img/aws.png" class="service-img">
<h2>Amazon Web Services</h2>
<button class="button button-small button-outline button-calm detail-button">Get Deals</button> <div
class="fa fa-fw list-arrow" ng-class="{'ion-minus-circled': accordion1, 'ion-plus-circled' : !accordion1}" style="float:right;color:#44c8f5;font-size:25px;margin-top:10px;">
</div>
</div>
</a>
Lorem Ipsum1
Cytrus Pay
Get Deals
Lorem Ipsum2.
Amazon Web Services
Get Deals
Lorem Ipsum 3
jQuery UI has a similar method you could use?
http://jqueryui.com/accordion/
Related
There is a question just like this, but the answer wasn't very clear and I don't have enough "points" to comment on it.
I read https://react-bootstrap.github.io/components/buttons/ and some other documents but am unable to find my answer.
I used this article as my guide: https://www.pluralsight.com/guides/how-to-position-react-bootstrap-popover
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
.
.
.
render() {
const popover = (
<Popover id="popover-basic">
<Popover.Title as="h3">Popover title</Popover.Title>
<Popover.Content>
Popover content <strong>some strong content</strong> Normal content again
</Popover.Content>
</Popover>
);
return (
<div className='toggle container '>
<div className='form-row justify-content-center'>
<div className='col-6'>
<section class='inline-block'>
<span class="badge badge-pill badge-primary ml-2">1</span>
<h3>
Choose System Type:
</h3>
<div id="element1">
<OverlayTrigger trigger="hover" placement="right" overlay={popover}>
<Button variant="outline-primary" circle><i class="fas fa-question"></i></Button>
</OverlayTrigger>
</div>
</section>
</div>
</div>
</div>
I'd like my popover button to be a circle, but I can't find documentation on how to do that.
Can someone explicitly help me using the ? Perhaps something else? Examples help immensely. Here is a screenshot of what it looks like now...
You can set className="rounded-circle" to your button component and it will be circle.
More about similar border classes:
Bootstrap documentation
The default value for ngbCollapse is false, as described at https://ng-bootstrap.github.io/#/components/collapse. The example given there uses the following code: https://ng-bootstrap.github.io/app/components/collapse/demos/basic/plnkr.html
<p>
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-block">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
How does one over-ride the default so that the toolbar is collapsed by default?
Noticed the same thing. Initialize the variable in a constructor and it works fine.
export class AppComponent {
isCollapsed:boolean;
constructor() {
this.isCollapsed = true;
}
Modifying this within the Typescript seems to drive away from the intent of using the module's provided properties. Instead, by utilize [ngbCollapse] you do not need add to Typescript and have more control with the advantage of ngDirectives.
<div id="collapseExample" [ngbCollapse]="!isCollapsed">
Additionally, when used within dynamically generated content (*ngFor...[ngbCollapse]=) you can take advantage of ng-if-else conditional states
*ngIf="getIsEditing(buffer); then tableEdit; else tableView;"
I have 3 Bootstrap panels that expand/collapse when their headers are clicked.
However when changing to another route id (for example for :id=CarModel1 to id=CarModel2 with /cars/details/:id as route), I want to keep their state as was in the previous id after the user messes around with the panels, so that the user can compare the different details immediately when changing views.
How can I keep the panel state? Please, keep in mind I'm using ngRoute and not ui-Router.
Sample panel:
<div id="details">
<div class="panel-heading detailsPanel">
<a data-toggle="collapse" data-parent="#details" data-target="#collapseDetailsPanel">
<h4>Additional Details</h4>
</a>
</div>
<div id="collapseDetailsPanel" class="panel-collapse collapse">
<div class="panel-body">
<div>Lorem Ipsum</div>
</div>
</div>
</div>
Managed to do it by adapting a solution found here and using sessionStorage instead of $.cookie.
$("#details").on('shown.bs.collapse', function() {
var activeDetails = $("#details .in").attr('id');
sessionStorage.setItem('activeDetailsGroup', activeDetails);
});
$("#details").on('hidden.bs.collapse', function() {
sessionStorage.setItem('activeDetailsGroup', "inactive");
});
var lastDetails = sessionStorage.getItem('activeDetailsGroup');
if (lastDetails !== "inactive") {
//remove default collapse settings
$("#details .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + lastDetails).addClass("in");
}
I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}
I'm building an HTML page that uses endless scrolling functionality to render new list elements as you scroll down, like on Facebook. I'm using the jquery.pageless plugin.
The thing is, now testing it on IE7, when I load the dynamic content, none of it is styled like it should be. The first set (20 rows), which the server generated in the html page, look fine. Then the next 20-per-page that are rendered with javascript, don't have any of the styles applied.
How do I fix this? Having a hard time testing it in IE7 from a mac. Is this a problem with IE7? Or could perhaps the elements not be being appended to the correct parent div in IE (using jQuery so I doubt this)? Or is there a common hack for reloading the stylesheets after every dynamically created html element is added?
The doctype is HTML5: <!DOCTYPE html>
Thanks for the advice!
Update:
Looking in the IE7 developer panel, the HTML is being spit out all malformed. The first time around it looks like this:
<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'>
<figure class='snapshot'><time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'><span class='value-title' title='2010-12-16T00:00:00-08:00'></span></time><span></span><img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/heavenly-cleaning-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" />
Like
</figure>
<section class='details' itemprop='seller' itemtype='http://data-vocabulary.org/Organization'>
<header class='header'>
<hgroup>
<h3 class='user fn org' itemprop='name'>
Name<span class='hyphen'>-</span><span class='distance'>Wheaton, IL</span>
</h3>
<h2 class='title'><span class='quotation-mark'>"</span>Quote<span class='quotation-mark'>"</span><time class='expiration-date dtend'><span class='value-title' title='2011-12-16T00:00:00-08:00'></span></time></h2>
</hgroup>
</header>
<p class='highlights'></p>
<p class='description' itemprop='description'></p>
<footer class='footer'>
<address class='location adr' itemprop='address' itemscope='itemscope' itemtype='http://data-vocabulary.org/Address'>
<span class='locality' itemprop='locality'></span>
<span class='geo' itemprop='geo' itemtype='http://data-vocabulary.org/Geo'>
<span class='latitude' itemprop='latitude'>
<span class='value-title' title='41.850249'></span>
</span>
<span class='longitude' itemprop='longitude'>
<span class='value-title' title='-88.0855459'></span>
</span>
</span>
<span class='tel' itemprop='tel'></span>
</address>
Category: Home
</footer>
</section>
</article>
The second time around it looks more like this:
<article class='community-page page none vevent' data-status='available' data-type='community_page' itemscope='itemscope' itemtype='http://www.data-vocabulary.org/Event'/>
<figure class='snapshot'/>
<time class='availability dtstart' datetime='2010-12-16T00:00:00-08:00' itemprop='startDate' title='2010-12-16T00:00:00-08:00'/>
<span class='value-title' title='2010-12-16T00:00:00-08:00'/>
</time/>
<a href="/users/25?page_id=25" class="fancy-ajax logo">
<span/>
<img alt="Logo for Heavenly Cleaning" class="photo" src="/images/41/name-logo-small.JPG?1297971958" title="Logo for Heavenly Cleaning" />
</a>
Like
</figure/>
...
I am returning it as a json string and appending it like this:
$(window).load(function() {
var params = paginator;
params.dataType = "string";
$('#content').pageless({
url: window.location.pathname,
params: params,
distance: 500,
totalPages: 10,
loaderImage: "/images/loaders/load.gif",
scrape: function(data) {
var data = $.parseJSON(data);
var paginator = data.paginator;
var search = data.search;
var html = data.pages // html string;
if (data.more == false) {
$.pageless.settings.totalPages = $.pageless.settings.currentPage;
if($.pageless.settings.totalPages <= $.pageless.settings.currentPage){
$.pageless.stopListener();
}
}
$.pageless.settings.params = {dataType: "string", paginator: paginator, q: search.q, c: search.c, l: search.l, a: search.a};
return html;
}
});
})
Since you're using HTML5 elements, I assume you're using HTML5Shiv or Modernizr to hack IE to support those elements?
If not then yes, you will definitely have issues, since IE6/7/8 will simply not recognise those tags as valid HTML.