I'm trying to use Dragula (with angular-dragula actually) to drag a row from one table to another. If both tables have rows there are no problems, but there are cases where the target table will be empty. How do I make the empty table allow for a drop?
Maybe the table is too small? Try changing min-height.
Insert a placeholder row when there is nothing in the table
http://plnkr.co/edit/0TBXXZOBAKnGxHig3xzD?p=preview
I solved it by using the power of angular2. If the array (models) is empty I add a div as the dragula container, else I display that container holding the array. where class drop bag has "min-height:50px";
<div *ngIf="models.length > 0">
<div
*ngFor="let model of models"
[dragula]='"third-bag"'
[dragulaModel]='models'
class="dropbag">
<div class="col-xs-12 center-content">
<img [src]="model.imageThumb" alt="NA">
</div>
</div>
</div>
<div *ngIf="models.length <= 0">
<div
[dragula]='"third-bag"'
[dragulaModel]='models'
class="dropbag">
<div class="col-xs-12 center-content">
<img src="" alt="No Content">
</div>
</div>
</div>
Related
I'm trying to create a table using divs and I want them to be sortable (alphabetically).
Here's a snippet of two rows:
<div grid-row="" grid-pad="1.5" grid-gutter="3" grid-responsive="">
<div grid-col="1" grid-pad="1.5">*image*</div>
<div grid-col="4" grid-pad="1.5">A-title</div>
<div grid-col="4" grid-pad="1.5">B-author</div>
<div grid-col="3" grid-pad="1.5">C-tag</div>
</div>
<div grid-row="" grid-pad="1.5" grid-gutter="3" grid-responsive="">
<div grid-col="1" grid-pad="1.5">*image*</div>
<div grid-col="4" grid-pad="1.5">D-title</div>
<div grid-col="4" grid-pad="1.5">E-author</div>
<div grid-col="3" grid-pad="1.5">F-tag</div>
</div>
Using divs makes the table responsive and neatly integrated with the Cargo site - I tried out using <td> elements, but I did not get the responsive result i wished for.
Is there a way to code this using these kind of divs? The most important cell to have sortable is the ones with the "title" in them. Should there be something telling which columns to be sorted too?
The site is running on the Cargo Collective platform using jQuery 2.1.3.
In our current frontend we want to add accessibility improvements. The current challenge is to make the list of items including additional actions more accessible. Our document structure is based on the following idea:
<div class="products-list" role="list">
<div class="product" role="listitem">
<div class="product-name">Product A</div>
<div class="product-actions>
<div class="action-icon" role="button">First</div>
<div class="action-icon" role="button">Second</div>
</div>
</div>
</div>
At the moment it's possible to select the list-items, however the a11y border highlights the entire list item (div.product). Hence it's not possible to focus the buttons. Defining a sublist using list/listitem roles for div.product-actions was not of benefit. Do you have any ideas how to achive this?
I have a row that is auto populated with data from an api. Each result from the api is stored in a div which is created with js as well and then a class is appended to it.
I then have a filter connected to a search box that filters through the results and shows the relevant data. The divs that do not have the search query are assigned a new class "hide" which hides them. Whenever a search is performed, I want to search through the populated row and find out how many divs have the class of "hide" but I can't seem to wrap my head around a working solution yet.
Here's what the code structure looks like
<div class="row">
<div class="data"></div>
<div class="data"></div>
<div class="data"></div>
<div class="data hide"></div> <!-- this is what itll look like for hidden divs -->
<div class="data hide"></div>
</div>
Can I use childelementcount in addition to classlist.contains() in order to solve this? Or what's a walkaround?
One approach to tackle this is to make use of querySelectorAll():
var list = document.getElementById('list');
var count = list.querySelectorAll('.data.hide').length;
console.log(count);
Please note that I added an id to the row element so that I could access it easier:
<div id="list" class="row">
<div class="data"></div>
<div class="data"></div>
<div class="data"></div>
<div class="data hide"></div>
<div class="data hide"></div>
</div>
Here's a live demo for your quick reference.
I wonder if there's a way to render responsively elements created by *ngFor in Angular 2?
I use Bootstrap 4 grid system based on flex property. And I've got this code in my Angular2 app:
<div class="outlet container">
<div class="row itemsBlock">
<div *ngFor="let item of items" class="itemRender">
<img class="itemImage" src="{{item.image}}" />
<span class=itemitle">{{item.title}}</span>
</div>
</div>
What I want is to get my items rendered responsively, say
3 divs in the row on large and middle-sized displays
2 divs in the row on small ones
1 div in the row on x-small displays
You can't really relate that stuff with looping over items collection. You could take use xl, lg,md & sm class with col-size-number(like col-xs-12) class on same row. Bootstrap will take care about to applying a class over element based on screen resolution.
Markup
<div class="row itemsBlock">
<div *ngFor="let item of items" class="col-md-4 col-sm-6 col-12">
<img class="itemImage" src="{{item.image}}" />
<span class=itemitle">{{item.title}}</span>
</div>
</div>
Note: The Bootstrap v4 grid system has five tiers of classes: xs
(extra small), sm (small), md (medium), lg (large), and xl (extra
large). You can use nearly any combination of these classes to create
more dynamic and flexible layouts.
I have the following items laid out in static blocks:
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-1 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-2 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-3 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-4 current-slider"></div>
</div>
Along with a thumbnail navigation block below:
<div class="image-compare-nav owl-carousel owl-theme">
<div class="owl-wrapper">
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
</div>
</div>
At the moment, all of the main twentytwenty blocks appear underneath each other, but what I want to happen is that only the first one is displayed, and whena thumbnail is clicked, the relating slider div, is shown in it's place.
It's important that as each thumbnail is clicked, the slider changes from the old one, to the new one.
So far I've got this http://jsfiddle.net/96rq4vet/2/ but, when the thumbnails are clicked, the new div isn't showing up, they're staying hidden.
What am I doing wrong?
UPDATE
I'm getting closer with this fiddle: http://jsfiddle.net/96rq4vet/3/ however, I can't get only the first main div to show at first. I tried adding style:display:none; to the second-fourth one, but that doesn't make them show when the thumbnails are clicked.
Any ideas?
Rather than using classes you could use data attributes. You can then grab the data attribute of the thumb that is clicked in order to associate it with the data attribute of the image you want to display.
Something like this:
<div class="twentytwenty-container" data-image-num="1">
<img />
</div>
<div class="imageSet" data-image-num="1">
<img />
</div>
$('.imageSet').click(function() {
var imageNum = $(this).attr('data-image-num');
$('.twentytwenty-container[data-image-num="' + imageNum + '"]').show();
});
JSFiddle