Skip to main content
Solved

How to place a field on the left side in Modern UI

  • January 31, 2026
  • 4 replies
  • 83 views

Forum|alt.badge.img

I tried using @columnConfig({ textAlign: TextAlign.Left }) in ts for my field, but it does not change its position.

Best answer by Vard86

These are my two checkboxes: 

As you can see, they are placed on the right side, but in the Classic UI they look like this:

here is the code in my ts 

@columnConfig({textAlign: TextAlign.Left })
ReleasePOReceiptDuringFBAShipmnetImport: PXFieldState;
@columnConfig({textAlign: TextAlign.Left })
OverrideFBAShipmentBillToInfo: PXFieldState;


and html 

    <qp-fieldset id="CstPXLayoutRule234_fs1" view.bind="Store" slot="B" caption="FBA Default Shipment Options">
...
<field name="ReleasePOReceiptDuringFBAShipmnetImport"></field>
<field name="OverrideFBAShipmentBillToInfo"></field>
</qp-fieldset>


what am i missing?

Hello ​@Marat43 


You can try applying class="no-label" to your field in the .html file.

Regards,

Vard

4 replies

Forum|alt.badge.img
  • Freshman II
  • February 2, 2026

We can also use the Screen Configuration option from the menu once the field is added to the Modern UI.
To provide a more accurate and complete answer, could you please share screenshots or a brief explanation of the screen setup and requirement?


Forum|alt.badge.img
  • Author
  • Jr Varsity I
  • February 2, 2026

These are my two checkboxes: 

As you can see, they are placed on the right side, but in the Classic UI they look like this:

here is the code in my ts 

@columnConfig({textAlign: TextAlign.Left })
ReleasePOReceiptDuringFBAShipmnetImport: PXFieldState;
@columnConfig({textAlign: TextAlign.Left })
OverrideFBAShipmentBillToInfo: PXFieldState;


and html 

    <qp-fieldset id="CstPXLayoutRule234_fs1" view.bind="Store" slot="B" caption="FBA Default Shipment Options">
...
<field name="ReleasePOReceiptDuringFBAShipmnetImport"></field>
<field name="OverrideFBAShipmentBillToInfo"></field>
</qp-fieldset>


what am i missing?


Forum|alt.badge.img
  • Jr Varsity III
  • Answer
  • February 2, 2026

These are my two checkboxes: 

As you can see, they are placed on the right side, but in the Classic UI they look like this:

here is the code in my ts 

@columnConfig({textAlign: TextAlign.Left })
ReleasePOReceiptDuringFBAShipmnetImport: PXFieldState;
@columnConfig({textAlign: TextAlign.Left })
OverrideFBAShipmentBillToInfo: PXFieldState;


and html 

    <qp-fieldset id="CstPXLayoutRule234_fs1" view.bind="Store" slot="B" caption="FBA Default Shipment Options">
...
<field name="ReleasePOReceiptDuringFBAShipmnetImport"></field>
<field name="OverrideFBAShipmentBillToInfo"></field>
</qp-fieldset>


what am i missing?

Hello ​@Marat43 


You can try applying class="no-label" to your field in the .html file.

Regards,

Vard


Forum|alt.badge.img
  • Jr Varsity II
  • February 2, 2026

@Marat43  You have defined Slot=”B”. Try to modify it to ”A”

Ex:

<qp-template id="YourID" name="1-1-1"> 

<qp-fieldset id="CstPXLayoutRule234_fs1" view.bind="Store" slot="A" caption="FBA Default Shipment Options">

</qp-fieldset>

</qp-template>

 

Also you  can use, class="no-label"