angular-vs-repeat icon indicating copy to clipboard operation
angular-vs-repeat copied to clipboard

bug when using float:left; in style

Open xh20s opened this issue 7 years ago • 6 comments

hi, i am trying to display result 2 in each row that would be ( width:50% and float:left )

here is an example of my issue in jsfiddle you will notice only half div is showing rest is blank.

anyone can help me with this issue?

regards,

xh20s avatar Apr 12 '18 11:04 xh20s

anyone? i am prepare to donate $20 for any help regarding this issue.

i really would like to use this project instead of others.

regards,

xh20s avatar Apr 15 '18 06:04 xh20s

Ok, I’ll take a look at it tonight and get back to you.

kamilkp avatar Apr 15 '18 06:04 kamilkp

thank you Mr Kamilkp

xh20s avatar Apr 15 '18 10:04 xh20s

In order to use vs-repeat the items need to be stacked either horizontally or vertically. This kind of layout is not supported. I presume you don't want to alter your HTML structure so the solution is to use ng-repeat-start/ng-repeat-end pattern. You'd need to calculate an array of arrays of 2 numbers (number of coulmns which is in this case 2) and render each row with using ng-repeat-start/end. Here's how to do it in your fiddle: https://jsfiddle.net/zLq1bot6/2/

kamilkp avatar Apr 15 '18 18:04 kamilkp

I.E.:

vm.pairs = vm.items.reduce((acc, item) => {
    if (!acc.length)
    	return [[item]];
    var last = acc[acc.length - 1];
    if (last.length < 2)
    	last.push(item);
    else
    	acc.push([item]);
    return acc;
}, []);
  <div ng-repeat-start="pair in ctrl.pairs" class="repeated-item">
    {{pair[0]}}
  </div>
  <div ng-repeat-end class="repeated-item">
    {{pair[1]}}
  </div>

kamilkp avatar Apr 15 '18 18:04 kamilkp

thank you mr kamilkp.

can you look at this issue? jsfiddle

screenshot of issue => http://bodyresultsblueprint.com/issue.png

  • changed js to newer version
  • changed css size

any advice?

regards,

xh20s avatar Apr 16 '18 08:04 xh20s