[solved] Change style attribute with blaze-input

Hi,

I’m working on a chart where you can drag elements around in a div in order to arrange them however the user is fond of. I’m failing at the part of saving the position of the dragged elements. Whenever the user does mouseup a meteor method is triggered wich saves the top and left-position of that element. However I can’t figure out how to get those topPos- and leftPos inputs inside the style-attribute properly.

<section id="plotline-window"> 
{{#each plotNodes}}
<section class="pNode" id="{{title}}" style="top:'{{topPos}}px'; left:'{{leftPos}}px;'"><p>{{title}}</p></section> 
{{/each}}
</section>

Is it possible to get these blaze-inputs inside the style attribute without the single quotes? They are in the way. I appreciate any help!

You had some extra markup in that style tags with all those 's dangling around.

Try this?

<section id="plotline-window">
{{#each plotNodes}}
<section class="pNode" id="{{title}}" style="top:{{topPos}}px; left:{{leftPos}}px;"><p>{{title}}</p></section> 
{{/each}}
</section>
1 Like

It’s what I tried first, but this won’t work.

Can you explain in more detail what “it won’t work” means?
Does it compile? What does the rendered html look like?

1 Like

Oh, I’m sorry. I just tried it again and it actually works. I’m just so used to the fact that when red lines appear the app will crash. Can I somehow remove this error-indicator with the red/yellow lines for this case?

I assume it’s just your syntax highlighter, as inserting handlebars makes it non-standard css.
See if your editor has a handlebars highlighter?

Do you mean something like this?

I have this installed but I don’t see any change.

Visual Studio Code says there are 9 problems with this line. I’m able to ignore the yellow underline by checking ignore empty rulesets on the visual studio code settings but none of these settings seem to get rid of the red ones.

You need to map your .html files to Handlebars in VS Code settings.

Do you know how exactly I can do this?

I looked around and found this. But this doesn’t seem to be what you meant.

Just set

"files.associations": {
  "*.html": "handlebars"
}

…in your settings.json

1 Like

Thank you very much. Everything works now as it should.

1 Like