Answers.Body: <p>Thank you, Jeremy, for helping out! I really appreciate it. I solved the issue today using the "Super Table"-plugin (matrix within a matrix).</p>
  
  <pre><code>{% extends "layout.html" %}
  
  {% block calendar %}
  
  {% for row in entry.eventCalendar.all() %}
  
  &lt;div class="row no-gutters"&gt;
  
  {% for block in row.months.all() %}
  
    &lt;div class="col-12"&gt;
     &lt;div class="calendar-bar d-flex justify-content-between justify-content-md-center"&gt;
        &lt;p class="d-flex align-self-center agenda-item left w-25"&gt;{{ block.month }}&lt;/p&gt;
        &lt;p class="d-flex align-self-center agenda-item right"&gt;{{ block.year }}&lt;/p&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  {% endfor %}
  
  &lt;/div&gt; &lt;!-- End row --&gt;
  
  &lt;div class="row no-gutters"&gt;
  
  {% for block in row.eventInfo.all() %}
  
       &lt;div class="col-md-4 pt-1 pb-1 pb-md-0 pr-md-1"&gt;
        &lt;div class="box-calendar black text-white"&gt;
          &lt;div class="row no-gutters p-3"&gt;
  
            &lt;div class="col-2 pl-lg-1 pt-1"&gt;
              &lt;h5&gt;{{ block.eventDate }}&lt;/h5&gt;
            &lt;/div&gt;
  
            &lt;div class="col-10 pt-1 pr-2"&gt;
              &lt;h5&gt;{{ block.eventTitle }}&lt;/h5&gt;
              &lt;ul class="pt-1 mt-1 calendar-brood"&gt;
                &lt;li class="uppercase"&gt;{{ block.eventType }}&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class="pt-3 mt-1 calendar-brood"&gt;
                &lt;li&gt;{{ block.eventTime }}&lt;/li&gt;
                &lt;li&gt;{{ block.eventLocation }}&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="pt-3 mt-1 pb-3 calendar-brood"&gt;{{ block.eventDescription }}&lt;/div&gt;
            &lt;/div&gt;
  
        &lt;/div&gt; 
      &lt;/div&gt; 
    &lt;/div&gt;
  {% endfor %}
  
  &lt;/div&gt; &lt;!-- End row --&gt;
  
  {% endfor %}
  
  &lt;/div&gt; &lt;!-- End Calendar --&gt;
  
  {% endblock %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-30T20:59:31.433Z
Answers.Text: This question seems to be related more to your frontend framework not Craft.
Answers.UserDisplayName: Jeremy Gimbel
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-30T07:53:50.190Z
Answers.LastActivityDate: 2019-10-31T18:50:34.720Z
Answers.LastEditDate: 2019-10-31T18:50:34.720Z
Answers.UserDisplayName: Mars
Answers.Body: <p>I'm not entirely clear what your Matrix blocks/fields are setup like, so it's a little hard to tell what's going on here.</p>
  
  <p>But I'm going to take a stab at it.</p>
  
  <p>Your outer loop is looping through all the blocks in the <code>calendarGroup</code> Matrix field.</p>
  
  <p>Then you're using a switch to determine which piece of code to execute based on which one of the two block types each block is.</p>
  
  <p>All that looks ok.</p>
  
  <p>But here is <em>I think</em> where your problem lies:</p>
  
  <pre><code>{% for entries in entry.calendarGroup.type('events') %}
  
  
  {% endfor %}
  </code></pre>
  
  <p>This loop is starting fresh and looping over all the Matrix blocks in the <code>calendarGroup</code> Matrix field, except this time it's <em>only</em> getting the blocks of the <em>event</em> block type.</p>
  
  <p>Then, inside that loop you are using the <code>{{ block.fieldName }}</code> variables again. But <code>block</code> is set in your parent loop. And nowhere are you referencing <code>entries</code> from your inner loop.</p>
  
  <p>So there is a mismatch in your logic. I think you can simply do away with the inner loop, it's it's going to out put all of the <code>event</code> blocks inside each <code>event</code> block in the outer loop.  That, to me, seems like the issue.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-30T01:59:48.370Z
Answers.LastActivityDate: 2019-10-30T01:59:48.370Z
Answers.UserDisplayName: Jeremy Gimbel
Body: <p>First let me say this: I'm new to Craft and Twig. So: my apologies for probably overlooking the obvious. I hope you can offer me some help... I've been trying for a couple of days to solve this puzzle. Nothing seems to work. ;-S</p>
  
  <p>I'm trying to create a simple events calendar using Craft 3, Twig and Bootstrap 4. The calendar exist of two parts: 1. a section with 3 columns (col-4) that lists the events; and 2. a divider (col-12) that contains the month and year. I used the Matrix field in Craft to be able to be flexible in sorting events within a certain period of time. </p>
  
  <p>The Issue:
  I expected to see the three columns to neatly sit beside each other horizontally (on the desktop version of the site). But this doesn't seem to work right now: because I use a for loop to enable switch, the for loop I need for outputting the event-items results in the same row of events being repeated a couple of times instead of just once. </p>
  
  <p>What am I doing wrong? </p>
  
  <p>I very much appreciate any thoughts. </p>
  
  <p>Greetings from The Netherlands, sorry for my bad English,</p>
  
  <p>Mars</p>
  
  <pre><code>{% block calendar %}
  
      {% for block in entry.calendarGroup.all() %}
  
          {% switch block.type %}
  
              {% case "events" %}
  
                  &lt;div class="row no-gutters"&gt;
  
                      {% for entries in entry.calendarGroup.type('events') %}
  
                          &lt;div class="col-md-4 pt-1 pb-1 pb-md-0 pr-md-1"&gt;
                              &lt;div class="box-calendar black text-white"&gt;
                                  &lt;div class="row no-gutters p-3"&gt;
                                      &lt;div class="col-2 pl-lg-1 pt-1"&gt;
                                          &lt;h5&gt;{{ block.eventDate }}&lt;/h5&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="col-10 pt-1 pr-2"&gt;
                                          &lt;h5&gt;{{ block.eventTitle }}&lt;/h5&gt;
                                          &lt;ul class="pt-1 mt-1 calendar-brood"&gt;
                                              &lt;li class="uppercase"&gt;{{ block.eventType }}&lt;/li&gt;
                                          &lt;/ul&gt;
  
                                          &lt;ul class="pt-3 mt-1 calendar-brood"&gt;
                                              &lt;li&gt;{{ block.eventTime }}&lt;/li&gt;
                                              &lt;li&gt;{{ block.eventLocation }}&lt;/li&gt;
                                          &lt;/ul&gt;
                                          &lt;div class="pt-3 mt-1 pb-3 calendar-brood"&gt;{{ block.eventDescription }}&lt;/div&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt; 
                              &lt;/div&gt; 
                          &lt;/div&gt;
  
                      {% endfor %}
  
                  &lt;/div&gt;
  
              {% case "months" %}
  
                  &lt;div class="row no-gutters"&gt;
  
                      &lt;div class="col-12"&gt;
                          &lt;div class="calendar-bar d-flex justify-content-between justify-content-md-center"&gt;
                              &lt;p class="d-flex align-self-center agenda-item left w-25"&gt;{{ block.month }}&lt;/p&gt;
                              &lt;p class="d-flex align-self-center agenda-item right"&gt;{{ block.year }}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt; &lt;!-- End row --&gt;
  
              {% endswitch %}
          {% endfor %}
  
      &lt;/div&gt;
  
  {% endblock %}
  </code></pre>
  
Tags: <templating><craft3><matrix><bootstrap-craft>
Title: Matrix loop (nesting?) issue using switch
ThreadText: # Matrix loop (nesting?) issue using switch
  
  (Asked by: username_0 on 2019-10-29)
  
  First let me say this: I'm new to Craft and Twig. So: my apologies for probably overlooking the obvious. I hope you can offer me some help... I've been trying for a couple of days to solve this puzzle. Nothing seems to work. ;-S
  
  I'm trying to create a simple events calendar using Craft 3, Twig and Bootstrap 4. The calendar exist of two parts: 1. a section with 3 columns (col-4) that lists the events; and 2. a divider (col-12) that contains the month and year. I used the Matrix field in Craft to be able to be flexible in sorting events within a certain period of time.
  
  The Issue:
  I expected to see the three columns to neatly sit beside each other horizontally (on the desktop version of the site). But this doesn't seem to work right now: because I use a for loop to enable switch, the for loop I need for outputting the event-items results in the same row of events being repeated a couple of times instead of just once.
  
  What am I doing wrong?
  
  I very much appreciate any thoughts.
  
  Greetings from The Netherlands, sorry for my bad English,
  
  username_0
  
  ```
  {% block calendar %}
  
      {% for block in entry.calendarGroup.all() %}
  
          {% switch block.type %}
  
              {% case "events" %}
  
                  <div class="row no-gutters">
  
                      {% for entries in entry.calendarGroup.type('events') %}
  
                          <div class="col-md-4 pt-1 pb-1 pb-md-0 pr-md-1">
                              <div class="box-calendar black text-white">
                                  <div class="row no-gutters p-3">
                                      <div class="col-2 pl-lg-1 pt-1">
                                          <h5>{{ block.eventDate }}</h5>
                                      </div>
  
                                      <div class="col-10 pt-1 pr-2">
                                          <h5>{{ block.eventTitle }}</h5>
                                          <ul class="pt-1 mt-1 calendar-brood">
                                              <li class="uppercase">{{ block.eventType }}</li>
                                          </ul>
  
                                          <ul class="pt-3 mt-1 calendar-brood">
                                              <li>{{ block.eventTime }}</li>
                                              <li>{{ block.eventLocation }}</li>
                                          </ul>
                                          <div class="pt-3 mt-1 pb-3 calendar-brood">{{ block.eventDescription }}</div>
                                      </div>
  
                                  </div> 
                              </div> 
                          </div>
  
                      {% endfor %}
  
                  </div>
  
              {% case "months" %}
  
                  <div class="row no-gutters">
  
                      <div class="col-12">
                          <div class="calendar-bar d-flex justify-content-between justify-content-md-center">
                              <p class="d-flex align-self-center agenda-item left w-25">{{ block.month }}</p>
                              <p class="d-flex align-self-center agenda-item right">{{ block.year }}</p>
                          </div>
                      </div>
  
                  </div> <!-- End row -->
  
              {% endswitch %}
          {% endfor %}
  
      </div>
  
  {% endblock %}
  
  ```
  
  **Tags:** templating, craft3, matrix, bootstrap-craft
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_0 on 2019-10-30. Score: 1 | Accepted answer
  
  Thank you, username_1, for helping out! I really appreciate it. I solved the issue today using the "Super Table"-plugin (matrix within a matrix).
  
  ```
  {% extends "layout.html" %}
  
  {% block calendar %}
  
  {% for row in entry.eventCalendar.all() %}
  
  <div class="row no-gutters">
  
  {% for block in row.months.all() %}
  
    <div class="col-12">
     <div class="calendar-bar d-flex justify-content-between justify-content-md-center">
        <p class="d-flex align-self-center agenda-item left w-25">{{ block.month }}</p>
        <p class="d-flex align-self-center agenda-item right">{{ block.year }}</p>
     </div>
    </div>
  
  {% endfor %}
  
  </div> <!-- End row -->
  
  <div class="row no-gutters">
  
  {% for block in row.eventInfo.all() %}
  
       <div class="col-md-4 pt-1 pb-1 pb-md-0 pr-md-1">
        <div class="box-calendar black text-white">
          <div class="row no-gutters p-3">
  
            <div class="col-2 pl-lg-1 pt-1">
              <h5>{{ block.eventDate }}</h5>
            </div>
  
            <div class="col-10 pt-1 pr-2">
              <h5>{{ block.eventTitle }}</h5>
              <ul class="pt-1 mt-1 calendar-brood">
                <li class="uppercase">{{ block.eventType }}</li>
              </ul>
  
              <ul class="pt-3 mt-1 calendar-brood">
                <li>{{ block.eventTime }}</li>
                <li>{{ block.eventLocation }}</li>
              </ul>
              <div class="pt-3 mt-1 pb-3 calendar-brood">{{ block.eventDescription }}</div>
            </div>
  
        </div> 
      </div> 
    </div>
  {% endfor %}
  
  </div> <!-- End row -->
  
  {% endfor %}
  
  </div> <!-- End Calendar -->
  
  {% endblock %}
  
  ```
  
  > **Comments:**
  > **username_1**: This question seems to be related more to your frontend framework not Craft.  
  
  ---
  
  ### Answer by username_1 on 2019-10-30. Score: 2
  
  I'm not entirely clear what your Matrix blocks/fields are setup like, so it's a little hard to tell what's going on here.
  
  But I'm going to take a stab at it.
  
  Your outer loop is looping through all the blocks in the `calendarGroup` Matrix field.
  
  Then you're using a switch to determine which piece of code to execute based on which one of the two block types each block is.
  
  All that looks ok.
  
  But here is *I think* where your problem lies:
  
  ```
  {% for entries in entry.calendarGroup.type('events') %}
  
  {% endfor %}
  
  ```
  
  This loop is starting fresh and looping over all the Matrix blocks in the `calendarGroup` Matrix field, except this time it's *only* getting the blocks of the *event* block type.
  
  Then, inside that loop you are using the `{{ block.fieldName }}` variables again. But `block` is set in your parent loop. And nowhere are you referencing `entries` from your inner loop.
  
  So there is a mismatch in your logic. I think you can simply do away with the inner loop, it's it's going to out put all of the `event` blocks inside each `event` block in the outer loop. That, to me, seems like the issue.
  
  
  ---
  
  