10 Replies Latest reply on Nov 8, 2018 3:18 AM by anand_gp

    question on column alignment in custom row template

    anand_gp

      Hi,

       

      I am finding it difficult on how to define alignments to get required column widths (during printing) while creating a report using custom row template.  For example, if I would like to format an invoice which looks something like as shown in below image which is created in Excel file, I need to know how to define the things.

       

      i created above template in Excel to just to make it easier for me to put the question. 

       

      1. "Customer Name:" and "Address:" label fields use two column width (as per excel representation)

      2.  Whereas customer-name and address value fields use 5 colspan

      3.  BRAND NAME column uses two column width

       

      How I have defined in Row Template -

       

      <tr> <th colspan="2">Customer Name <td colspan="5"> #CUSTOMER_NAME#
      <tr> <th colspan="2">Address       <td colspan="5"> #COMMUNICATION_ADDRESS#
      
      
      <tr> <th id="srl-no">S/N  <th id="brand" colspan="2">BRAND NAME    <th>ITEM    <th>QTY        <th>RATE    <th>AMOUNT
      <tr> <td id="srl-no">#RN# <td id="brand" colspan="2">#BRAND_NAME#  <td>#ITEM#  <td>#QUANTITY# <td>#RATE#  <td>#AMOUNT# 
      
      
      <tr> <th colspan="2">Terms:
      <tr> <th id="terms2" colspan="3">We declare that this invoice shows the actual price of the goods described & that all particulars are true & correct.
      

       

      And defined below code under  Inline CSS of Page Properties -

       

      #srl-no {

         min-width: 10px;

         max-width: 10px;

        text-align: center;

      }

       

       

      #terms2 {

         word-wrap: break-word;

      }

       

      I am giving above few details which are only relevant to put my question.  My question is, how to get columns with specific width to match my requirement.  With whatever I have defined above, in the result I see that, "S/N" column is wider than what's defined under #srl-no in Inline CSS.   "colspan" works as defined.  But not the width of columns.  What is the correct way to define such a template.  Please help.  I really appreciate your inputs.  Thanks.

      I use Apex 2.4.6  and Theme 24 Cloudy.

       

      Best Regards,

      -Anand

        • 1. Re: question on column alignment in custom row template
          Karthikeyan.R-Oracle

          Hi Anand,

           

          You should use % (percentage) instead of pixels (px). Please check the below link

           

          https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_th_width

          • 2. Re: question on column alignment in custom row template
            anand_gp

            In my case, "Customer Name" label spans across 2 columns and from 2nd column the Brand Name columns spans to 2 columns.  For such mix up of columns, how to defined width specifically.  Not getting clear idea.

            • 3. Re: question on column alignment in custom row template
              Karthikeyan.R-Oracle

              you can create two tables i.e., customer name and address in one table.

              Rest of the columns in the second table. Now you can define the width specifically.

              • 4. Re: question on column alignment in custom row template
                fac586

                anand_gp wrote:

                 

                I am finding it difficult on how to define alignments to get required column widths (during printing) while creating a report using custom row template. For example, if I would like to format an invoice which looks something like as shown in below image which is created in Excel file, I need to know how to define the things.

                 

                i created above template in Excel to just to make it easier for me to put the question.

                 

                1. "Customer Name:" and "Address:" label fields use two column width (as per excel representation)

                2. Whereas customer-name and address value fields use 5 colspan

                3. BRAND NAME column uses two column width

                 

                How I have defined in Row Template -

                1. <tr><thcolspan="2">CustomerName<tdcolspan="5">#CUSTOMER_NAME#
                2. <tr><thcolspan="2">Address<tdcolspan="5">#COMMUNICATION_ADDRESS#
                3. <tr><thid="srl-no">S/N<thid="brand"colspan="2">BRANDNAME<th>ITEM<th>QTY<th>RATE<th>AMOUNT
                4. <tr><tdid="srl-no">#RN#<tdid="brand"colspan="2">#BRAND_NAME#<td>#ITEM#<td>#QUANTITY#<td>#RATE#<td>#AMOUNT#
                5. <tr><thcolspan="2">Terms:
                6. <tr><thid="terms2"colspan="3">Wedeclarethatthisinvoiceshowstheactualpriceofthegoodsdescribed&thatallparticularsaretrue&correct.

                And defined below code under Inline CSS of Page Properties -

                 

                #srl-no {

                min-width: 10px;

                max-width: 10px;

                text-align: center;

                }

                 

                #terms2 {

                word-wrap: break-word;

                }

                 

                I am giving above few details which are only relevant to put my question. My question is, how to get columns with specific width to match my requirement. With whatever I have defined above, in the result I see that, "S/N" column is wider than what's defined under #srl-no in Inline CSS. "colspan" works as defined. But not the width of columns. What is the correct way to define such a template. Please help. I really appreciate your inputs. Thanks.

                I use Apex 2.4.6 and Theme 24 Cloudy.

                By default, HTML tables and cells expand to fit their contents. "S/N" (and possibly "2" depending on font face and size) will be more than 10 pixels wide, and the cells containing these values will expand accordingly. In the absence of any instructions to the contrary, the table will also be stretched to fit the full width of the screen or output media.

                 

                There is very little point in applying the break-word setting to the Terms content as it contains plenty of natural breaks anyway. This content is also not a column or row heading and should not be marked-up as such.

                 

                As previously advised, HTML ID attributes must be unique within a document, therefore srl-no and terms2 should be used as class names, not ID values.

                 

                For on-screen display, I wouldn't apply any specific column widths on this report.

                 

                For printed output, use a separate print media stylesheet with rules that specify real-world units instead of pixels when specifying dimensions: points (pt) for font sizes, millimetres (mm) or centimetres (cm) for heights, widths, and positioning.

                • 5. Re: question on column alignment in custom row template
                  fac586

                  Karthikeyan.R-Oracle wrote:

                   

                  you can create two tables i.e., customer name and address in one table.

                  Rest of the columns in the second table. Now you can define the width specifically.

                  Only the brand/item/qty etc information is actually tabular data. One table for that and use different structures for the rest...

                  • 6. Re: question on column alignment in custom row template
                    anand_gp

                    Hi Fac,

                     

                    My actual template was little bigger, but I built new one for test purpose.  And here is what my template is -

                     

                    Before Rows:

                    <div class="report-1" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">

                    <table>

                    <tbody>

                    <tr>  <th id="comp-name" colspan="7">&G_COMPANY_NAME.

                    <tr>  <th id="comp-adr"  colspan="7">&G_COMPANY_ADDRESS.

                    <tr>  <th id="form-hdr"  colspan="7">I N V O I C E

                     

                     

                     

                     

                     

                     

                    Row Template 1

                     

                     

                    <tr> <th class="invnolbl">Inv.No.: <td class="invno">#INVOICE_NO#  <th>  <th>  <th>  <th>Date: <td>#INVOICE_DATE#

                    <tr> <th colspan="2">Customer Name  <td colspan="5"> <b> #CUSTOMER_NAME#  

                    <tr> <th colspan="2">Address        <td colspan="5">#COMMUNICATION_ADDRESS#

                    <tr> <th>S/N  <th colspan="2">BRAND NAME    <th class="style">STYLE No.  <th>  QUANTITY  <th class="rate">RATE <th class="amount">AMOUNT

                    <tr> <td>#RN# <td colspan="2">#BRAND_NAME#  <td>#STYLE_NO#      <td> #QUANTITY# <td class="rate">#RATE#  <td class="amount">#AMOUNT#

                    <tr> <th style="text-align: right;" colspan="4"> </br> GRAND TOTAL :  <td> </br> #TOTAL_QUANTITY# <td>  <td > </br> #TOTAL_AMOUNT#

                     

                     

                     

                     

                    Row template 1 express (pl/sql)

                     

                     

                    #N# = 1

                     

                     

                     

                     

                    Row Template 2

                     

                     

                    <tr> <th class="invnolbl">Inv.No.: <td class="invno">#INVOICE_NO#  <th>  <th>  <th>  <th>Date: <td>#INVOICE_DATE#

                    <tr> <th colspan="2">Customer Name  <td colspan="5"> <b> #CUSTOMER_NAME#  

                    <tr> <th colspan="2">Address        <td colspan="5">#COMMUNICATION_ADDRESS#

                    <tr> <th>S/N  <th colspan="2">BRAND NAME    <th class="style">STYLE No.  <th>  QUANTITY  <th class="rate">RATE <th class="amount">AMOUNT

                    <tr> <td>#RN# <td colspan="2">#BRAND_NAME#  <td>#STYLE_NO#      <td> #QUANTITY# <td class="rate">#RATE#  <td class="amount">#AMOUNT#

                     

                     

                     

                     

                    Row template 2 express (pl/sql)

                     

                     

                    #ROWNUM# = 1

                     

                     

                     

                     

                    Row Template 3

                     

                     

                    <tr> <td>#RN# <td colspan="2">#BRAND_NAME#  <td>#STYLE_NO#      <td> #QUANTITY# <td class="rate">#RATE#  <td class="amount">#AMOUNT#

                    <tr> <th style="text-align: right;" colspan="4"> </br> GRAND TOTAL :  <td> </br> #TOTAL_QUANTITY# <td>  <td > </br> #TOTAL_AMOUNT#

                     

                     

                     

                     

                    Row template 3 express (pl/sql)

                     

                     

                    #ROWNUM# = #N#

                     

                     

                     

                     

                    Row Template 4

                     

                     

                    <tr> <td>#RN# <td colspan="2">#BRAND_NAME#  <td>#STYLE_NO#      <td> #QUANTITY# <td class="rate">#RATE#  <td class="amount">#AMOUNT#

                     

                     

                     

                     

                     

                     

                    After Rows:

                    <tr> <th colspan="4"> Declaration:  description goes here.....  <th colspan="3">

                    <tbody class="uReportPagination">

                          #PAGINATION#

                      </table>

                      <div class="CSV">#EXTERNAL_LINK##CSV_LINK#</div>

                    </div>

                     

                    Here is inline CSS property -

                     

                    .report-1 h1 {

                      text-align: center;

                    }

                    .report-1 table {

                      margin: 1em 0;

                      border-collapse: collapse;

                    }

                    .report-1 table th,

                    .report-1 table td {

                      border: 1px solid #aaa;

                      padding: 2px 2px;

                      font-size: 9px;

                      font-family:Roman 10cpi;

                    }

                    .report-1 table .uReportPagination th,

                    .report-1 table .uReportPagination td {

                      border: none;

                    }

                    .report-1 table th {

                      font-weight: 600;

                      text-align: left;

                    }

                    .report-1 table td.num {

                      text-align: right;

                      font-size: 9px;

                    }

                    .report-1 table td.status {

                      text-align: center;

                    }

                    #comp-name {

                      text-align: center;

                      font-family:Arial;

                      font-size: 24px;

                      padding-bottom:6px;

                    }

                    #comp-adr {

                      text-align: center;

                      font-size: 9px;

                    }

                    #form-hdr {

                      text-align: center;

                      font-size: 16px;

                    }

                    #ftr-clause {

                      padding-top: 30px;

                    }

                    .invnolbl {

                       min-width: 10mm;

                       max-width: 10mm;

                    }

                    .invno {

                       min-width: 30mm;

                       max-width: 30mm;

                    }

                    .style {

                       min-width: 180px;

                       max-width: 180px;

                    }

                    .rate  {

                      text-align: center;

                    }

                    .amount  {

                      text-align: right;

                    }

                     

                    Accordingly i get output -

                     

                     

                    My Question is -

                     

                    I have set width for "Inv.No.:"  label and the actual "Invoice No." as  10 mm and 30 mm.  The 1st column shows correct 10 mm width, but 2nd col.  30 mm width shows correctly when I have not defined any width for "BRAND NAME" column which of 2 column width.  If I define width to that column, the width defined to Invoice No. doesn't show correctly as defined.  Not sure why.

                     

                    Only the brand/item/qty etc information is actually tabular data. One table for that and use different structures for the rest...

                    Really appreciate if you can show me how.   In my case, even, Invoice No., Date, Customer Name comes from table and I have defined under table as shown above.

                     

                    And, thanks for sharing the link for defining CSS values and units.

                     

                    Thanks,

                    -Anand

                    • 7. Re: question on column alignment in custom row template
                      anand_gp

                      Hi Fac,

                       

                      Apart from the question I put earlier, I have below confusion as well -

                       

                      When I define as "id" as shown below, the result looks ok (1st image).  However, as soon as I change it to "class", result is not as expected (2nd image below).  I am still not clear on how to define things for custom row template.  Can you please help me on this.  Thanks.

                       

                      Before Rows:

                      <div class="report-1" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">

                      <table>

                      <tbody>

                      <tr>  <th id="compname" colspan="7">&G_COMPANY_NAME.

                      <tr>  <th id="compadr"  colspan="7">&G_COMPANY_ADDRESS.

                      <tr>  <th id="formhdr"  colspan="7">I N V O I C E

                       

                      inline CSS:

                      #compname {

                        text-align: center;

                        font-family:Arial;

                        font-size: 24px;

                        padding-bottom:6px;

                        min-width: 5.5in;

                        max-width: 5.5in;

                      }

                      #compadr {

                        text-align: center;

                        font-size: 9px;

                      }

                      #formhdr {

                        text-align: center;

                        font-size: 16px;

                      }

                       

                      Result looks ok -

                       

                       

                      Here, I change it to "class" -

                      <div class="report-1" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">

                      <table>

                      <tbody>

                      <tr>  <th class="compname" colspan="7">&G_COMPANY_NAME.

                      <tr>  <th class="compadr"  colspan="7">&G_COMPANY_ADDRESS.

                      <tr>  <th class="formhdr"  colspan="7">I N V O I C E

                       

                      inline CSS -

                      .compname {

                        text-align: center;

                        font-family:Arial;

                        font-size: 24px;

                        padding-bottom:6px;

                        min-width: 5.5in;

                        max-width: 5.5in;

                      }

                      .compadr {

                        text-align: center;

                        font-size: 9px;

                      }

                      .formhdr {

                        text-align: center;

                        font-size: 16px;

                      }

                       

                      And result is wrong -

                       

                       

                      Regards,

                      -Anand

                      • 8. Re: question on column alignment in custom row template
                        fac586

                        anand_gp wrote:

                         

                        My actual template was little bigger, but I built new one for test purpose

                         

                        Accordingly i get output -

                         

                         

                        My Question is -

                         

                        I have set width for "Inv.No.:" label and the actual "Invoice No." as 10 mm and 30 mm. The 1st column shows correct 10 mm width, but 2nd col. 30 mm width shows correctly when I have not defined any width for "BRAND NAME" column which of 2 column width. If I define width to that column, the width defined to Invoice No. doesn't show correctly as defined. Not sure why.

                         

                        Only the brand/item/qty etc information is actually tabular data. One table for that and use different structures for the rest...

                        Really appreciate if you can show me how. In my case, even, Invoice No., Date, Customer Name comes from table and I have defined under table as shown above.

                        My advice would be—quite literally—think outside the box. Do not use HTML tables for layout. Use tables only when rendering tabular data.

                         

                        Mark up the report structure as semantically and as simply as possible. I have created a demo application with a similar report, which uses an HTML table only for the invoice lines:

                         

                        Row Template 1

                         

                        <section class="invoice" id="in-#CUSTOMER_ID#-#ORDER_ID#">
                          <header>
                            <h1>#VENDOR_NAME#</h1>
                            <p>#VENDOR_STREET_ADDRESS#, #VENDOR_CITY#, #VENDOR_COUNTRY#, #VENDOR_POSTAL_CODE#</p>
                            <h2>Invoice ##CUSTOMER_ID#/#ORDER_ID#</h2>
                            <dl>
                              <dt>Date<dd>#ORDER_DATE#
                              <dt>Customer<dd>#CUST_FIRST_NAME# #CUST_LAST_NAME#
                              <dt>Address<dd>#CUST_STREET_ADDRESS#<br>#CUST_CITY#<br>#CUST_STATE#<br>#CUST_COUNTRY#<br>#CUST_POSTAL_CODE#
                            </dl>
                          </header>
                          <table>
                            <thead>
                              <tr><th>S/N<th>Product<th>Quantity<th>Unit Price<th>Amount
                            <tbody>
                              <tr><td>#LINE_ITEM_ID#<td>#PRODUCT_NAME#<td>#QUANTITY#<td>#UNIT_PRICE#<td>#AMOUNT#
                            <tfoot>
                              <tr><th>Total<td><td>#TOTAL_QUANTITY#<td><td>#ORDER_TOTAL#
                          </table>
                          <footer>
                            <small><strong>Terms:</strong> We declare that this invoice shows the actual price of the goods described & that all particulars are true & correct.</small>
                          </footer>
                        </section>
                        
                        
                        
                        

                         

                        Row Template 1 Condition

                         

                            #LINE_ITEM_ID# = 1
                        and #TOTAL_LINES# = 1
                        

                         

                         

                        Row Template 2 Condition

                         

                        <section class="invoice" id="in-#CUSTOMER_ID#-#ORDER_ID#">
                          <header>
                            <h1>#VENDOR_NAME#</h1>
                            <p>#VENDOR_STREET_ADDRESS#, #VENDOR_CITY#, #VENDOR_COUNTRY#, #VENDOR_POSTAL_CODE#</p>
                            <h2>Invoice ##CUSTOMER_ID#/#ORDER_ID#</h2>
                            <dl>
                              <dt>Date<dd>#ORDER_DATE#
                              <dt>Customer<dd>#CUST_FIRST_NAME# #CUST_LAST_NAME#
                              <dt>Address<dd>#CUST_STREET_ADDRESS#<br>#CUST_CITY#<br>#CUST_STATE#<br>#CUST_COUNTRY#<br>#CUST_POSTAL_CODE#
                            </dl>
                          </header>
                          <table>
                            <thead>
                              <tr><th>S/N<th>Product<th>Quantity<th>Unit Price<th>Amount
                            <tbody>
                              <tr><td>#LINE_ITEM_ID#<td>#PRODUCT_NAME#<td>#QUANTITY#<td>#UNIT_PRICE#<td>#AMOUNT#
                        
                        

                         

                        Row Template 2 Condition

                         

                        #LINE_ITEM_ID# = 1
                        

                         

                         

                        Row Template 3

                         

                              <tr><td>#LINE_ITEM_ID#<td>#PRODUCT_NAME#<td>#QUANTITY#<td>#UNIT_PRICE#<td>#AMOUNT#
                            <tfoot>
                              <tr><th>Total<td><td>#TOTAL_QUANTITY#<td><td>#ORDER_TOTAL#
                          </table>
                          <footer>
                            <small><strong>Terms:</strong> We declare that this invoice shows the actual price of the goods described & that all particulars are true & correct.</small>
                          </footer>
                        </section>
                        

                         

                        Row Template 3 Condition

                         

                        #LINE_ITEM_ID# = #TOTAL_LINES#
                        

                         

                         

                        Row Template 4

                         

                              <tr><td>#LINE_ITEM_ID#<td>#PRODUCT_NAME#<td>#QUANTITY#<td>#UNIT_PRICE#<td>#AMOUNT#
                        

                         

                        All template conditions are of type PL/SQL Expression.

                         

                        The custom CSS for the report also isn't complicated:

                         

                        @media screen {
                          /* Show "page breaks" visually on screen. */
                          .invoice {
                            margin-bottom: 4em;
                            padding-bottom: 4em;
                            border-bottom: 1px solid #999;
                          }
                        }
                        
                        @media print {
                          /* Remove background color and set smaller base font size on printed invoices. */
                          body {
                            background-color: #fff;
                            font-size: 12pt;
                          }
                          /* Print each invoice on a new page. */
                          .invoice {
                            page-break-after: always;
                          }
                        }
                        
                        /* Add vendor "company logo". */
                        .invoice header:before {
                          display: block;
                          float: left;
                          margin-left: -1rem;
                          padding-top: 2rem;
                          color: #e95b54;
                          font-family: "Font APEX Large";
                          font-size: 6rem;
                          content: "\ea5e";
                        }
                        /* Format vendor company name and address. */
                        .invoice h1 {
                          font-weight: 200;
                        }
                        .invoice h2 {
                          font-weight: 300;
                        }
                        .invoice h1,
                        .invoice header p {
                          margin: 0 0 0 5rem;
                          line-height: 1.2;
                        }
                        .invoice header p {
                          font-size: 0.9em;
                        }
                        
                        /* Format invoice number. */
                        .invoice h2 {
                          margin: 1em 0;
                        }
                        
                        /* Format customer information. */
                        .invoice dt {
                          float: left;
                          font-weight: 500;
                        }
                        .invoice dd {
                          margin: 0 0 0.75em 5.5em;
                        }
                        
                        /* Format table containing invoice lines. */
                        .invoice table {
                          margin: 4em 0 2em;
                          width: 100%;
                          border-collapse: collapse;
                          font-size: smaller;
                        }
                        /* Format invoice line table headings and cells. All columns except one show numbers, so the default is to align them to the right. */
                        .invoice th,
                        .invoice td {
                          border-bottom: 1px dotted #ccc;
                          padding: 0.2em 1em;
                          text-align: right;
                        }
                        .invoice thead,
                        .invoice tfoot {
                          border-top: 1px solid #ccc;
                          border-bottom: 1px solid #ccc;
                        }
                        /* Set a fixed width for the line number column. */
                        .invoice tr :nth-child(1) {
                          width: 7.5em;
                        }
                        /* Align the product name text column to the left. */
                        .invoice tr :nth-child(2) {
                          text-align: left;
                        }
                        

                         

                        Notice how the simple, semantic mark-up, use of descendant selectors, and intelligent use of defaults and overrides reduces the need for specific classes and IDs.

                         

                        We also need a basic print media style sheet to reset the APEX Universal Theme layout, which needs a few updates for APEX 18.2/UT 1.2:

                         

                        /*
                          Standard print media reset styles: updated for 18.2
                        */
                        
                        /* Hide elements that are only visible when printed. */  
                        .printOnly{  
                            display: none;  
                        }  
                          
                        /* Show elements that are only visible on screen. */  
                        .showOnly{  
                            display: block;  
                        }  
                          
                        @media print {  
                          /* Removes header (including top menu), side menu, footer, back to top button and dev toolbar. */  
                          .t-Header,  
                          .t-Body-nav,
                          .t-Body-title,
                          .t-Footer,  
                          .t-Body .t-Body-main .t-Body-content .t-Body-topButton,  
                          #t_Body_content_offset,  
                          .apex-page-success,  
                          .apex-page-error,  
                          #apexDevToolbar {  
                            display: none !important;  
                          }  
                          
                          /* Display elements that are only visible when printed. */  
                          .printOnly {  
                            display: block;  
                          }  
                        
                          /* Hide elements that are only visible on screen. */  
                          .showOnly,  
                          .doNotPrint {  
                            display: none;  
                          }  
                        
                          /* Removes the side menu transform that translates the body content to the right. */  
                          .apex-side-nav.js-navExpanded .t-Body-main { 
                            margin-left: 0 !important;
                            -webkit-transform:translate3d(0,0,0) !important;  
                            transform:translate3d(0,0,0) !important; 
                          }   
                        
                          /* Remove the space for the header. */  
                          .t-Body-main {    
                            margin-top: 0 !important;  
                          }    
                        
                          /* Moves the title to the top left corner. */  
                          .t-Body .t-Body-main .t-Body-title {  
                            position: relative !important;  
                            left: 0 !important;  
                            top: 0 !important;  
                            border-bottom: none !important;  
                          }  
                        
                          /* Removes padding/margin from the body. */  
                          .t-Body .t-Body-main .t-Body-content {  
                            margin-left: 0 !important;  
                            margin-top: 0 !important;  
                            padding-bottom: 0 !important;  
                          }  
                        
                          /* Removes background image from the body. */  
                          body,  
                          .t-Body {  
                            background-image: none !important;  
                          }  
                        
                          /* IRR floating header - Prevent floating. */  
                          .t-IRR-region .js-stickyTableHeader {  
                            top: 0px !important;  
                            width: inherit !important;  
                          }  
                        
                          /* Prevent IRR rows from breaking/printing on two pages. */  
                          .t-IRR-region .a-IRR-table tbody tr {  
                            page-break-inside: avoid;  
                          }  
                        
                          /* Reset the min-height of the page content and form. */  
                          .t-Body-content,  
                          form#wwvFlowForm {  
                            min-height: 0 !important;  
                          }  
                        }  
                        

                         

                        This is working in Chrome (71.0). Page breaks between invoices aren't appearing in Safari (12.0) and I don't have time to investigate further at present. I will test with other browsers as soon as possible.

                        • 9. Re: question on column alignment in custom row template
                          fac586

                          anand_gp wrote:

                           

                           

                          Apart from the question I put earlier, I have below confusion as well -

                           

                          When I define as "id" as shown below, the result looks ok (1st image). However, as soon as I change it to "class", result is not as expected (2nd image below). I am still not clear on how to define things for custom row template. Can you please help me on this. Thanks.

                           

                          Before Rows:

                          <div class="report-1" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">

                          <table>

                          <tbody>

                          <tr> <th id="compname" colspan="7">&G_COMPANY_NAME.

                          <tr> <th id="compadr" colspan="7">&G_COMPANY_ADDRESS.

                          <tr> <th id="formhdr" colspan="7">I N V O I C E

                           

                          inline CSS:

                          #compname {

                          text-align: center;

                          font-family:Arial;

                          font-size: 24px;

                          padding-bottom:6px;

                          min-width: 5.5in;

                          max-width: 5.5in;

                          }

                          #compadr {

                          text-align: center;

                          font-size: 9px;

                          }

                          #formhdr {

                          text-align: center;

                          font-size: 16px;

                          }

                           

                          Result looks ok -

                           

                           

                          Here, I change it to "class" -

                          <div class="report-1" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">

                          <table>

                          <tbody>

                          <tr> <th class="compname" colspan="7">&G_COMPANY_NAME.

                          <tr> <th class="compadr" colspan="7">&G_COMPANY_ADDRESS.

                          <tr> <th class="formhdr" colspan="7">I N V O I C E

                           

                          inline CSS -

                          .compname {

                          text-align: center;

                          font-family:Arial;

                          font-size: 24px;

                          padding-bottom:6px;

                          min-width: 5.5in;

                          max-width: 5.5in;

                          }

                          .compadr {

                          text-align: center;

                          font-size: 9px;

                          }

                          .formhdr {

                          text-align: center;

                          font-size: 16px;

                          }

                           

                          And result is wrong -

                          There's nothing obviously wrong there. (Although check that there are no errors elsewhere in the HTML or CSS that could cause these rules to be ignored.)

                           

                          The most likely cause is therefore specificity. Classes score lower than IDs, so the changed rules may not have sufficient weight to override existing styles.

                           

                          Looks like

                           

                          .compadr {
                            text-align: center;
                            font-size: 9px;
                          }
                          

                           

                          is losing out to

                           

                          .report-1 table th {
                            font-weight: 600;
                            text-align: left;
                          }
                          

                           

                          Try increasing the specificity of the class-based rules by adding additional selectors:

                           

                          .report-1 table .compadr {
                            text-align: center;
                            font-size: 9px;
                          }
                          
                          • 10. Re: question on column alignment in custom row template
                            anand_gp

                            Hello Fac,

                             

                            Good Morning!

                            Really appreciate your help on creating and showing it on a sample module.  However, I tried creating similar example myself and not getting expected result (the font sizes).  What I did (on apex 4.2.6) -

                             

                            The row template which is working good (just showing 1st one here).  And yes, thanks for showing how to define table as table and rest as paragraph ("header" / "footer") -

                            <section class="invoice" id="in-#CUSTOMER_ID#-#ORDER_ID#"> 

                              <header> 

                                <h1>#G_COMPANY_NAME#</h1> 

                                <p>#G_COMPANY_ADDRESS#</p> 

                                <h2>Invoice No.: #INVOICE_NO#</h2>

                                <dl> 

                                  <dt>Date<dd>#INVOICE_DATE# 

                                  <dt>Customer<dd>#CUSTOMER_NAME#

                                  <dt>Address<dd>#COMMUNICATION_ADDRESS#

                                </dl> 

                              </header> 

                              <table> 

                                <thead> 

                                  <tr><th>S/N<th>BRAND NAME<th>Quantity<th>RATE<th>AMOUNT 

                                <tbody> 

                             

                                  <tr><td>#RN#<td>#BRAND_NAME#<td>#QUANTITY#<td>#RATE#<td>#AMOUNT# 

                             

                                <tfoot> 

                                  <tr><th>Total<td><td>#TOTAL_QUANTITY#<td><td>#TOTAL_AMOUNT# 

                              </table> 

                              <footer> 

                                <small><strong>Terms:</strong> We declare that this invoice shows the actual price of the goods described & that all particulars are true & correct.</small> 

                              </footer> 

                            </section>

                             

                             

                            I used inline CSS the exact copy what you shared -

                             

                             

                            @media screen { 

                              /* Show "page breaks" visually on screen. */ 

                              .invoice { 

                                margin-bottom: 4em; 

                                padding-bottom: 4em; 

                                border-bottom: 1px solid #999; 

                              } 

                             

                            @media print { 

                              /* Remove background color and set smaller base font size on printed invoices. */ 

                              body { 

                                background-color: #fff; 

                                font-size: 12pt; 

                              } 

                              /* Print each invoice on a new page. */ 

                              .invoice { 

                                page-break-after: always; 

                              } 

                             

                            /* Add vendor "company logo". */ 

                            .invoice header:before { 

                              display: block; 

                              float: left; 

                              margin-left: -1rem; 

                              padding-top: 2rem; 

                              color: #e95b54; 

                              font-family: "Font APEX Large"; 

                              font-size: 6rem; 

                              content: "\ea5e"; 

                            /* Format vendor company name and address. */ 

                            .invoice h1 { 

                              font-weight: 200; 

                            .invoice h2 { 

                              font-weight: 300; 

                            .invoice h1, 

                            .invoice header p { 

                              margin: 0 0 0 5rem; 

                              line-height: 1.2; 

                            .invoice header p { 

                              font-size: 0.9em; 

                             

                            /* Format invoice number. */ 

                            .invoice h2 { 

                              margin: 1em 0; 

                             

                            /* Format customer information. */ 

                            .invoice dt { 

                              float: left; 

                              font-weight: 500; 

                            .invoice dd { 

                              margin: 0 0 0.75em 5.5em; 

                             

                            /* Format table containing invoice lines. */ 

                            .invoice table { 

                              margin: 4em 0 2em; 

                              width: 100%; 

                              border-collapse: collapse; 

                              font-size: smaller; 

                            /* Format invoice line table headings and cells. All columns except one show numbers, so the default is to align them to the right. */ 

                            .invoice th, 

                            .invoice td { 

                              border-bottom: 1px dotted #ccc; 

                              padding: 0.2em 1em; 

                              text-align: right; 

                            .invoice thead, 

                            .invoice tfoot { 

                              border-top: 1px solid #ccc; 

                              border-bottom: 1px solid #ccc; 

                            /* Set a fixed width for the line number column. */ 

                            .invoice tr :nth-child(1) { 

                              width: 7.5em; 

                            /* Align the product name text column to the left. */ 

                            .invoice tr :nth-child(2) { 

                              text-align: left; 

                             

                             

                            And I see the display as below.  No font size effects as shown in your example.

                             

                             

                             

                            I added font size at below clause, just to cross verify if things are working or not and it works -

                             

                            /* Format vendor company name and address. */ 

                            .invoice h1 { 

                              font-size: 20px;

                              font-weight: 200; 

                             

                            I the output is -

                             

                             

                            Can you please let me know what's the reason behind this.  I could not see any other clause which resets the effect of font size set at "h1".   I see multiple font related attributes in the CSS code and looks like none of them are really showing any effect on the screen.  Please clarify.  Thanks.

                             

                            And thanks for sharing link. 

                            https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units

                            I gone through many of the topics. Now more clear about defining CSS.

                             

                            Best Regards,

                            -Anand