Dynamic CSS based on database info

Question

I'd like to know how to dynamically change my CSS styling based on the number of elements in my database.

Users can choose a certain number of columns, and the number of columns they choose determines the width of the columns (obviously the more columns chosen, the smaller the width of each column would be so that they are evenly spaced horizontally across the page.

How do you do something like this?

Answer 1

You need to dynamically assign styles in your .html.erb. You can use, tables, divs, lists - whatever you want. Just assign different classes depending on the number of columns (class="small", class="wide") and define those in your CSS file OR (possibly less pretty) you can use inline-styles.

For example, in this code I assign the width of an element (to do a five-star rating):

<ul class="stars floatstars">
        <li class="yellowstars" style="width: <%= @article.avg_rating * 25 %>px !important;"></li>
        <li class="text"><%= @article.avg_rating %> average from <%= pluralize(@article.count_ratings, "vote") %></li>
</ul>

Edit: if you set the class as a variable in the controller this would be an example for the view:

<li class=<%= @myclass %>>...</li>