Problem with content-position and background-color in a sidebar

Rails
1

In app\views\expenses\new.html.erb, I’ve got (just so I know where the
stuff on the page came from, for now):
<% content_for :sidebar do %>
This is my sidebar stuff from:

new.html.erb

RTS\app\views\expenses
<% end %>

In public\stylesheets\style.css, I’ve got:
div#sidebar {
width: 200px;
margin-left: 480px;
background-color: yellow;
}

Problem: My page displays the sidebar to the right side as I intend,
but:

  • It displays the sidebar’s content as intend … almost: that is, the
    text appear centered vertically rather than on top
  • It continues to have a lily-white background.

Any ideas?

Thanks in Advance,
Richard

2

On 17 March 2010 14:19, RichardOnRails
removed_email_address@domain.invalid wrote:

width: 200px;
margin-left: 480px;
background-color: yellow;
}

Problem: My page displays the sidebar to the right side as I intend,
but:

  •   It displays the sidebar’s content as intend ... almost: that is, the

text appear centered vertically rather than on top

  •   It continues to have a lily-white background.

This doesn’t appear to be a rails issue at all. However, install the
Firebug pludin for Firefox and then you can inspect the div and see
what it’s style is and where those styles are inherited from.

Colin

3

I do have Firebug installed, but keep it inactive until occasions like
this arise. Great idea! Thanks, Colin.

4

On 17 March 2010 14:43, Colin L. removed_email_address@domain.invalid wrote:

Problem: My page displays the sidebar to the right side as I intend,
but:

  •   It displays the sidebar’s content as intend ... almost: that is, the

text appear centered vertically rather than on top

  •   It continues to have a lily-white background.

This doesn’t appear to be a rails issue at all. However, install the
Firebug pludin for Firefox and then you can inspect the div and see
what it’s style is and where those styles are inherited from.

+1

This is a CSS problem, not Rails [1]. Probably a ‘float’ or ‘display’
property that needs to be tweaked.

[1] Assuming you have “

<%= yield :sidebar %>
”
somewhere in your view…

5

Hey Colin and Michael,

Thanks to both of you for your responses.

Assuming you have “

<%= yield :sidebar %>
”
somewhere in your view… [Michael]

Sidebar is referenced in three file the app (according to my Ruby
Search.rb program):
app\views\layouts\standard.html.erb:



Receipts Tracking System


Library powered by Ruby on Rails


  <div id="content">
            <%= yield -%>
        </div>
        <div id="sidebar"></div>

[snip]
app\views\layouts\expenses.html.erb:

<%= flash[:notice] %>

<table width="100%">
<%= yield %> <%= yield :sidebar %> [snip] app\views\expenses\new.html.erb (at the bottom): <% content_for :sidebar do %> This is my sidebar stuff from:
new.html.erb
RTS\app\views\expenses <% end %>

This doesn’t appear to be a rails issue at all [Colin}:

I opened Firebug when “New Expenses”, the offending page, was being
displayed in Firefox.
Fiirebug referenced Scaffold.css 3 times. But style.css wsas never
mentioned, which is where the following definition is given:

div#sidebar {
width: 200px;
margin-left: 480px;
background-color: #00FFFF;
}

Does that point to an error in my code?

Regards,
Richard

The gory details from Firebug follow:

In the left-hand pane:
body
div (not expanded)
link (")
table
tbody
tr
td (My page’s left side, not expanded)
td (My page’s right side = “sidebar”, not expanded)
/tr
/tbody
/table
div id = divCleekiAttrib (other stuff)
/div
/body

Except for the last div, that structure matches my expenses,html.erb:

<%= flash[:notice] %>

  <table width="100%">
<tr>
    <td>  <%= yield %>              </td>
    <td>  <%= yield :sidebar %>  </td>
</tr>
  </table>

So far, so good.

But with the focus on the 2nd td in the left-hand pane,
the right-hand pane shows two items:
First:
body, p, ol, ul, td { [scaffo…6718330 (line 3)]
font-family:verdana,arial,helvetica,sans-serif;
font-size:13px;
line-height:18px;
}

Second (two “body” items “inherited from body”):: [scaffo…6718330
(line 3)]
body, p, ol, ul, td {
font-family:verdana,arial,helvetica,sans-serif; [crossed out]
font-size:13px; [crossed out]
line-height:18px; [crossed out]
}

body { [scaffo…6718330 (line 1)]
color:#333333;
}

6

Woops,

Missed 1 file that mentioned “sidebar” (because I only searched in
files with name matching /erb|rb|rjs/):

public\stylesheets\style.css

Apologies,
Richard

7

On 17 March 2010 16:52, RichardOnRails
removed_email_address@domain.invalid wrote:

[snip] <% content_for :sidebar do %> displayed in Firefox. Fiirebug referenced Scaffold.css 3 times. But style.css wsas never mentioned, which is where the following definition is given:

I presume you have included style.css? Assuming that it is in
public/stylesheets then you should have
<%= stylesheet_link_tag ‘style’ %>
in the header. Check in View, Page Source to see if it is there and
looks correct. In the html it should reference /stylesheets/style.css
(with leading /).

Richard
td (My page’s left side, not expanded)
td (My page’s right side = “sidebar”, not expanded)

Is this the

that we are talking about?

But with the focus on the 2nd td in the left-hand pane,
Expand the td and select the div id=sidebar that should be there I
think. Then you should see the style from style.css

Colin

8

Colin,

Is this the

that we are talking about?
Yes!

Expand the td and select the div id=sidebar that should be there I
think. Then you should see the style from style.css
*** You’re onto something! ***

In the Firebug pane, with the 2nd td expanded, when I bring the
cursor over:
body => teal (all except the top couple of debugging output, that are
exempt from subsequent mention)

=> all white => all white

=> all white

=> all teal => all teal => all teal
left-half => all teal right-half => all teal (text) => all teal

That looks to me like the sidebar background-color spec is being
subordinated to the main-page spec or … I have no idea.

Best wishes,
Richard
9

On 17 March 2010 16:52, RichardOnRails
removed_email_address@domain.invalid wrote:

app\views\expenses\new.html.erb (at the bottom):
<% content_for :sidebar do %>
This is my sidebar stuff from:

new.html.erb

RTS\app\views\expenses
<% end %>

I don’t see where you are putting this in a div with id=sidebar.
Should you have
<% content_for :sidebar do %>

This is my sidebar stuff from:
new.html.erb
RTS\app\views\expenses
<% end %> or something similar?

Colin

10

I don’t see where you are putting this in a div with id=sidebar.
Should you have
<% content_for :sidebar do %>

This is my sidebar stuff from:
new.html.erb
RTS\app\views\expenses
<% end %> or something similar?

Here’s what I’ve got:

In app\views\expenses\new.html.erb (at the bottom) I have:
<% content_for :sidebar do %>
This is my sidebar stuff from:

new.html.erb

RTS\app\views\expenses
<% end %>

Both divs are defined in app\views\layouts\standard.html.erb:



Receipts Tracking System


Library powered by Ruby on Rails


  <div id="content">
            <%= yield -%>
        </div>
      <div id="sidebar">
            <%= yield -%>
        </div>
    </div>
</body>

I just added that yield to div/sidebar based on no more than hot air.
I availed me naught.

11

On 17 March 2010 19:12, RichardOnRails
removed_email_address@domain.invalid wrote:

<%= yield -%>

I just added that yield to div/sidebar based on no more than hot air.
I availed me naught.

Forget about the ruby code for the moment, just check whether the html
is correct. If you just view the html in the browser (View, Page
Source) for the sidebar what do you see? Is the div id=‘sidebar’
there? Post that bit of html.

Colin

12

FYI, Here’s the model layout I aspire to apply to this app in the next
couple of weeks, i.e. after get I over this hurdle, if ever, and
probably one or two more: http://www.pastie.org/874611

Right now I’m going to apply the background-color in the html tag; it
should take precedence over any CSS styling.

13

Thanks Colin for continuing to look at this thing. I posted the only
files in my app that have “sidebar” in their content on
http://www.pastie.org/874534.

Consecutively, they are:
app\views\expenses\new.html.erb
app\views\layouts\expenses.html.erb
app\views\layouts\standard.html.erb
public\stylesheets\style.css

I’m looking around for some simple html/css code that has a single
page split in into main and sidebar. I think I’ve done or saw this a
year or two ago.

Best wishes,
Richard