Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jeremy on Nov 05, 2008 09:38
open dhtmlx forum
width=100% problem with table

Had a problem that only affected the latest version of Mozilla Firefox: (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3 (.NET CLR 3.5.30729))

Basically the width of the header of my dhtmlx grid table expanded to the entire width of the frame it was in, instead of aligning over the existing columns. I was able to fix this by editing the dhtmlxgrid.js file as follows (see inline comments). I still have no idea why this broke or why it's "fixed" now.

this.hdr = document.createElement("TABLE");
this.hdr.style.border="1px solid gray";
this.hdr.cellSpacing = 0;
this.hdr.cellPadding = 0;
if((!_isOpera)||(_OperaRv>=9))
this.hdr.style.tableLayout = "fixed";
this.hdr.className = "hdr";
this.hdr.width = 50; //"100%"; changed this from 100% on 11/04/08 due to header taking the entire width of the box instead of taking
//...just the width of existing columns. Not sure exactly why this broke, or why this fixes the problem. -JW

Can you please tell me if this is a Mozilla Firefox problem, and if so, how to inform them about it? I'm afraid I don't really have even the right terminology to clue them in to what's broken. Or, if this is a dhtmlx grid problem, please tell me more about it and why it's happening, and whether my "fix" will continue to work in the future. :)
Answer posted by Support on Nov 06, 2008 02:29
Unfortunately issue can't be reconstructed locally ( FF3 introduced some minor changes in table handling, which may affect grid, but none of them so straight ) 
Can you please provide some more info about problematic case
 - which doctype used for page
 - how size defined for grid's container
 - is any kind of auto-size mode used

If possible - please provide any kind of sample where issue can be reconstructed. ( you can send it directly to support@dhtmlx.com
Answer posted on Nov 06, 2008 13:51

Here's what I have in the code.  Sorry I'm not terrifically familiar with how the grids actually work, so I have added all the related code I could find.  I will try to list the code in order.  Please note there is other code in between some of what follows, but I have determined that other code should not be related to the grid in question.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

mygridFC = new dhtmlXGridObject('gridbox3');  //this is the grid in question.

//other code in between

mygridFC.enableMultiline(true);

mygridFC.setColVAlign("top");

mygridFC.setColAlign("center");

mygridFC.enableColumnMove(true,"false,true,true,true,true,true");

mygridFC.init();

var tmpItem2 = getItem('patientflowchartgrid');

if(tmpItem2 != null && tmpItem2.value.length > 0)

{

mygridFC.loadXML("XML Templates/gridDataFlow.xml");  //if there is data in grid, load the appropriate xml template

}else

{

mygridFC.loadXML("XML Templates/gridDataFlowShort.xml");  //if there is no data in the grid, load the appropriate xml template

}

//other code in between

<tr>

<td>

<div id="gridbox3" width="900px" height="360px" style="background-color:white;"></div>  //I believe this is the "grid's container"

<asp:TextBox ID="patientflowchartgrid" Height="1" Width="1" TextMode=MultiLine Wrap=false runat="server"></asp:TextBox>  // I guess this would have to be the grid contents?  I would be curious to know.

<td>

<tr>

//griddataflow.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE rows SYSTEM "dhtmlxgrid.dtd">
<rows>
    <head>
      <column width="250" type="ro" align="left" color="#FFAA00" sort="na">Description  </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <column width="95" type="ed" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <settings>
        <colwidth>px</colwidth>
      </settings>

    </head>
  <row id="1" selected="0">
    <cell>Time</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="2" selected="0">
    <cell>BP Systolic (mmHg)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="3" selected="0">
    <cell>BP Diastolic (mmHg)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="4" selected="0">
    <cell>Pulse Rate (/min)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="5" selected="0">
    <cell>Respiratory Rate (/min)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="6" selected="0">
    <cell>Consciousness</cell>
    <cell type="co"></cell>
    <cell type="co"></cell>
  </row>
  <row id="7" selected="0">
    <cell>ECG</cell>
    <cell type="co"></cell>
    <cell type="co"></cell>
  </row>
  <row id="8" selected="0">
    <cell>Oxygen (l/min.)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="9" selected="0">
    <cell>Pulse Oximetry (%)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="10" selected="0">
    <cell>Intubation</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="11" selected="0">
    <cell>Capnometry (mmHg)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="12" selected="0">
    <cell>Pain Scale (_/10)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="13" selected="0">
    <cell>IV Fluids (ml)</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
  <row id="14" selected="0">
    <cell>DC Shock (joules) / TCP</cell>
    <cell type="ed"></cell>
    <cell type="ed"></cell>
  </row>
</rows>

//griddataflowshort.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE rows SYSTEM "dhtmlxgrid.dtd">
<rows>
    <head>
      <column width="250" type="ro" align="left" color="#FFAA00" sort="na">Description  </column>
      <column width="95" type="co" align="center" color="#FFAA00" sort="na">
        TIME
      </column>
      <settings>
        <colwidth>px</colwidth>
      </settings>

    </head>
  <row id="1" selected="0">
    <cell>Time</cell>
    <cell type="ed"></cell>
  </row>
  <row id="2" selected="0">
    <cell>BP Systolic (mmHg)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="3" selected="0">
    <cell>BP Diastolic (mmHg)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="4" selected="0">
    <cell>Pulse Rate (/min)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="5" selected="0">
    <cell>Respiratory Rate (/min)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="6" selected="0">
    <cell>Consciousness</cell>
    <cell type="co"></cell>
  </row>
  <row id="7" selected="0">
    <cell>ECG</cell>
    <cell type="ed"></cell>
  </row>
  <row id="8" selected="0">
    <cell>Oxygen (l/min.)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="9" selected="0">
    <cell>Pulse Oximetry (%)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="10" selected="0">
    <cell>Glucometry</cell>
    <cell type="ed"></cell>
  </row>
  <row id="11" selected="0">
    <cell>Capnometry (mmHg)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="12" selected="0">
    <cell>Pain Scale (_/10)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="13" selected="0">
    <cell>IV Fluids (ml)</cell>
    <cell type="ed"></cell>
  </row>
  <row id="14" selected="0">
    <cell>DC Shock (joules) / TCP</cell>
    <cell type="ed"></cell>
  </row>
</rows>

 

 

 

 

Answer posted by Support on Nov 11, 2008 05:34
Please check attached sample and uses the same js and xml code. ( did it miss something? )
It works correctly in both FF3 and FF2 without any special modifications. 
Attachments (1)
Answer posted on Nov 12, 2008 09:57

Thanks.  Am I to understand that you were not able to reproduce the problem? 

You sent a different version of dhtmlxgrid.js.  I compared your version to mine and there are substantial differences.  I would imagine I'm using an older version. 

This is not a huge issue for me; I was sharing this information mostly as an FYI to you regarding the issue I experienced with Firefox.  If I see more failures going forward, perhaps I'll consider using a newer version of the dhtmlx grids. 

Answer posted by Support on Nov 13, 2008 06:12
Version in a sample is a dhtmlxgrid 2.0.  It has some difference in relation to dhtmlxgrid 1.6 or earlier related to global sizing , which may resolve original problem. 
( used version is not compressed, it is equal to sources/dhtmlgrid.js from dhtmlxgrid 2.0 package ) 
Answer posted on Nov 13, 2008 09:57
Thanks.   How do I tell what version of dhtmlxgrid I'm using? 
Answer posted by Support on Nov 13, 2008 10:23
Check the first line of dhtmlxgrid.js file ( or any other js file ) , it must contain info about version and build.