CODEWITHSUNDEEP
htmlcssflexbox
Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Collapse borders of div

I need to make following design.

enter image description here

I know this seems easy, but not with dynamic binding.

First of all grid tiles will be repeated dynamically (v-for of vuejs or ng-repreat of angularjs), so I can't use table and rows, I can only use columns.

So I have used flexbox, everything seems good, but doubled borders are creating issue.

I have tried this, but it won't work when there are less than 4 cols in a row.

.grid-table .row .col:nth-last-child(1),
.grid-table .row .col:nth-last-child(2),
.grid-table .row .col:nth-last-child(3),
.grid-table .row .col:nth-last-child(4) {
  border-bottom: 0;
}

.grid-table .row .col:nth-child(4n) {
  border-right: 0;
}

Question: How can I collapse borders, and the solutions should be responsive too.

* {
  box-sizing: border-box;
  font-family: monospace;
}

.grid-table {
  border: 1px solid #ddd;
}

.grid-table .row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.grid-table .row .col {
  padding: 20px;
  border: 1px solid #ddd;
  width: 25%;
  height: 70px;
  margin: 0;
}

.grid-table-tile .checkbox-custom {
  width: auto;
}

.grid-table-head .col.m12.s12 {
  height: 40px;
  background: #e7e7e7;
  padding: 10px 20px;
  flex: 1 1;
}

.grid-table .row .col:nth-last-child(1),
.grid-table .row .col:nth-last-child(2),
.grid-table .row .col:nth-last-child(3),
.grid-table .row .col:nth-last-child(4) {
  border-bottom: 0;
}

.grid-table .row .col:nth-child(4n) {
  border-right: 0;
}
<div class="grid-table">
  <div class="row grid-table-head">
    <div class="col m12 s12">Complaint Type</div>
  </div>
  <div class="row">
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>

  </div>
</div>

Dynamic demo with vuejs

Upvotes: 1

Views: 1466

Answers (2)

yasarui
yasarui

Reputation: 6563

Hope the below code helps.

In the css ,the below line matches the first element of the last row

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4)

How means.for example n will 0,1,2 ...

so .grid-table .row .col:nth-child(4n+1) matches 1st and 5th element in our case.

when n is 0

.grid-table .row .col:nth-child(4(0)+1):nth-last-child(-0+4) equates to

.grid-table .row .col:nth-child(1):nth-last-child(4)

first condition .grid-table .row .col:nth-child(1) selects the 1 div

second condition .grid-table .row .col:nth-last-child(4) selects the 4 div from last

since 1 & 4 is not the same element ,the condition fails

when n is 1;

.grid-table .row .col:nth-child(4(1)+1):nth-last-child(-1+4) equates to

.grid-table .row .col:nth-child(5):nth-last-child(3)

first-condition:.grid-table .row .col:nth-child(5) matches 5th element

Second condition: .grid-table .row .col:nth-last-child(3) matches 3rd element from last(which is actually 5th element from the first)

since the first & second condition pointing to the same element.

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4) selects the 5th element.

the next line

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4) ~ .col selects the elements after 5th ie 6th and 7th in our case

In this way we can select the last row of the grid and remove border bottom

enter image description here

* {
  box-sizing: border-box;
  font-family: monospace;
}

.grid-table {
  border: 1px solid #ddd;
}

.grid-table .row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.grid-table .row .col {
  padding: 20px;
  border-right: 1px solid #ddd;
  border-bottom:1px solid #ddd;
  width: 25%;
  height: 70px;
  margin: 0;
}

.grid-table-tile .checkbox-custom {
  width: auto;
}

.grid-table-head .col.m12.s12 {
  height: 40px;
  background: #e7e7e7;
  padding: 10px 20px;
  flex: 1 1;
}

.grid-table .row .col:nth-child(4n) {
  border-right: 0;
}

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4),
.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4) ~ .col {
  border-bottom:none;
}
<div class="grid-table">
  <div class="row grid-table-head">
    <div class="col m12 s12">Complaint Type</div>
  </div>
  <div class="row">
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>

  </div>
</div>

Upvotes: 2

Germano Plebani
Germano Plebani

Reputation: 3625

My simple solution use negative margin:

.grid-table .row .col {
    padding: 20px;
    border: 1px solid #ddd;
    width: 25%;
    height: 70px;
    margin: 0;
    margin-top: -1px;
    margin-left: -1px;
}

Upvotes: 2

Related Questions