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

[dharanikumar]

Thanks for the reply Ankur!!

Its not working after adding the new attribute:

Result:



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;float: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>

[dharanikumar · Accepted solution]

I changed the code like below moving that alignment code out Additional Comments Class.

Now its looks like...



Old 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;float: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>

New 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>
</div>

<div>
<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>
</div>

[Mark Roethof]

Just simulated with below code. Seems to work! (I highlighted the label with red background color for testing purposes)

<label class="col-xs-7" style="background-color:red;text-align:right;width:100%">

I added to the label tag, text-align:right;width:100%

So the text-align should have worked for you, though the label was not full width. Other option might be to align the label to the right. Though this width:100% also works.

This is the result:

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

Kind regards,
Mark

---

LinkedIn
Community article list

[Mark Roethof]

Hi there,

Did this solve your question? Or do we need to follow-up on this?

Please mark this answer as correct if it solves your question. This will help others who are looking for a similar solution. Also marking this answer as correct takes the post of the unsolved list.
Thanks.

Kind regards,
Mark

---

LinkedIn
Community article list