Visual Builder

Get Involved. Join the Conversation.

Topic

    Sridhar Yerram
    VBCS- Table Border Size
    Topic posted October 5, 2019 by Sridhar YerramRed Ribbon: 250+ Points, tagged Style, UI 
    31 Views, 3 Comments
    Title:
    VBCS- Table Border Size
    Content:

    Hi ,

    Want to know, how do we change the table border size in flow? Is it possible to modify ?

    -Sridhar

    Comment

     

    • David Konecny

      Did you see https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojTable.html documentation - there is info on how to change colums/rows rendering/styling. As for the border for whole table - could you just wrap it in a div and style border on that div?

      -David

    • Sridhar Yerram

      Hi David,

      Could not understand much from that link.

      Should i modify the main-start.html file ?

        <oj-table scroll-policy="loadMoreOnScroll" 
        id="oj-table-2070506159-1" class="oj-flex-item oj-sm-12 oj-md-12" data="[[$page.variables.empListSDP]]" columns='[{"headerText":"empNum","field":"empNum"},{"headerText":"empName","field":"empName"},{"headerText":"salary","field":"salary"},{"headerText":"job","field":"job"}]'>
        </oj-table>

      -Sridhar

      • David Konecny

        Try setting display="grid" on your table:

            <oj-table scroll-policy="loadMoreOnScroll" id="oj-table-1084591017-1" class="oj-flex-item" data="[[$page.variables.feriadoListSDP]]" 
              columns='[{"headerText":"Id","field":"id"},{"headerText":"DataFeriado","field":"dataFeriado"},{"headerText":"Created By","field":"createdBy"}]' 
              display="grid"></oj-table>
         

        OR just style the border using CSS any way you want:

          <div class="oj-flex-item oj-sm-12 oj-flex" style="border: 10px solid red;">
            <oj-table scroll-policy="loadMoreOnScroll" id="oj-table-1084591017-1" class="oj-flex-item" data="[[$page.variables.feriadoListSDP]]" 
              columns='[{"headerText":"Id","field":"id"},{"headerText":"DataFeriado","field":"dataFeriado"},{"headerText":"Created By","field":"createdBy"}]' 
              display="grid"></oj-table>
          </div>
         

        -David