Render partial generate unwanted spaces

Hello, I have a problem with the render :partial method in all my rails webapplications. I noticed that using render :partial will generate spaces (mainly top spaces) on the elements inserted. As all my websites are seperated by module (basicaly header, content, menu, footer) it's quite a problem as I have to set negative margin- top to various parts for the site to display as expected and it's getting very difficult to obtain a cross-browser homogeneous design.

Anyone as the same problem? Any idea what I am doing wrong here?

Thanks for the help.

Have you tried with some literal text as the very first line of the partial, such as <p>start of partial</p> to check the spaces are in fact before the partial, and also immediately before the render, such as <p>rendering partial</p><%= render :partial ....%> (all on one line).

Colin

Hello Colin and thanks for the idea, it didn't even occured to me!...I did as you said and it the problem seems to come from the inner components (tables, divs...) because when I writea text at the beginning of the partial page it shows correctly (without extra spaces), not the render partial. trying to figure out what's going on as css files don't seem to be in cause.

Every browser has its own (and different from each other) default values for padding, margin, etc, for all elements (and for cell spacing, borders and the rest for tables). Are you using a "reset" CSS stylesheet to set everything to a common, blank baseline? If not, it will get rid of a large majority of "cross browser" display issues.

And if white-space is still an issue don't forget about the "-" before closing Ruby tags to suppress it.

Hello Michael, what about the "-", what is it?

The docs explain it right at the top...

http://api.rubyonrails.org/classes/ActionView/Base.html

Ok, I checked the doc but I don't fully understand:   - First what is the "-" you was talking about? I can't see any reference to this   - Second about this: "If you absolutely must write from within a function use concat. suppress leading and trailing whitespace, including the trailing newline, and can be used interchangeably with ."

Does it means I have to use functions to display my contents? I don't get it...

Ok, I checked the doc but I don't fully understand: - First what is the "-" you was talking about? I can't see any reference to this

The first line about ERb says "You trigger ERb by using embeddings such as <% %>, <% -%>, and <%= %>"

- Second about this: "If you absolutely must write from within a function use concat. suppress leading and trailing whitespace, including the trailing newline, and can be used interchangeably with ."

So you did see it - the "suppress leading and trailing whitespace" line that you quote part of (which probably due to HTML emails has gotten fubared) is talking about <%- and -%>.

Does it means I have to use functions to display my contents? I don't get it...

No. It says "if" - some people insist on doing smelly things - like rendering output while they're in functions - and *if* someone insists on doing that, it's better to use "concat" than to use ERb tags. But it's better yet to *not* output from functions at all.

If you have a partial that does this:   <% if true %>     The outcome of the statement is <%= "true" %>   <% end %>

...if you look in the source, you'll see some extra whitespace. If you care about getting rid of it at all (for the most part, I don't), you could do this instead:

  <%- if true -%>     The outcome of the statement is <%= "true" -%>   <%- end -%>

... or someone who spends more time fiddling with the rendering of Rails apps than I do will probably tell you that an *even better* solution is to use something like HAML. All these options are choices for you (since you were raising the issue of white-space) - nothing is set in stone.

Thank you very much, I checked the link with FF and see all the information you're talking about (for some reason IE wouldn't display the tags). I will try this right now!

Ok, no luck here, I added "-" to the main page but still seeing strange spaces. The weirdest thing is that in the generated html code there is no html tag corresponding to those spaces...But still, my tables and divs have a top white space I can't explain.

Ok, no luck here, I added "-" to the main page but still seeing strange spaces. The weirdest thing is that in the generated html code there is no html tag corresponding to those spaces...But still, my tables and divs have a top white space I can't explain.

Please don't top post, it makes it difficult to follow the thread. Thanks. If you install firebug in firefox you can click on various sections of the page and get it to show you the css styles applicable to that element, and where that style has come from. This may give you a clue.

Colin

I, too, am getting this problem.

Using <%- -%> wouldn't solve this, since it suppresses white space in the source HTML, not on the page.

I can paste the exact same text from my partial into my view and the page renders fine. The moment I go to the partial, even though the source HTML looks identical, I have additional white space on top.

Urrrgh.

Are you saying that the html, viewed via View > Page Source or similar in your browser is identical in the two cases, but it shows differently in the browser? I don't think this is possible, all the browser can see is the html (and scripts and css which we assume are identical) so it cannot tell whether you have used a partial or not. I suggest that you copy the complete page html in the two cases and paste it into two files. Then compare the files with a file comparison utility. I am sure you will see a difference.

Colin

Are you saying that the html, viewed via View > Page Source or similar in your browser is identical in the two cases, but it shows differently in the browser? I don't think this is possible, all the browser can see is the html (and scripts and css which we assume are identical) so it cannot tell whether you have used a partial or not. I suggest that you copy the complete page html in the two cases and paste it into two files. Then compare the files with a file comparison utility. I am sure you will see a difference.

Yes, this is what I'm saying. The source html is identical. Comparing the two source files finds no differences, even though there is clearly extra space on the page when using a partial. Is Rails somehow interpreting the .css differently? I can't figure it out...it's making for some ugly, non-DRY code on my views, though.

bravehoptoad wrote in post #961694:

Are you saying that the html, viewed via View > Page Source or similar in your browser is identical in the two cases, but it shows differently in the browser? I don't think this is possible, all the browser can see is the html (and scripts and css which we assume are identical) so it cannot tell whether you have used a partial or not. I suggest that you copy the complete page html in the two cases and paste it into two files. Then compare the files with a file comparison utility. I am sure you will see a difference.

Yes, this is what I'm saying. The source html is identical. Comparing the two source files finds no differences,

Wait. You said "source files". That is not what we are asking.

We are asking about the *generated HTML*, as seen in the browser's View Source, not the Ruby source files.

Best,

exact same poltergeist for me on rails 3.0.1 and ruby 1.9.2. It adds some visible space in browser but completely invisible in the generated HTML.

it seems to be when the partial starts by a tag (like "<form ...>"). It's not a space but a linebreak. If partial starts by basic simple text it's fine. I checked my ruby source files encoding and it's plain good utf8.

The generated html may look exactly the same using 'source>view' in both cases but i'm wondering if there might be some fancy digits making this linebreak.

If the html (and javascript and css) are the same then it must render the same, that is all the browser has to go on. Copy and paste the html into a text file for each case and then do a file compare. Also if you want to see where the extra space is coming from use firebug in firefox and you can see which div or whatever the space is in and how the area is styled.

I note that the OP was not heard from again after he was asked to check the generated html in this way (with the request re-inforced by Marnen as it appeared he may not have understood that it was the html that was to be compared).

Colin

Hi ! Thanks for reply, i have news: In Firefox, the generated html seems exactly the same, but in Chrome, i can see an extra-digit. Screen: http://lh4.ggpht.com/_Hc_PJsJ5czI/TPy9KFd3RsI/AAAAAAABNIc/bApGqfK32fE/Chrome-strange-digit.png

So it's no css issue.

the fact that it adds a space (seen as linebreak) is because it's seen by browser as something to print, so if your template starts by <h1> or <form...> it's by default printed on next line.

So even if it's no css issue, css can correct it if you define "display:inline;" for your <h1>, <form>, etc...

Still, why this digit appears is a mystery and my guess would be that either: -server (in my case: WebRick) outputs some tiny bits of crap when mixing views -my komodo editor added some stuff at the beggining of my ruby files but i can't see anything special when opening my ruby code with radrails.

hope this will help someone!

Well I have to apologise for suggesting that if the html looked the same then it would render the same. I had not allowed for non-displaying characters. I wonder whether you are on developing on windows? I seem to remember a problem with <%- -%> that the - removed the LF but not the CR in files with CRLF line endings.

Colin

Yep, Windows. When i print special chars in Komodo, i see LF ending each line, but no CR. I'm really not at ease with those file format issues, can't be really helpful on that, sorry :frowning: