Align using Twitter Bootstrap and KnockoutJS

Question

How can I align the checkbox list like this:

My current code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
</head>

<body>
<h2>sample calendar</h2>

<div class="container-fluid"> <!-- this is to make it responsive to your screen width-->
     <div class="row" style="font-size: 12px;background-color: white; border:inset 1px black;padding-left: 21px;margin-top:8px;">
        <div data-bind="template: { name: 'month_template_every', foreach: cal_week }"></div>
    </div>
</div>

<script id="month_template_every" type="text/html">
        <div class="row">
            <input type="checkbox" name="cal_month" style="outline: 0" data-bind="attr: { id: 'check_month_' + ($index()+1), value:$data }" />
                <label class="notbold label-style" data-bind="text: $data.charAt(0).toUpperCase() + $data.slice(1) ,attr: { for: 'check_month_' + ($index()+1)}"></label>
        </div>
</script>

<script type="text/javascript">
      function MyViewModel() {

          szWeekArray = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st", "32nd", "33rd", "34th", "35th", "36th", "37th", "38th", "39th", "40th", "41st", "42nd", "43rd", "44th", "45th", "46th", "47th", "48th", "49th", "50th", "51st"];

          this.cal_week = ko.observableArray(szWeekArray);
      }
      ko.applyBindings(new MyViewModel());
</script>

</body>
</html>

I guess you have to mix both coding logic and CSS. As in the screen the first 17item comes in first Column, say
and in the second column, you have to insert further set of check boxes and so on . — Kiran Krishnan, Feb 29 '16 at 06:12

score 0 · Answer 1 · edited May 23 '17 at 12:07

You should choose your preferred method of splitting your array in chunks and adjust your view and view model accordingly.

First, your view model should be changed along these lines:

function MyViewModel() {
  var self = this;
  var szWeekArray = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st", "32nd", "33rd", "34th", "35th", "36th", "37th", "38th", "39th", "40th", "41st", "42nd", "43rd", "44th", "45th", "46th", "47th", "48th", "49th", "50th", "51st"];
  self.cal_week = ko.observableArray(szWeekArray);
  self.cal_week_chunks = ko.computed(function() {
    // Pseudo-code, choose your chunkify method from linked question
    return self.cal_week().chunkify(17);
  });
}

And then bind to the new cal_week_chunks computed observable to wrap things:

<div class="column" data-bind="foreach: cal_week_chunks">
  <div data-bind="template: { name: 'month_template_every', foreach: $data }"></div>
</div>

And style your .column to your wishes (e.g. with inline-block).

Align using Twitter Bootstrap and KnockoutJS

1 Answers1