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.
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.
I used basic bootstrap grid system in a react application on a form. Grid is rendered dynamically through map function. I am using bootstrap 4
I want to put 'Customer Phone 4' under 'Customer Phone 1' but it wont automatically adjust because of same height option in column, so to remove that I added the class name 'align-items-start' to the row div which removed the extra space but yet it didn't adjust. (Refer sample)
Rendered code looks something like this.
<div className='row align-items-start'>
<div className='col-md-6 pb-4'>
label
<div className="row">
<div className="col-12">input</div>
<div className="col-12">input</div>
<div className="col-12">input</div>
<div className="col-12">input</div>
</div>
</div>
<div className="col-md-3 pb-4">input</div>
<div className="col-md-3 pb-4">input</div>
<div className="col-md-3 pb-4">input</div>
<div className="col-md-6 pb-4">input</div>
</div>
sample
I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:
Also note the different oder of elements in the green area.
Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)
You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.
To switch the order on mobile using a button, toggle the flex-last class...
$('#btnToggle').click(function(){
$('.col-md-3').toggleClass('flex-last');
})
EDIT: To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...
$('#btnToggle').click(function(){
$('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})
Demo
In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.
<div class="row">
<div class="col-md-3 flex-last flex-md-unordered">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Update
As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..
Bootstrap 4 uses Flexbox, which means you could utilise the order in which things are displayed.
As usual, you can specify how it's displayed on different viewports using classes like order-last and order-sm-unordered.
flexbox/order documentation
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>
The codes can be viewed at
http://www.bootply.com/LUNqVTU2nj
<div class="container">
<div class="row">
<div class="col-md-3" >
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> First </h2>
</div>
<div class="col-md-3" >
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> Second </h2>
</div>
<div class="col-md-3">
<img class="img-square" alt="140x140" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA0Njg3NSIgeT0iNzAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTBwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xNDB4MTQwPC90ZXh0PjwvZz48L3N2Zz4=" data-holder-rendered="true">
</div>
<div class="col-md-3" >
<h2> Third </h2>
</div>
</div>
</div>
As can be seen in Bootply, the third image are not rendered at the correct place..
I thought it is wrong because a row can't contain columns whose total width is larger than 12, but on Bootstrap3 official sites, I saw codes like this:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
Is this wrong? If not, why can't my codes work..
Moreover, is it possible to write all columns (for example, 30 columns) in one row and expect bootstrap to layout them correctly?
Your code is OK and a row can content more than 12 cells (a gallery for example) but your problem is that your divs has not the same height and you need to apply a "reset". To avoid this problem you need to insert a div class clearfix when you reach 12 cells.
I mean, in your example:
...
<div class="col-md-3">
<h2> Second </h2>
</div>
<div class="clearfix visible-md-block visible-lg-block">
...
Doc about Bootstrap clearfix: http://getbootstrap.com/css/#grid-responsive-resets.
Also you could add javascript to apply same height to all your cells.
.col-md-3{width: 25%;}
.col-sm-4{width: 33.3333333%}
So obviously only 4 elements could be contained in a single line, while you've placed 6. You can use class .col-xs-2 instead.
Whatever code you have seen on bootstrap site is correct, but meaning is different. In a row only 12 columns are there, i think you are telling about xs having addition (xs-12 and xs-6) but meaning is that when you make it as xs then xs-6 will go to next line as shown in screen show, so use only 12 columnss in row
It's because in the example Bootstrap code you've posted they use different classes for different viewport sizes. Also anything over 12 will just "stack up".
So for example in this particular row:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
The md viewport adds up to 12 and will stay within one row with a size of 8 and 4.
The xs viewport adds up to 18 and 2 rows will be created where they stack up, where the first row will be 12 and the second will be 6.