6 Replies Latest reply on May 22, 2017 11:20 PM by J M-Oracle

    IR column width/data alignment

    Scott Wesley

      Occasionally when using Interactive Reports I notice the column headings don't always line up with the data.

       

      I've seen this most often when there is an image involved, but it's not completely predictable.

      ir_column_alignment.png

      If I click 'Go' again on the IR toolbar, the columns line up again.

       

      If I toggle my filter, refresh the report, resize browser etc, I may see this issue reoccur.

       

      I though John Snyders may have built in a function as part of the framework, that we may be able to re-apply to line up all the cell widths, perhaps after region refresh?

      The closest I've seen are these posts, but I didn't see anything that may help.

      Interactive Grid column widths – HardLikeSoftware

      APEX 5.0 Interactive Report Customization – HardLikeSoftware

      Plenty in the forums about specifying the exact column width, but not making sure the table data cells line up with the headers.

       

      I thought there may be something like

      $("#customer_ir").interactiveReport("line-up-columns");

      Or is this wishful thinking? Perhaps there is another solution. I'm pretty sure people would have encountered this.

       

      I'm currently on APEX 5.0.1.00.06, predominantly using Chrome.

       

      Scott.

        • 1. Re: IR column width/data alignment
          müller

          Hey Scott Wesley,

          did you hide a Column in your Interactive Report with CSS?

          I mention that i have a Image in Interactive Report too. and don't have this Issue.

          This Issue is only happen if i hide a column in the Report with Css

           

          Regards

          Müller

          • 2. Re: IR column width/data alignment
            Scott Wesley

            Hmm, not hide, but you raise a good point. There is CSS covering the image.

             

            .mugs {
              max-height:50px;
              border-radius: 100px;
            }
            
            #col-mug {width:75px;}
            

             

            Where the column definition is

             

            '<img class="mugs" src="/vbs/rest/image/user/'||u.login_id||'" />'
            

             

            Another place where this occurs, hence spawning the question, involves images with a constrained size.

             

            No doubt the set width is an issue, but how is this different to data that varies. Surely there is something within the framework that dynamically sizes the columns?

            I'll try play that again, see if it is necessary.

            • 3. Re: IR column width/data alignment
              Py.P0

              Hi swesley_perth,

              I had a problem very similar to yours, and I "solved" it by switching the IR attribute "Heading" from "Fixed To: Page" to "Fixed To: None". I'm aware that It's just a workaround, and that it may reduce usability of the IR with medium/big tables, but in my case, it helped. You could also try to set it to "Fixed To: Region", maybe.

              Hope this may help you,

              best regards,

               

              Filippo

               

              • 4. Re: IR column width/data alignment
                Jeff E

                FWIW, when I ran across this I added an After Refresh Dynamic Action and run some javaScript code to resize the headers:

                 

                // fix the column headers 
                $("#customer_ir-report .t-fht-thead tr:first th .t-fht-cell").each(function(i,o){
                 $(o).css("width",$("#customer_ir-report .t-fht-tbody .t-fht-cell").eq(i).width()); 
                });
                
                • 5. Re: IR column width/data alignment
                  Jeffrey Kemp

                  I've seen this often after upgrading to Apex 5.0, in Chrome and Firefox, on ordinary IRs with no strange content. Doesn't seem to occur in IE.

                   

                  The problem certainly seems linked to the highly desirable Heading Fixed to Page setting.

                   

                  Any refresh (e.g. after doing something in the Actions menu) fixes the columns but next page refresh causes it to happen again.

                   

                  Haven't found a solution yet.

                  • 6. Re: IR column width/data alignment
                    J M-Oracle

                    A slight modification of the solution provided by Jeff E seems to work for me in APEX 5.1 using an IR with Fixed to Page headers:

                     

                    Assign a static ID to the IR, create an After Refresh Dynamic Action for the IR region using the below JavaScript (doesn't need to fire on page load). Replace #STATICID in both locations of the JavaScript below with the static ID of your IR region.

                     

                    // fix the column headers
                    $("#STATICID .t-fht-thead tr:first th .t-fht-cell").each(function(i,o){
                    $(o).css("width",$("#STATICID_ir .t-fht-tbody .t-fht-cell").eq(i).width());
                    });