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.

1 Answer 1


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 + '%'}">

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .