Home > Uncategorized > Rows Without Grouping

Rows Without Grouping

Disclaimer: I am using bootstrap 3 for this webapplication so I will be referencing rows and columns as .row and .col-lg-# respectively.

Recently I started working on a feature for an application that required rows of elements with 4 elements per row. This was easy enough using Rails with the in_groups_of method and doing each grouping inside a .row. The problem came in when I wanted to allow these elements to be removed. I did not want to refresh the page but wanted the removed elemented to be taken out of the flow the page.

Enter CSS’s nth-child pseudo class. I was able to create a class called .row-4 and inside, added the following css:

.row.row-4 {

    .col-lg-3:nth-child(4n+1) { clear: left; }

    .col-lg-3:nth-child(4n) { clear: right; }

}

    I was then able to use jquery’s animate functionality to do: animate({‘width’: 0, ‘opacity’: 0}, function(){ $(this).remove(); }); to slide the element over  as it fades out and then remove it. While this caused a little bit of jumping, it was much more visually friendly than removing the element. and having everything jump.

    There is still a problem in that the text of the element, as it’s being smashed down horizontally begins to expand vertically. This, for a brief moment would cause the element below to be pushed way down then jump back when the element is removed. I solved this by using the styles: white-space: nowrap; and text-overflow: hidden because I only had a heading.

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: