Do you have any idea about this div just disappearing in Edge?
<div
data-filter=".format-${format.id}" class="format cbp-filter-item btn dark btn-outline uppercase"
repeat.for="format of fm.campaignFormats.items | formatsWithDraft"
oa-sortable-item="item.bind: format"
if.bind="(format.just_created && !format.deleted_at) || (!format.deleted_at && format.total_templates)">
<span class="name">${format.name}</span>
<span class="size">${format.width} : ${format.height} [${format.unit}]</span>
<span class="placeholder">${format.name}</span>
<span class="placeholder">${format.width} : ${format.height} [${format.unit}]</span>
<i if.bind="format.loading" class="fa fa-spin fa-circle-o-notch ml-5"></i>
<div class="filter-counter">${format.total_templates}</div>
</div>
I think it's a problem with Aurelia reading data, any ideas?
The issue you encounter is because of attribute reordering in IE & Edge, which in your case will make repeat come after if, which messed up the expression evaluation result. What you can do is to wrap your content in <template/> to separate the attribute:
<template
repeat.for="format of fm.campaignFormats.items | formatsWithDraft">
<div
data-filter=".format-${format.id}"
class="format cbp-filter-item btn dark btn-outline uppercase"
oa-sortable-item="item.bind: format"
if.bind="(format.just_created && !format.deleted_at) || (!format.deleted_at && format.total_templates)">
<span class="name">${format.name}</span>
<span class="size">${format.width} : ${format.height} [${format.unit}]</span>
<span class="placeholder">${format.name}</span>
<span class="placeholder">${format.width} : ${format.height} [${format.unit}]</span>
<i if.bind="format.loading" class="fa fa-spin fa-circle-o-notch ml-5"></i>
<div class="filter-counter">${format.total_templates}</div>
</div>
</template>
Related
Goal : Only change the parent node to BLUE color and not the nested parent node(which is yellow)
We are trying to change the color of the just parent node in the mat tree and not the nested parent node. If the change the color of the parent node, it is also affecting the nested parent tree node.
Is there to identify only the top node not the nested top parent tree to affected the folder color like shown in the below diagram.
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="protocol-tree">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<div class="type-icon">
<span *ngIf="node.location === null; else file" class="folder-color">
<img src="./../../../../../assets/icons/MaterialIconFolder.svg">
</span>
<ng-template #file>
<img src="./../../../../../assets/icons/MaterialIconDraft.svg">
</ng-template>
</div>
<span class="file-text">
<div *ngIf="node.location === null; else fileText">
{{ capitalizeFirstLetter(node.name) }}
</div>
<ng-template #fileText>
<a (click)="downloadProtocolDocuments(node)">{{ node.name }}</a>
</ng-template>
</span>
</li>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<li>
<div class="mat-tree-node">
<div class="type-icon">
<span *ngIf="node.location === null; else file" class="folder-color">
<img src="./../../../../../assets/icons/MaterialIconFolder.svg">
</span>
<ng-template #file>
<img src="./../../../../../assets/icons/MaterialIconDraft.svg">
</ng-template>
</div>
<span class="file-text">
{{ capitalizeFirstLetter(node.name) }}
</span>
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{
nestedTreeControl.isExpanded(node)
? "expand_less"
: "expand_more"
}}
</mat-icon>
</button>
</div>
<ul [class.protocol-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
</div>
Help is appreciated !
I think i was able get it resolved using level property
<mat-nested-tree-node *matTreeNodeDef="let node; let l=level; when: hasChild">
https://angular-2tsce2-l7qhtt.stackblitz.io
I am currently working on a small project to create a simple social media web app and i am using Laravel. I used CK editor to make the posts in my media , but i found out that,I can use Javascript commands from the editor by going to the source code section.
How can i make it so that the commands don't run but also at the same time have a option to have bold, italic and different fonts and headers.
The following is my code for posting the posts or text;
*<div class="flex justify-center">
<div class="w-9/12 p-3 bg-stale-700 " >
#if ($posts->count())
#foreach ($posts as $post)
<div class="mb-4 p-4 bg-gray-300 rounded " >
<a href="" class="font-bold" > {{$post->user->username}} </a>
<span class=" p-3 text-sm"> {{$post->created_at->toTimeString()}} </span>
{!!$post->body!!}
</div>
#endforeach
{{ $posts->links('pagination::tailwind') }}
#else
There are no posts
#endif
<div>*
The following is the code for ckeditor:
*<form action="{{route('post')}}" method="post" >
#csrf
<textarea name="post"></textarea>
<script>
CKEDITOR.replace( 'post' );
</script>
#error('post')
<p class=" small-text red-200 "> This feild is required </p>
#enderror
<br>
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"> post </button>
</form>*
If possible, I am looking for editor like stackoverflow has,
Thank you
I have a list of posts and some of them has reactions, some not. I want to extract the number of reactions of each posts and the problem is that those who doesn't have, there is no HTML code.
I tried to debug using print.
print(len(driver.find_elements_by_xpath("//div[#class='occludable-update ember-view']")))
-----
Output: 4 - This is good, because I have 4 divs
print(len(driver.find_elements_by_xpath("//span[#class='v-align-middle social-details-social-counts__reactions-count']"))
----
Output:2 - This is good, because I have 2 posts that got reactions
When I tried to find if a posts got reactions,
print(len(driver.find_elements_by_xpath("//div[#class='occludable-update ember-view']")[1].find_elements_by_xpath("//span[#class='v-align-middle social-details-social-counts__reactions-count']")))
----
Output: 2 - Why? Because the second div is empty...
HTML CODE
<div class="occludable-update ember-view">
<ul class="social-details-social-counts ">
<li class="social-details-social-counts__reactions social-details-social-counts__item ">
<button class="social-details-social-counts__count-valuet " aria-label="1 Reaction’ post" type="button">
<img class="reactions-icon social-detail">
<span aria-hidden="true" class="v-align-middle social-details-social-counts__reactions-count">3</span>
</button>
</li></ul>
</div>
<div class="occludable-update ember-view"> this div has no reaction </div>
<div class="occludable-update ember-view"> this div has no reaction </div>
<div class="occludable-update ember-view">
<ul class="social-details-social-counts ">
<li class="social-details-social-counts__reactions social-details-social-counts__item ">
<button class="social-details-social-counts__count-valuet " aria-label="1 Reaction’ post" type="button">
<img class="reactions-icon social-detail">
<span aria-hidden="true" class="v-align-middle social-details-social-counts__reactions-count">3</span>
</button>
</li></ul>
</div>
to locate the continuation element, use .
try below :
driver.find_elements_by_xpath("//div[#class='occludable-update ember-view']")[1].find_elements_by_xpath(".//descendant::span[#class='v-align-middle social-details-social-counts__reactions-count']")
I found the problem. After better documenting myself, I found out that for sub-elements is used .// instead of //
print(len(driver.find_elements_by_xpath("//div[#class='occludable-update ember-view']")[1].find_elements_by_xpath(".//span[#class='v-align-middle social-details-social-counts__reactions-count']")))
I wonder why the icon : arrow-alt-circle-up does not display...
in the same div I display the user icon wo any problem...
arrow-alt-circle-up icon is lsited in v5 Free icons...
<h2>Test jQuery().animate()</h2>
<div class="row" style="margin-bottom: 30px;">
<div class="col-4"></div>
<div class="col-4" id="scrollTop">
<div class="align-items-center justify-content-end">
<i class="fas fa-user"></i>
<i class="fas fa-arrow-alt-circle-up"></i>To Top
</div>
</div>
</div>
UPDATE
I did some tests in jsFiddle , and I can get fas fa-arrow-up
but this does not work also inside my html code...
jsFiddle
SOLVED ... forget to add it into fontawesome.library ... I am using v5 !
import fontawesome from '#fortawesome/fontawesome'
import faArrowCircleUp from '#fortawesome/fontawesome-free-solid/faArrowAltCircleUp'
fontawesome.library.add(faArrowCircleUp)
<div class="align-items-center justify-content-end">
<div class="fa-2x">
<i class="fas fa-arrow-alt-circle-up"></i>To Top
</div>
<template name="menu">
<div class="ui grid">
<div class="two wide column"></div>
<div class="twelve wide column">
<div class="ui red menu">
<a class="{{active}} item" id="home">
<i class="home icon"></i> Péng you
</a>
<a class="item" id="message">
<i class="mail icon"></i> Message
</a>
<a class="item" id="friend">
<i class="user icon"></i> Find Friend
</a>
<div class="right red menu">
<a class="active item">
<i class="sign in icon"></i> Log In
</a>
</div>
</div>
</div>
<div class="two wide column"></div>
</div>
Template.menu.helpers({
'active': function (e, tmpt) {
var active = Session.get('activeMake');
return active
}
});
Template.menu.events({
'click #home': function (e, tmpt) {
event.preventDefault();
var activeAttribute = "active";
Session.set('activeMake', activeAttribute);
}
});
now, I can give active. but, I can't delete active when user cluck other menu.
and i think there is much better way to do this. (ex: without session or ID attribute)
please help me....
its an old question, iam having same trouble, this works but is not the perfect way. In my case i got like 5 elements so it work fast, but in other app i got like 300 buttons and works a litle slow in cordova app, specially olds tablets.
Template.yourtTemplateName.events({
'click .commonClass': function (e, t) {
$(".commonClass").each(function () {
console.log(this);
$(this).removeClass('active')
});
$(e.target).addClass('active')
},
});