UI Page Message Alignment

[dharanikumar]

Hi All,

I want to move the message in the UI Page to the right hand side.

Please check the below screenshot. The blue colored message is in left hand side and i want to move the message right under the additional comments box to my right hand side.

Code:
<div class="form-group" id = "form-group-additional-comments">
<label class="col-xs-4 control-label">
<span class="label-text" style="">${gs.getMessage('Additional Comments')}</span>
</label>
<div class="col-xs-7 form-field input_controls">
<textarea required="true" class="form-control" value="comments" id="comments" type="text"></textarea>
</div>
<label class="col-xs-7 control-label">
<span class="label-text" style=""> </span>
</label>
<label class="col-xs-7">
<span class="label-text" style="margin-right:0;color:blue"> <b>${gs.getMessage('Either add "User Communication" in the label or as a tool note in the field')}</b></span>
</label>
</div>

_Kumar

[Mark Roethof]

Hi there,

Not sure if your question is about the text or the span. Though, try adding something like text-align:right or right:0px to your span tag. Or the right:0px to the label tag which contains the span.

<span class="label-text" style="margin-right:0;color:blue;text-align:right">

<span class="label-text" style="margin-right:0;color:blue;right:0px">

What might already work, is changing the margin-right:0 into margin-right:0px;

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark

---

LinkedIn
Community article list

[dharanikumar]

Thanks for the reply. Its not working.

Screenshot:

Code:

<div class="form-group" id = "form-group-additional-comments">
<label class="col-xs-4 control-label">
<span class="label-text" style="">${gs.getMessage('Additional Comments')}</span>
</label>
<div class="col-xs-7 form-field input_controls">
<textarea required="true" class="form-control" value="comments" id="comments" type="text"></textarea>
</div>
<label class="col-xs-100">
<span class="label-text" style="margin-right:0;color:blue;text-align:right"> <p><b>${gs.getMessage('Either add "User Communication" in the label or as a tool note in the field')}</b></p></span>
</label>
</div>


_Kumar

[dharanikumar]

Tried with the above codes.

Please check the screenshots:

Expected:



Current Result:



Current Code:


<div class="form-group" id = "form-group-additional-comments">
<label class="col-xs-4 control-label">
<span class="label-text" style="">${gs.getMessage('Additional Comments')}</span>
</label>
<div class="col-xs-7 form-field input_controls">
<textarea required="true" class="form-control" value="comments" id="comments" type="text"></textarea>
</div>
<label class="col-xs-7">
<span class="label-text" style="margin-right:0;color:blue;right:0px"> <p><b>${gs.getMessage('Either add "User Communication" in the label or as a tool note in the field')}</b></p></span>
</label>
</div>

_Kumar

[Ankur Bawiskar]

Hi Dharani,

can you try this and check once;

I have added one more attribute to style for this span i.e. float:right

highlighted in bold

<span class="label-text" style="margin-right:0;color:blue;right:0px;float:right"> <p><b>${gs.getMessage('Either add "User Communication" in the label or as a tool note in the field')}</b></p></span>

Mark ✅ Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.
Thanks
Ankur