One Column in datatable is displayed twice

tronlives · August 2014

Hello Allen,
now almost everything works despite one little thing.
the first column in my table is displayed twice.
the problem disappears when i use the browser scroll bar. But i have to fix it.

I send you an email with attachments to desribe that problem.
Please advice.

Best Regards,
Benjamin

tronlives · August 2014

Same Problem on a another report page. This time, it is a whole table (Without data content) which appears duplicated.
here is the xhtml source code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:components="http://java.sun.com/jsf/composite/components"      
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head> 
    </h:head>
    <h:outputScript name="js/jquery-1.11.1.min.js"/>                
    <h:outputScript name="js/jquery.dataTables.js"/>
    <h:outputScript name="js/dataTables.fixedHeader.min.js"/>
    
    <h:body>
        <h1>
            <h:outputFormat value="#{messages['reportResult.head.label']}" styleClass="SerchResultLabel">
                <f:param  value="#{Reporter.reportResult.rowsFound}" />
            </h:outputFormat> 
        </h1> 

        <ui:include src="../tablemanager/columnManager.xhtml"/>
        
        <br>
            <h:commandButton title="#{messages['buttonSortByTransactionSequenceTooltip']}" value="#{messages['buttonSortByTransactionSequence']}" action="#{Reporter.actionSortByTransactionSequence}"/>        
            <h:commandButton title="#{messages['buttonDeleteRowTooltip']}" value="#{messages['buttonDeleteRow']}" action="#{Reporter.actionDeleteUnselectedRow}"/>
            <h:commandButton title="#{messages['buttonDeleteUnselectedRowTooltip']}" value="#{messages['buttonDeleteUnselectedRow']}" action="#{Reporter.actionDeleteSelectedRow}"/>
        </br>
        
        <f:subview rendered="#{!Reporter.filterOptions.hideResults}">
        
        <components:datatable id="dynamicReportTableID" name="statistic_report." 
            showRowHeader="true"
            sortable="true"
            selectable="true"       
            reportDataValue="#{Reporter.reportResult}"
            reportInfo="#{Reporter.currentReportInfo}" 
            sortAction="#{Reporter.sortColumnListenerAction}"
            cellSelectAction="#{Reporter.cellSelectAction}">
        </components:datatable>

        </f:subview>
        <h:outputScript>
  $ = jQuery;
    // Then you can use it
    

    $(document).ready(function() {
   
    if(jQuery().DataTable()) {
    var newPara = document.createElement( 'thead' );
    $('#datatable > tbody:first').wrapInner(newPara).children().unwrap();
    var table = $('#datatable').DataTable({paging: false , language:{search: "Filter:"}});
    new $.fn.dataTable.FixedHeader( table,{"left": true} );
    }
    });
    
    $(window).scroll(function() {
  
    }
    
    )
    
    
    
    $('#tabFilterPanelIdHeader').on("click", function() {
    $("div[class*='Cloned']").remove();
    });   
     $('#tabReportPanelIdHeader').on("click", function() {
    var secondtable = $('#datatable').dataTable( {"destroy": true, paging: false, language:{search: "Filter:"}});
    new $.fn.dataTable.FixedHeader( secondtable,{"left": true} );
    });
</h:outputScript>
    </h:body>
</html>

allan · September 2014

Hi Benjamin,

Thanks for your question and the e-mail with the screenshot. I've just sent a reply to your e-mail, but of rate benefit of anyone else reading this:

It looks like there is a styling problem with the table. Possibly there is a margin-top or position applied to the CSS of the inner table element. Using the "Inspect Element" option of your browser would give the ability to confirm if this is the case.

To be able to debug myself I would need to be able to access the running page so I can see all of the CSS applied.

Regards,
Allan

tronlives · September 2014

