Archive

Archive for October, 2013

Rows Without Grouping

October 19, 2013 Leave a comment

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.

Categories: Uncategorized