I have a grid view with 3 columns. I style the grid so that each cell has a border and background color. The trouble is, if the total number of cells is not a multiple of 3, I get empty cells displayed. See attached image (I wish to hide the last 2 cells by removing the border and background color). I dont think there is a way to hide these cells using css as css cant tell that they are empty. Is there a setting in Views to help with this?

If not, one way it could be done, is for the views module to add a class "empty", or something, to the TD cells that it knows are empty. Then I can target css at these cells to hide them.

empty views grid cells look strange

CommentFileSizeAuthor
_1.jpg23.38 KBspiderplant0

Comments

spiderplant0’s picture

Issue summary: View changes

clarity

wjaspers’s picture

This should be handled in your site's theme.

dawehner’s picture

Status: Active » Fixed

On the actual configuration of the grid in views you can choose to "fill_single_line" which allows you to achieve what you want.

spiderplant0’s picture

Thanks wjaspers, I was hoping there is a way to do it but cant figure out how. Can you elaborate please.

spiderplant0’s picture

dwehner, thanks but are you sure? I tried toggling this but there was no change. The description beside the control says it is for single rows - I dont have a single row, so I'm confused.

wjaspers’s picture

@spiderplant0,

Using the Views UI, you'll see a button (in the lower right corner) titled "Theme info".
Click on it.
It will give you a list of templates used for this display.

You can override any one of those templates by creating one using the suggested naming scheme for the file and placing it in your theme's "templates/" folder.
You will likely want the --table.tpl.php

All you need to do is modify how the cell is rendered....
It will take a small amount of PHP, but is doable.

spiderplant0’s picture

thanks wjaspers

in case anyone else needs to do this,
I overrode views-view-grid.tpl.php

<?php if (!empty($title)) : ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<table class="<?php print $class; ?>"<?php print $attributes; ?>>
  <tbody>
    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $row_class = 'row-' . ($row_number + 1);
        if ($row_number == 0) {
          $row_class .= ' row-first';
        }
        if (count($rows) == ($row_number + 1)) {
          $row_class .= ' row-last';
        }
      ?>
      <tr class="<?php print $row_class; ?>">
        <?php foreach ($columns as $column_number => $item): ?>

          <!-- add a class "empty" to the td cell if it contains no contents -->
          <?php
            $emptyClass = "";
            if( ! $item ){
              $emptyClass = " empty ";
            }
          ?>

          <td class="<?php print $column_classes[$row_number][$column_number] . $emptyClass; ?>">
            <?php print $item; ?>
          </td>

        <?php endforeach; ?>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

and in your CSS file you can hide your empty cells, eg ...

td.empty{
    border: 0;
    background: none;
}

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

correction

tajdar’s picture

Issue summary: View changes

Thanks Mr spiderplant0
Your solution works for me...!!!

alletsefinn’s picture

Or you can just hide the empty cells with css:

table.views-view-grid {
border-collapse: separate;
empty-cells: hide;
}

cf: http://www.w3schools.com/cssref/pr_tab_empty-cells.asp