i have use ng repeat to show images and i want them to be in inline formate with rest of all other things i have use in div item.
problem is that what ever i do its not showing in inline.
Item have display block property.
here is the simple and finale html file.
<!doctype html>
<html ng-app="countryApp">
<head>
<script
src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular.min.js">
</script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('countries.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body>
<div ng-controller="CountryCtrl" >
<div class="item">
<div ng-repeat="country in countries" class="w3l-movie-gride-agile w3l-movie-gride-agile1 owl-item">
<a href="single.php?myNumber={{country.vid}}" class="hvr-shutter-out-horizontal"><img ng-src="thumbnail/{{country.flagURL}}" title="album-name" class="img-responsive" alt=" ">
<div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</a>
<div class="mid-1 agileits_w3layouts_mid_1_home">
<div class="w3l-movie-text">
<h6>Citizen Soldier</h6>
</div>
<div class="mid-2 agile_mid_2_home">
<p>2016</p>
<div class="block-stars">
<ul class="w3l-ratings">
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star-half-o" aria-hidden="true"></i></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="ribben">
<p>NEW</p>
</div>
</div>
</div>
</div>
The element you put ng-repeat on is also repeatet. So each iteration is wrapped in a regular <div>. So unless you have some global styling that applies to all <div> elements, it wouldn't inline.
To fix it you basically just have to move the ng-repeat-directive a level down. Like this:
<div class="item">
<div ng-repeat="country in countries"
class="w3l-movie-gride-agile w3l-movie-gride-agile1">
// ... rest of content
</div>
</div>
I reckon that should do it.
Related
I hope you are doing well, I am using django, problem is I have a list of items that contains a menuToggle my code is like this
<!--here is code .... -->
<div class="container">
{% ifequal request.user.username obj.author.user.username %}
<div class="action1">
<div class="icon" onclick="menuToggle1();">
<img src="{% static 'images/ore.svg'%}" class="svg">
</div>
<div class="menupost" id="menupost">
<ul>
<li><i class="fa fa-refresh" aria-hidden="true" style="margin-right:10px;"></i>Update</li>
<li><i class="fa fa-trash-o" aria-hidden="true" style="margin-right:10px;"></i>Delete</li>
</ul>
</div>
</div>
<h2 id="title" class="title">{{obj.title}}</h2>
<!--and so on...-->
</div>
<script>
function menuToggle1(){
document.querySelectorAll('.menupost').forEach(function(element) {
element.classList.toggle('active');
});
};
</script>
so when I click on one of them , I see all the menu of all items.
so I don't want to see all menutoggle when I click on just one of them.
You are currently just toggling the active class on all .menupost elements. Instead you need to remove the active class from all of them, and then only add it to the sibling of the clicked element.
This is a little trickier, but one way to do it is to check if the event.target is inside the same parent element as the currently iterated .menupost element. Here using closest() to retrieve the closest common ancestor. You also need to pass the event to the callback in your onclick declaration.
function menuToggle1(event) {
const active_ancestor = event.target.closest('.action1');
document.querySelectorAll('.menupost').forEach(function (element) {
element.classList.remove('active');
if (active_ancestor === element.closest('.action1')) {
element.classList.add('active');
}
});
}
.active {
background-color: tomato;
}
<div class="container">
<div class="action1">
<div class="icon" onclick="menuToggle1(event);">
<img src="{% static 'images/ore.svg'%}" class="svg">
</div>
<div class="menupost" id="menupost">
<ul>
<li><i class="fa fa-refresh" aria-hidden="true" style="margin-right:10px;"></i>Update
</li>
<li><i class="fa fa-trash-o" aria-hidden="true" style="margin-right:10px;"></i>Delete
</li>
</ul>
</div>
</div>
<h2 id="title" class="title">{{obj.title}}</h2>
</div>
<div class="container"> <div class="action1"> <div class="icon" onclick="menuToggle1(event);"> <img src="{% static 'images/ore.svg'%}" class="svg"> </div> <div class="menupost" id="menupost"> <ul> <li><i class="fa fa-refresh" aria-hidden="true" style="margin-right:10px;"></i>Update</li> <li><i class="fa fa-trash-o" aria-hidden="true" style="margin-right:10px;"></i>Delete</li> </ul> </div> </div> <h2 id="title" class="title">{{obj.title}}</h2></div><div class="container"> <div class="action1"> <div class="icon" onclick="menuToggle1(event);"> <img src="{% static 'images/ore.svg'%}" class="svg"> </div> <div class="menupost" id="menupost"> <ul> <li><i class="fa fa-refresh" aria-hidden="true" style="margin-right:10px;"></i>Update</li> <li><i class="fa fa-trash-o" aria-hidden="true" style="margin-right:10px;"></i>Delete</li> </ul> </div> </div> <h2 id="title" class="title">{{obj.title}}</h2></div>
In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input
We have a customised component from MDB (http://mdbootstrap.com), which requires the definition of template reference variables.
We are creating a listing that utilises a Card Component (https://mdbootstrap.com/angular/components/flipping-cards/). We define the basic template for one card, and then use *ngFor to loop through the data and create a card of the same template for each entry in our data.
The card component uses the following structure:
<mdb-card-rotating #cards>
<!-- Card's structure comes in here -->
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
</mdb-card-rotating>
This component uses the template reference variable #cards to run the function toggle(), which rotates the card to display additional content.
However, this reference variable needs to be unique for each card; in our current set-up, the *ngFor loop ends up creating the same reference variable #card for all our generated cards, and then, when the triggering button is pressed from any of the cards, all cards end up rotating instead of just that specific card.
Here's the entire structure:
<div class="mb-5 pb-4 col-sm-12 col-xs-12 col-md-12 col-lg-4" *ngFor="let el of fetchedResults; let i = index">
<div class="col-md-12">
<mdb-card-rotating #cards>
<!--Front Side-->
<div class="face front tp-box_side tp-box_front">
<!-- Image-->
<div class="card-up">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
</div>
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
</div>
<!--Content-->
<div class="card-body">
<h4>{{ el.first_name }} {{ el.last_name }}</h4>
<p>{{ el.profession }}</p>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-repeat"></i> Click here to
rotate</a>
</div>
</div>
<!--/.Front Side-->
<!--Back Side-->
<div class="back tp-box_side tp-box_back">
<!--Content-->
<h4>About me</h4>
<hr>
<p>{{ el.about }}</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item">
<a class="icons-sm fb-ic">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm tw-ic">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm gplus-ic">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm li-ic">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
<i class="fa fa-undo"></i> Click here to rotate back</a>
</div>
<!--/.Back Side-->
</mdb-card-rotating>
</div>
</div>
Any assistance/guidance or alternatives would be highly appreciated!
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.
https://codepen.io/rangka_kacang/pen/zWbOWo
HTML:
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<div class="uk-container">
<div uk-grid>
<div class="uk-width-1-6">
<nav uk-navbar>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="">
<img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
Dashboard
</a>
</div>
</nav>
</div>
<div class="uk-width-expand">
<nav uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item" href="">
<i class="fas fa-bars fa-2x"></i>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a>
<div class="uk-text-center">
<i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
<div class="uk-navbar-subtitle">Account</div>
</div>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-padding-medium">
<div class="uk-container">
<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li id="name">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
</div>
</li>
<li id="email">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
</div>
</li>
<li id="address">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
</div>
</li>
</ul>
</div
</div
JS:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
Thanks!
If you modify:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
To be:
UIkit.util.on('#sortable', 'moved', function (item) {
console.log(item.detail[1].id)
UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});
It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.
Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.
For reference, you can see the data captured when moving elements via developer console here:
https://getuikit.com/assets/uikit/tests/sortable.html