html - Using *ngFor in CSS Grid Layout Undesirably Displaying Everything in One Column -


i new programming , web dev in general. in process of making personal website.

i want put boxes in grid 4 columns, similar see here: https://devpost.com/software/search?query=is%3afeatured

each of these boxes represents object, , want able display of data box, , rest of data in popup dialog when click on box.

i have playing around css grid layout, becoming popular these days (highly recommend video: https://www.youtube.com/watch?v=7kvecqqcxlk).

the thing 4 columns work when hardcode bunch of div elements inside wrapper div. however, whenever use *ngfor on wrapper containing array of data , feed in data each iteration inner div element, grid layout gets destroyed, placing 1 column.

when manually feed in data using multiple div elements (item2 here), works desired:

.wrapper {      margin-left: 1em;      margin-right: 1em;      display: grid;      grid-template-rows: auto;      grid-template-columns: repeat(4, 1fr);      grid-row-gap: 1em;      grid-column-gap: 1em;  }
<div class="wrapper">        <div class="item2" style="background-color: deepskyblue;">          <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >          <p>more text here.</p>      </div>        <div class="item2" style="background-color: deepskyblue;">          <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >          <p>more text here.</p>      </div>        <div class="item2" style="background-color: deepskyblue;">          <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >          <p>more text here.</p>      </div>        <div class="item2" style="background-color: deepskyblue;">          <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >          <p>more text here.</p>      </div>        <div class="item2" style="background-color: deepskyblue;">          <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >          <p>more text here.</p>      </div>        </div>

using *ngfor... runs length of array "stickynotes," stacks boxes below each row.

<div class="wrapper" *ngfor="let s of stickynotes; let = index" >      <div class="item2" style="background-color: deepskyblue;">          <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >          <p>more text here.</p>          <p>{{s.title}}</p>      </div>  </div>

my hack around was... have div element 4 times incrementing 1 on *ngif (i+1, i+2, etc.). problem here when new row starts, grid-row-gap in css ignored.

<div class="item2" style="background-color: deepskyblue;" *ngif="i < stickynotes.length && i%4 === 0">        <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >        <p>more text here.</p>        <p>{{stickynotes[i].title}}</p>  </div>    <div class="item2" style="background-color: deepskyblue;" *ngif="i+1 < stickynotes.length && i%4 === 0">        <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >        <p>more text here.</p>        <p>{{stickynotes[i+1].title}}</p>  </div>    <!--2 more times until i+3-->

i wondering if there way create custom iterable directive without destroying grid property , without having item2 class coded 4 times (or other methods).

i have tried bootstrap row , col attributes, 4 columns, responsiveness wasn't nice grid layout.

any or suggestion appreciated!

*ngfor repeats element add to. put on div.item2 , should work:

<div class="wrapper" >     <div class="item2" *ngfor="let s of stickynotes; let = index" style="background-color: deepskyblue;" >         <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >         <p>more text here.</p>         <p>{{s.title}}</p>    </div> </div>

the answer provided vega work too, <ng-container> not required(as long don't put structural directive on div.item2element), because asterisk syntactic sugar , expands something similar:

<div class="wrapper" >   <ng-template ngfor let-s [ngforof]="stickynotes" let-i="index">     <div class="item2" style="background-color: deepskyblue;">       <img class="img-responsive img-rounded" src="assets/logo/square_filler.png" alt="pic-test" >       <p>more text here.</p>       <p>{{s.title}}</p>     </div>   </ng-template> </div>

the reason behind limit of 1 structural directive per element given here:

someday you'll want repeat block of html when particular condition true. you'll try put both *ngfor , *ngif on same host element. angular won't let you. may apply 1 structural directive element.

the reason simplicity. structural directives can complex things host element , descendents. when 2 directives lay claim same host element, 1 takes precedence? should go first, ngif or ngfor? can ngif cancel effect of ngfor? if (and seems should so), how should angular generalize ability cancel other structural directives?

there no easy answers these questions. prohibiting multiple structural directives makes them moot. there's easy solution use case: put *ngif on container element wraps *ngfor element. 1 or both elements can ng-container don't have introduce levels of html.


Comments

Post a Comment

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

Image
i trying build cypher statement neo4j know 2-n starting nodes name , need find node (if any) can reached of starting nodes. at first tought similar "mutual friend" situation handled (start1)-[*..2]->(main)<-[*..2]-(start2) in case have more 2 starting points around 6 know name. so puzzled how can include third, fourth , on node cypher able find commmon root amongst them. in above example neo4j website need path starting 'dilshad', 'becky' , 'cesar' check if have common friend (anders) excluding 'filipa' , 'emil' not friends of three. so far create statement programmatically looks like match (start1 {name:'person1'}), (start2 {name:'person2'}), (start3 {name: 'person3'}), (main) (start1)-[*..2]->(main) , (start2)-[*..2]->(main) , (start3)-[*..2]->(main) return distinct main but wondering if there more elegant / efficient way in cypher possibly use list of names parameter ...
Read more

php - How to remove letter in front of the word laravel -

Image
based on picture above result of var_dump() , dd() of same variable ,when var_dump() , apostrophe (') symbol in black diamond of question mark , when dd() same variable , apostrophe can seen letter 'b' appear in front of words what want can me result : loreal's sdn bhd and @ same time want remove special character ( excluding these 4 symbols (-) ,(_) ,('),(,) ) simply escape special character resolve issue. mysqli_real_escape_string resolve issue. $name = mysqli_real_escape_string($request()->user); or use addslashes function() $name = addslashes($request()->user);
Read more

minify - Minimizing css files -

i want know how css files can minimized. currently, using external sites css minifier compress css files. however, after removing whitespaces, comments, etc, file sizes reduced 10-15%. how frameworks bootstrap manage make minimized versions kilobytes. as example, css is: body { background-color: #ff0; } the reduction goes 28 bytes 22 bytes other css files have lot more characters still smaller this. actually minifying code means it's remove thing code white space characters new line characters comments block delimiters it reduces amount of code has transferred on web , speed site load fastly.but unreadable format.
Read more