In a custom Lightning Component, I'm trying to set the padding-top CSS property on a div with a number (Double) that comes from an attribute on the component. I'm having trouble figuring out what the exact syntax needs to be for this. Any ideas as to what the syntax needs to be to handle this?

Here's the code I have so far:

  <aura:attribute name="padAtt" type="Double" />

  {!v.aspectRatio} = attribute value
  <div style="{!'padding-top: \'' + v.padAtt + '\' %'}">

The attribute value is being passed in from a parent component and I've confirmed the value is there by displaying the attribute value alone in the component.


You do not need to escape the single quotes. Something like this works in my org.

<aura:attribute name="padAtt" type="Double" />

<div style="{!'padding-top:' + v.padAtt + '%'}">

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.