2

i use in some of my component, and it render a label + and input element with default text aligned in the left, my need is to align text on the right (only of the input element), I can do that by adding css class in input tag, but this will impact all input elements in my components; havn't a style attribut, but have a class attribut;

Code is here: :

<lightning:input class="myCustomClass" pattern ="^[0-9]\d{0,9}(\.\d{1,3})?%?$" type="decimal" name="amount" value="{!v.paxAmount}" label="Amount" formatter="currency" required="false" onchange="{!c.amountChanged}"
                            messageWhenPatternMismatch="You must enter a valid number"/>

CSS class:

.THIS .myCustomClass{ 
    text-align: right;
}

Render:

Label is on the right, but not the input element value

what i want is the opposite, leave the label on the left and the input element value on the right;

Thanks for helping mee

2
  • 1
    I believe when you create a new style class and apply that to the specific input fields, style will be affected of those input fields only. Can you add the code for my better understanding of the problem? Commented Dec 14, 2017 at 23:58
  • thank you for your reply Saumya Ranjan Satapathy, i have edited my post with the code;
    – abdel
    Commented Dec 15, 2017 at 8:23

1 Answer 1

5

As lightning:input gets converted into labels, divs and input elements in html while rendering in browser; updating to the below style selecting only the input element will make the text inside input as right aligned without affecting any other element.

.THIS .myCustomClass input { 
    text-align: right;
}

Result: enter image description here

0

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