-2

I'm trying to figure it out how to make a loop of every 3 bootstrap cards. i have here a details in modal, but my details where shown just going to the bottom of every card. can you help me how to make it every 3 cards. i'm just trying to make it short to scroll down. My sample below is the image where the result of my code.

  [![<script>    
       var DeptHandle = new Array();
        var OnProcess = new Array();

        for (i = 0; i < table.length; i++) {
            DeptHandle.push(table\[i\].DeptHandle);
            OnProcess.push({
                "OnProcessCode": table\[i\].OnProcessCode,
                "OnProcessName": table\[i\].OnProcessName,
                "Amount": table\[i\].Amount,
                "Remarks": table\[i\].Remarks,
                "DeptHandle": table\[i\].DeptHandle,
                "ClassDeptHandle": table\[i\].ClassDeptHandle,
            });
        }
        DeptHandle.filter((item, pos) => {
            return DeptHandle.indexOf(item) == pos;
        }).forEach(function (name, key) {
            html += '<div class="container">';
            html += '<div class="card mb-3 shadow" style="padding:10px;"><div class="card-header">';


            html += '<h4 class="mb-3"><strong><u>' + name + '</u></strong></h4></div>';
            html += '<div class="card-body">';
            html += '<div id="' + name +'"';
            for (let i in OnProcess) {
                if (OnProcess\[i\].DeptHandle === name) {


                        html += '<input type="hidden"  name="OnProcessItem" id="OnProcessItem"  value="' + OnProcess\[i\].OnProcessCode + '" class=" form-control ">';
                        html += 'Amount: <input type="text"   readonly="true" name="Amount" id="Amount" value="' + OnProcess\[i\].Amount + '" class="AllField form-control '+table\[i\].ClassDeptHandle+ '">';
                        html += '</div>';
                        html += '<div class="col">';
                        html += 'Remarks: <input type="text"  readonly="true" name="Remarks" id="Remarks" value="' + OnProcess\[i\].Remarks + '" class="AllField form-control '+table\[i\].ClassDeptHandle+ '">';
                        html += '</div>';
                        html += '</div>';
                        }
                        }


            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';

        });

</script>

enter image description here

I want to make it this, please see image below.

enter image description here

codeSeven
  • 479
  • 5
  • 23
  • Could you please explain a little bit more about what you want to do exactly? I don't understand what you're asking tbh – Fred Mar 04 '20 at 11:19

1 Answers1

1

You basically need the modulus operator:

if (i % 3 === 0 || i + 1 === 1){ // zero-based index
    // open new row
}

// start new card

if (i % 3 === 0 || i === arr.length){
    // close row
}

Now, the above example is a quick way of how to go around this problem. Since I wanted to avoid going into detail with this I'd like to offer a different approach. CSS only => Bootstrap 4 card deck

Simply fill a single container with all your cards, and let the column layout be defined in CSS. Much easier and also responsive. CSS example: Arrange multiple divs in CSS/JS?
Bootstrap doc: https://getbootstrap.com/docs/4.3/components/card/#card-decks

DEMO

Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39