Hi Allen, i have checked the DOM.
Here is the snippet:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="ms-ng" style="background:#EFF1F3;" onload="reportOnload()" abprocessed="1">
<form id="ReporterFormId" enctype="application/x-www-form-urlencoded" action="/AsStatisticsReporter/faces/rvs/rvsSpecificReport.xhtml" method="post" name="ReporterFormId" abhfe="1" abaction="/AsStatisticsReporter/faces/rvs/rvsSpecificReport.xhtml" abhost="localhost:8080" aburl="/AsStatisticsReporter/faces/rvs/rvsSpecificReport.xhtml" abineprocessed="true" abinetype="unknown">
<div id="ms-header">
<table style="position:absolute;left:0px;top:25px;">
<input type="hidden" value="1" name="ReporterFormId_SUBMIT">
<input id="javax.faces.ViewState" type="hidden" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBzKWwCAAB4cAAAAAJ1cQB+AAAAAAACcHNyABFqYXZhLnV0aWwuSGFzaE1hcAUH2sHDFmDRAwACRgAKbG9hZEZhY3RvckkACXRocmVzaG9sZHhwP0AAAAAAABh3CAAAACAAAAARdAAmUmVwb3J0ZXJGb3JtSWQ6al9pZDEzMjk4NTU0OTBfNDEzZjAwZWJ1cQB+AAAAAAACcHNyACtqYXZheC5mYWNlcy5jb21wb25lbnQuX0F0dGFjaGVkRGVsdGFXcmFwcGVyQazTmWzG/uICAAFMABNfd3JhcHBlZFN0YXRlT2JqZWN0dAASTGphdmEvbGFuZy9PYmplY3Q7eHB1cQB+AAAAAAABc3EAfgAHdAAfamF2YXgudmFsaWRhdGlvbi5ncm91cHMuRGVmYXVsdHQAJlJlcG9ydGVyRm9ybUlkOmpfaWQxMzI5ODU1NDkwXzQxM2YwMDVkdXEAfgA...xqYXZhL2xhbmcvQ2xhc3M7TAATX3dyYXBwZWRTdGF0ZU9iamVjdHEAfgAIeHB2cgA9Y29tLmRhaW1sZXIuYXNzdGF0cy5yZXBvcnRlci53ZWIuY29udmVydGVyLk1heExlbmd0aENvbnZlcnRlcgAAAAAAAAAAAAAAeHBwdAAhUmVwb3J0ZXJGb3JtSWQ6dGFyZ2V0Q29sdW1uTGlzdElkdXEAfgAAAAAAAnBzcQB+AAd1cQB+AAAAAAABc3EAfgAHcQB+AAx0ACVSZXBvcnRlckZvcm1JZDpqX2lkNDY3Njg0MTExXzMxMWEwYTkwdXEAfgAAAAAAAnBzcQB+AAd1cQB+AAAAAAABc3EAfgAHcQB+AAx0AB9SZXBvcnRlckZvcm1JZDp1c2VyQ29sdW1uVXBkYXRldXEAfgAAAAAAAnBzcQB+AAd1cQB+AAAAAAABc3EAfgAHcQB+AAx4dAAcL3J2cy9ydnNTcGVjaWZpY1JlcG9ydC54aHRtbA==" name="javax.faces.ViewState">
</form>
<div id="textarea_simulator" style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>
<div class=" FixedHeader_Cloned fixedHeader FixedHeader_Header" style="position: absolute; top: 386px; left: 204px; z-index: 104; width: 9532px;">
<div class=" FixedHeader_Cloned fixedLeft FixedHeader_Left" style="position: absolute; top: 386px; left: 204px; z-index: 102; width: 47px;">
</body>
</html>

The problem is simple: The cloned FixedHeader exists twice. Within the table where it does belong, but also after "Textarea_simulator". It has been duplicated. Similiar to the problem i had with the tabs. It automatically disappears when i use the browser scrollbar.

Best Regards,
Benjamin

allan · September 2014

Hi Benjamin,

Are you able to give me a link to the page please? Unfortunately I can't debug what the problem is from the above as it doesn't contain all of the information required.

Thanks,
Allan

tronlives · September 2014

Hello Allan, i have narrowed the problem:

The table is duplicated:
See this one:

DIV style="Z-INDEX: 104; POSITION: absolute; WIDTH: 9414px; TOP: 360px; LEFT: 204px" class=" FixedHeader_Cloned fixedHeader FixedHeader_Header">
<TABLE style="MARGIN: 0px; WIDTH: 9414px" class="result-table dataTable no-footer" role="grid" aria-describedby="datatable_info" border="1" jQuery111105112775152261991="11">
<THEAD>
<TR role="row">
<TH style="WIDTH: 7px" class="result-table-header sorting_asc" aria-controls="datatable" aria-sort="ascending" aria-label="#: activate to sort column ascending" jQuery111105112775152261991="356">

#
and that one:

<div class="dataTables_wrapper no-footer" id="datatable_wrapper" style="position: relative;">

Your plugin is creating it twice. I do not see a CSS problem here.

Best Regards,
Benjamin

allan · September 2014

Hi Benjamin,

The elements are shown on the page twice because you have the FixedHeader plug-in enabled. The way it works is to clone the original table for the fixed elements and place them visually on top of the original table - thus giving the "fixed" aspect.

The reason why I think it is a CSS issue is that something is moving the position of the cloned element - but what exactly is doing that I am not sure.

In your screenshot it shows that you have the first column fixed. Do you have the header fixed as well? If not, I would suggest using FixedColumns rather than FixedHeader, as it is more suited for fixing columns.

Regards,
Allan

tronlives · September 2014

Hi Allan, i still have this problem. I have sent you my CSS Files, the generated HTML Stuff and the screenshot.

I hope you can tell me what needs to be changed.

Best Regards,
Benjamin

allan · September 2014

Hi Benjamin,

Thanks for your e-mail. I sent you a reply shortly after I received it but haven't heard back since. Just adding a comment here in case you see this one first.

Regards,
Allan

One Column in datatable is displayed twice

One Column in datatable is displayed twice

Answers

Howdy, Stranger!

Categories

DataTables

One Column in datatable is displayed twice

One Column in datatable is displayed twice

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables