Avoid whitespace before and after Ember component


#1

Hi, I’m trying to render an Ember component inline. Right before, there is a “(” character and right after there is “)”. What I do in Handlebars: <html>({{my-ember-component}})</html>. However, this results in the following render result in the browser. “( my component text )”. You can see, there are whitespaces rendered before and after the component. How can I avoid this?


#2

Check out this Twiddle https://ember-twiddle.com/0f5c1fe5003908c7c77baedd028e79ae

Use the ~ tilde character


#3

Didn’t know that! Sounds promising, however, it doesn’t help :frowning: I still get the whitespaces. Sometimes they are gone, but only until I change something in the file. Maybe the ember compiler does weird things in this case


#4

Found the bug. It was a css flag “display: inline” (which does not sound too bad to me btw) on the component which introduced the whitespaces. Changing it to “inline-block” fixed the problem.