Динамический CSS на основе информации базы данных - PullRequest
Новая
       21

Динамический CSS на основе информации базы данных

2 голосов
/ 04 апреля 2011

Я хотел бы знать, как динамически изменять мой стиль CSS в зависимости от количества элементов в моей базе данных.

Пользователи могут выбрать определенное количество столбцов, и количество выбранных ими столбцов определяетширина столбцов (очевидно, чем больше выбрано столбцов, тем меньше будет ширина каждого столбца, чтобы они были равномерно распределены по горизонтали по всей странице.

Как вы делаете что-то подобное?

Ответы [ 2 ]

3 голосов
/ 04 апреля 2011

Звучит как хорошее применение Гм СТОЛЫ!

Проблема в том, что вы не можете сделать это, изменив CSS, вам нужно изменить HTML 

<table width="100%">
  <tr>
      <td>..</td> (repeat for the number of columns)
  </tr>
</table>

По умолчанию все ячейки таблицы (TD) будут иметь одинаковую ширину.

1 голос
/ 04 апреля 2011

Вам необходимо динамически назначать стили в вашем .html.erb.Вы можете использовать, таблицы, div, списки - все, что вы хотите.Просто назначьте разные классы в зависимости от количества столбцов (class = "small", class = "wide") и определите их в вашем CSS-файле ИЛИ (возможно, менее симпатично) вы можете использовать inline-styles.

ДляНапример, в этом коде я назначаю ширину элемента (чтобы сделать пятизвездочный рейтинг): 

<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>

Редактировать: если вы установите класс в качестве переменной в контроллере, это будет примером длявид: 

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