I am looping thru items with ng-repeat. Here is the code:
<div class="row"
<div class="w3-card-3 col-xs-18 col-sm-6 col-md-3" ng-repeat="p in products">
<div class="thumbnail">
<img ng-src="{{p.img}}" alt="...">
<div class="caption">
<h4 class="text-danger">{{p.brand}}</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
<a href="car/{{ p.id }}" class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i>
</a> Info
Bid
</div>
</div>
</div>
My problem is that when the repeater enters a new line the cards generated gets messed up. Here's an image of the problem:
What's wrong with my code? Why won't the cards align underneath each other. Tell me if there is anything else you want to see.
use height of image and description wrapper it should solve the problem
Try to add style="float: left" in the div below:
<div class="thumbnail" style="float: left">
Related
I dont know what's wrong with my code and I dont see any errors in console. My div panels are not working properly. I am having ng-click and when I click I am showing a div. Also arrow symbol on top right corner does not work.
Is there anything I am missing
Html
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowDefinition()" aria-expanded="true" aria-controls="collapseOne">Definition</a> </h4>
</div>
<div id="collapseOne" ng-show="IsDefinitionVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" style="cursor:pointer" ng-click="ShowValues()" aria-expanded="false" aria-controls="collapseTwo"> What We Do? </a> </h4>
</div>
<div id="collapseTwo" ng-show="IsValuesVisible" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" style="cursor:pointer" ng-click="ShowPrinciples()" aria-expanded="false" aria-controls="collapseThree"> Where We Do It? </a> </h4>
</div>
<div id="collapseThree" ng-show="IsPrinciplesVisible" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
</div>
Angular Controller
(function () {
var app = angular.module('myApp');
app.controller('aboutController', ['$scope',
function ($scope) {
$scope.TestAbout = "Test";
$scope.ShowDefinition = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsDefinitionVisible = $scope.IsDefinitionVisible ? false : true;
}
$scope.ShowValues = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsValuesVisible = $scope.IsValuesVisible ? false : true;
}
$scope.ShowPrinciples = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsPrinciplesVisible = $scope.IsPrinciplesVisible ? false : true;
}
console.log($scope.TestAbout);
}
]);
})();
Here you go, working code:
Html:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne"><i ng-if="!IsDefinitionVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsDefinitionVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowDefinition()" aria-expanded="true" aria-controls="collapseOne">Definition</a> </h4>
</div>
<div id="collapseOne" ng-show="IsDefinitionVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo"><i ng-if="!IsValuesVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsValuesVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowValues()" aria-expanded="true" aria-controls="collapseTwo">What We Do?</a> </h4>
</div>
<div id="collapseTwo" ng-show="IsValuesVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree"><i ng-if="!IsPrinciplesVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsPrinciplesVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse" style="cursor:pointer" ng-click="ShowPrinciples()" aria-expanded="true" aria-controls="collapseThree">Where We Do It?</a> </h4>
</div>
<div id="collapseThree" ng-show="IsPrinciplesVisible" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
</div>
Plunker : http://plnkr.co/edit/CsMKy6ctHAgXg9O4gkob?p=preview
I also added bootstrap arrows.
I'm trying make a page with accordion using UI-Bootstrap.
I found this example that is fine for me. So I copied the code in my project but it doesn't works, obviously...
I made this snippet in plunker for a faster debug.
In any case this is the main code:
<div class="container">
<div class="row">
<div class="col-md-8" id="main">
<h3>Doesn't it look better ?</h3>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why is it better
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>The titles are block, so you don't have to click the text part to activate it</li>
<li>Indicators for expand / collapsing items</li>
<li>Removed title links' obnoxious :hover underlinings, and outlines.</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can you tell me why it doesn't work?
Thank you
You are missing jquery.js and bootstrap.js in the plunker. I added the following lines to make it work:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
Also, notice your accordion component is not a ui-bootstrap accordion.
See updated plunker
replace data-toggle with ng-click and in collapse div add attribute collapse="!collapseOne"
for example
<a role="button" ng-click="collapseOne = !collapseOne" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div id="collapseTwo" collapse="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
First off, you need to decide whether or not you want to go the Angular route or the jQuery route. Don't use both in this case. The Angular route has you using the Angular UI Bootstrap library and ONLY the Bootstrap CSS file. The jQuery route has you using jQuery (obviously), the Bootstrap JS library, and the Bootstrap CSS.
Don't mix the two. If you find that you are, you're doing it wrong. Here is your accordion demo.
I'm implementing a content tabbed section using Bootstrap 3 and it works fine for almost all resolutions except mobile. For some reason only on mobile devices the default active tab is the last one called "All", but the content it displays comes from the first tab ("Popular").
It works perfect on bigger resolutions like iPad or desktop. In this case the default active tab is the first one called "Popular" and the displayed content is correct.
Could you please help me to figure it out what is the problem?
<section class="solution-tabs section-tabs">
<div class="container no-padding">
<ul class="nav nav-tabs" role="tablist">
<li class="col-sm-3 active">Popular</li>
<li class="col-sm-3">Industries</li>
<li class="col-sm-3">Topics</li>
<li class="col-sm-3">All</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="tabPopular">
<div class="container">
<div class="row">
Popular tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, est quae quo magnam deserunt facere!
</div>
</div>
</div>
<div class="tab-pane fade" id="tabIndustries">
<div class="container">
<div class="row">
Industries tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, corporis obcaecati eos vero aliquam sit?
</div>
</div>
</div>
<div class="tab-pane fade" id="tabTopics">
<div class="container">
Topics tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus ratione iusto officiis sint quaerat totam.
</div>
</div>
<div class="tab-pane fade" id="tabAll">
<div class="container">
<div class="row">
All tab content<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, fugit fuga doloremque minima ducimus ratione.
</div>
</div>
</div>
</div>
</section>
I am implementing 3 different modals in the same view,
but only the one that's placed last could be activated.. my code:
<div ui-content-for="modals">
<div class="modal" ui-if="blockPersonModal" ui-state='blockPersonModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="blockPersonModal">×</button>
<h4 class="modal-title">Block</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="blockPersonModal" class="btn btn-default">Close</button>
<button ui-turn-off="blockPersonModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div ui-content-for="modals">
<div class="modal" ui-if="RequestIdentificationModal" ui-state='RequestIdentificationModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="RequestIdentificationModal">×</button>
<h4 class="modal-title">Request Identification</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="RequestIdentificationModal" class="btn btn-default">Close</button>
<button ui-turn-off="RequestIdentificationModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div ui-content-for="modals">
<div class="modal" ui-if="ReportModal" ui-state='ReportModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="ReportModal">×</button>
<h4 class="modal-title">Report</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.</p>
</div>
<div class="modal-footer">
<button ui-turn-off="ReportModal" class="btn btn-default">Close</button>
<button ui-turn-off="ReportModal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
if I am changing the order of the modals in my code, still only the last one will show up.
how can I define three different modals in the new angularjs mobile ui?
unfourtanatley, the docs lacks clear information about how to do such a thing.
thanks,
Yonatan.
Found the problem.
The correct way to write multiple modals:
<div ui-content-for="modals">
<div class="modal">....</div>
<div class="modal">....</div>
<div class="modal">....</div>
</div>
Instead of:
<div ui-content-for="modals">
<div class="modal">....</div>
</div>
<div ui-content-for="modals">
<div class="modal">....</div>
</div>
<div ui-content-for="modals">
<div class="modal">....</div>
</div>
I'm using Bootstrap 3 to design my website. In a large window my button appears fine within its gray box and border. However, when I resize the window to check responsiveness, the button ends up being outside the boundaries of the container.
Here's my code:
<div class="col-md-4 col-sm-12 col-xs-12 gray-box top-space">
<h3><?php echo __("Test");?></h3>
<p><?php echo __("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in est nec mauris dapibus porta sit amet sit amet diam. Cras sit amet imperdiet elit. Nunc vehicula consectetur augue a pretium.");?></p>
<a href="/pricing/" class="btn-primary pull-right" ><?php echo __("Test");?></a>
</div>
And here's the css for the gray-box.
.gray-box {
background-color: #F5F4F4;
border: 1px solid #D3D3D3;
border-radius: 10px;
padding: 10px;
}
Anyone know what I'm doing wrong or what needs to be done? Thanks!
You just forgot to add the btn class to your button. Buttons always require the btn class in addition to the btn-default (or -primary, etc.). The btn class styles the element to look like the button and the btn-* classes apply the appropriate color and hover styles.
Two solutions off the top of my head.
1) Throw a .clearfix in after your pull-right to reset it:
<div class="btn btn-primary pull-right">Button</div>
<div class="clearfix"></div>
2) Put the button in its own div:
<div >
Button
</div>
Also, no need to classify col-xs-12 and col-sm-12 and col-md-4 — the default is col-xs-12 until it hits something else, so you can just do col-md-4 for the same result.