Visual Builder

Get Involved. Join the Conversation.


    Jaeyshree Kumaran
    oj table data shrinks
    Topic posted March 21, 2019 by Jaeyshree KumaranRed Ribbon: 250+ Points, tagged Business Objects, Custom Code, Database, JET, Layout, Process, REST, Services, Stage / Publish / DevOps, Style, UI, Validation, Web 
    118 Views, 2 Comments
    oj table data shrinks
    Data in oj-table shrinks when columns have data of varied length

    I have used a table component in our VBCS screen. When the table populates with column data of different length, the data shrinks within the table container. I have included the resizable feature. Also for data wrap I have used “white-space:normal” for the columns.  

    An ADP populates the table




    • Shay Shmeltzer

      Can you clarify what behavior you want to see in the table? Do you want it to stretch the fields to fill out the empty space on the right? 

      Also - can you paste the HTML code for your table?

      • Jaeyshree Kumaran

        The issue is the column data are not aligned with the column heading. I dont face this issue when the column data are of same size. When data of any one of the columns has text of varied length, the table data shrinks within the container.


        HTML Code:

            <oj-table summary="Sample Table" style="height:450px" scroll-policy="loadMoreOnScroll" id="table1" class="oj-flex-item oj-sm-12 oj-md-12" data="{{ $page.variables.acuity_update }}" columns='[  {    "headerText": "Order Number",    "field": "salesOrderNumber",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "Order Date",    "field": "transactionDate",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "Order Status",    "field": "orderStatus",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "Office",    "field": "storeNumber",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "Collection",    "field": "collection",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "SKU Number",    "field": "itemSKU",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "Frame Name",    "field": "frameName",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "Acuity Status",    "field": "itemStatus",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "On-Hand",    "field": "quantity",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "Stock Location",    "field": "location",    "style": "white-space:normal",    "resizable": "enabled"  },  {    "headerText": "Process Status",    "template": "Process Status",    "field": "processStatus",    "style": "white-space:normal",    "resizable": "enabled"  }]' display="grid" vertical-grid-visible="disabled" horizontal-grid-visible="enabled">
              <template slot="Process Status">
                <oj-select-one :id="[['oj-select-one--111326858-1-' + $current.index]]" value="{{ $current.row.processStatus }}" style='"width:3"'> 
                  <oj-option value=""></oj-option>
                    <oj-option value="Pick">Pick</oj-option>
                    <oj-option value="Order">Order</oj-option>   
              <template slot="Order Number">



        The table should be displayed like the image I have attached.