1

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

closed as off-topic by glls, Basti, battery.cord, Ratan Paul, Raul Dec 18 '17 at 8:50

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – glls, Basti, battery.cord, Ratan Paul, Raul
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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? – Saumya Ranjan Satapathy Dec 14 '17 at 23:58
  • thank you for your reply Saumya Ranjan Satapathy, i have edited my post with the code; – abdel Dec 15 '17 at 8:23
4

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

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