CODEWITHSUNDEEP
htmlcssruby-on-railserb
user938363
user938363

Reputation: 10350

How to make the space between lines larger in html.erb in Rails?

Here is the html.erb code we have to make the space between <li> elements larger.

<table width="90%", style="font-size:20px;line-height:44px;">
  <tr>
    <td width="40%" valign="top">
      <ul>
        <li><%= link_to 'Expense', SUBURI + "/authentify/view_handler?index=1" %></li>
        <li><%= link_to 'Category', SUBURI + "/authentify/view_handler?index=1" %></li>
      </ul>
    </td>
  </tr>
</table>

The font size works. However the line-height:44px is not working at all. How can I make the line-height work here in the html.erb?

Upvotes: 0

Views: 2236

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

CSS

Further to @lightswitch05' s answer, you need to appreciate the importance of including "unobtrusive" css in your app. CSS is basically just a way to style elements on your page, allowing you to send

CSS (cascading style sheets) are there to provide your app with styling, however, the best developers know that CSS is meant to live in external files (which Rails keeps in the asset pipeline)

Inline

You're currently doing this:

<table width="90%", style="font-size:20px;line-height:44px;">

BIG problem - you're styling individual elements in the page. Not only does this bloat the page, but it prevents extensibility

Pipeline

As suggested, you're best doing this:

<table width="90%" class="new_table">

This means you can then call the following file:

#app/assets/stylesheets/application.css
.new_table {
     font-size:20px
     line-height:44px;
}
.new_table tr td ul {
   line-height: 44px;
}

I'd highly recommend you read up on how to integrate CSS with your app with the asset pipeline

Upvotes: 1

lightswitch05
lightswitch05

Reputation: 9428

You need to learn CSS and how it controls the look of your HTML files. In this case what you are looking for is more padding. You can set padding on the individual <li> (list item) elements like this:

<li style="padding-bottom: 10px"></li>

or, you can set that padding on ALL <li> elements through CSS:

<style>
    li { padding-bottom: 10px; }
</style>

Even better - you can set a class name on your entire list, and have that define your padding. This way you don't accidentally add padding to other <li>that you don't mean to:

 <style>
    ul.add-padding li {padding-bottom: 10px; }
 </style>
 <!-- later on in the HTML -->
 <ul class="add-padding">
    <li>link 1</li>
    <li>link 2</li>
 </ul>

Upvotes: 6

Related Questions