Why the ActiveWidgets dont work in FireFox 2.0

Hello guys

I have a dificult to implement ActiveWidgets 1.0.2 grid control in FireFox 2.0, but it works perfect at FF 1.5, IE 6.0.

Can you helpme?

Thanks

Esteban

November 1,

What is the problem exactly? So far I don't know of any 1.0.2 problems which are FF 2.0 specific.

Alex (ActiveWidgets)

November 1,

The grid objet is created correctly, it take the correct width and height especified at the style. But, in an instant it show ok (miliseconds), and then it only show the record header width.

Here my code:

<html>
<head>
<title>Catastro de Bloqueos</title>
<script language="javascript" type="text/javascript" src="../js/grid.js"></script>
<link href="../css/estilos.css" rel="stylesheet" type="text/css">
<link href="../css/grid.css" rel="stylesheet" type="text/css">
<style>
    /* Estilos de los Tabs */
    .celdas {
        width=74px;
        height=22px;
        text-align:center;
        vertical-align:middle;
        background-image:url(../imagenes/tab_gris.gif);
        background-repeat:no-repeat;
        background-position:center;
    }

    .c_tex {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:11px;
    }
    
    /* Estilos de las Capas */
    #incluir, #alterar, #consultar, #excluir, #imprimir 
    {
        width:515px; 
        height:150px; 
        border-style:solid; 
        border-width:1px; 
        border-color:#7A7A7A; 
        background-color: #F8FAFC; 
        visibility: hidden; 
        position:absolute; 
        left:3; 
        top:24; 
        padding:0; 
        z-index: 2;
    }	
</style>
<style>
    /* Estilos del Grid */
        .active-controls-grid {height: 122px; width:513px; border:none; font: menu;}

        .active-column-0 {width: 60px; text-align:right;}
        .active-column-1 {width: 220px;}
        .active-column-2 {width: 190px;}
        .active-column-3 {width: 0px;}
        .active-selection-true, .active-selection-true .active-row-cell { color: #FFFFFF!important;	background-color: #4577C9!important;}

        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body style=" vertical-align: bottom" leftmargin="2" topmargin="2"  onhelp = "return false;">
<div id="tabs" style='position:absolute; left:2; top:2;' align='center'>
<table height="21" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td id="cel1" width="74" onClick="reset_bg(1);" class="celdas" ><div class="c_tex">Incluir</div></td>
    <td id="cel2" width="74" onClick="reset_bg(2);" class="celdas" ><div class="c_tex">Alterar</div></td>
    <td id="cel3" width="74" onClick="reset_bg(3);" class="celdas" ><div class="c_tex">Consultar</div></td>
    <td id="cel4" width="74" onClick="reset_bg(4);" class="celdas" ><div class="c_tex">Excluir</div></td>
    <td id="cel5" width="74" onClick="reset_bg(5);" class="celdas" ><div class="c_tex">Grabar</div></td>
    <td id="cel6" width="74" onClick="reset_bg(6);" class="celdas" ><div class="c_tex">Imprimir</div></td>
    <td id="cel7" width="74" onClick="reset_bg(7);" class="celdas" ><div class="c_tex">Cerrar</div></td>
  </tr>
</table>
</div>
<div id="consultar" style="visibility: visible;" >
  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><form name="consul_form" id="consul_form" method="post" action="../cadope/lista_java.php" onSubmit="return false;" style="padding:0; margin:0">
        <table width="495"  border="0" cellspacing="0" cellpadding="2">
          <tr>
            <td width="50">
              <input name="cmd_lista" type="button" class="botones" id="cmd_lista" style="width:60; height:19; padding-left:2px;" value="F9 Lista " onClick="_ver('L');"></td>
            <td width="50">
              <input name="cmd_ficha" type="button" class="botones" id="cmd_ficha" style="width:63; height:19; padding-left:2px;" value="F10 Ficha" onClick="_ver('F');"></td>
            <td width="1" bgcolor="#666666" style="padding:0"></td>
            <td width="36" valign="middle" class="Eti" style="font-size:11px">&nbsp;Filtro:</td>
            <td width="90"><select name="filtro" class="Form" id="filtro" style="width:80px; height:18px ">
              <option value="1">C&oacute;digo</option>
              <option value="2">Descripci&oacute;n</option>
              <option value="3">Empresa</option>
            </select></td>
            <td class="Eti" style="font-size:11px; text-align:right">Cond.:</td>
            <td width="144"><input name="condicion" type="text" id="condicion" style="width:155px" onkeypress="envia_consulta(this, event);"></td>
            <td width="1"><input name="buscar" type="button" class="botones" id="buscar" style="width:50; height:19" value="Buscar" onClick="consultar();"></td>
          </tr>
        </table>
      </form></td>
    </tr>
    <tr>
      <td bgcolor="#6E6E6E" style="height:1px"> </td>
    </tr>
    <tr>
      <td style="height:1px"> </td>
    </tr>
    <tr>
      <td>
      	<div id="capa_lista" style="width:513px; height:122px; visibility: inherit; position:absolute; left:0; top:26; padding:0; z-index: 3;">
        <script>
            var datos = [["1","","",""],
                         ["2","","",""],
                         ["3","","",""]];
        
            var x_grid = new Active.Controls.Grid; 

            //	set number of rows/columns
            x_grid.setRowProperty("count", 3);
            x_grid.setColumnProperty("count", 4);

            var columns = ["Código", "Descripción","Empresa",""];

            //	provide cells and headers text
            x_grid.setDataProperty("text", function(i, j){return datos[i][j]});
            x_grid.setColumnProperty("text", function(i){return columns[i]});
        
            //x_grid.getTemplate("row", 0).setStyle("background-color", xcol);//	set headers width/height
            x_grid.setRowHeaderWidth("22px");
            x_grid.setColumnHeaderHeight("20px");

            //	escribe el objeto en la pagina
            document.write(x_grid);

            // Selecciona el primer Registro
            x_grid.setSelectionIndex(0);
        </script>	
        </div>
        <div id="capa_ficha" style="width:513px; height:122px; visibility: hidden; position:absolute; left:0; top:26; padding:0; z-index: 3;">
            <form name="form_ficha" method="post" action="" style="padding:0; margin:0">
              <table width="100%" border="0" cellspacing="0" cellpadding="3">
                <tr>
                  <td style="height:15px"></td>
                </tr>
                <tr>
                  <td height="32"></td>
                  <td height="32" class="Eti">Empresa</td>
                  <td height="32" class="Eti">:</td>
                  <td height="32"><input name="f_empresa" type="text" id="f_empresa" style="width:220px;" readonly="true"></td>
                </tr>
                <tr>
                  <td width="15" height="32"> </td>
                  <td width="123" height="32" class="Eti">C&oacute;digo </td>
                  <td width="5" height="32" class="Eti">:</td>
                  <td width="335" height="32"><input name="f_codigo" type="text" id="f_codigo" style="width:40px;" readonly="true"></td></tr>
                <tr>
                  <td height="32"> </td>
                  <td height="32" class="Eti">Descripci&oacute;n</td>
                  <td height="32" class="Eti">:</td>
                  <td height="32"><input name="f_descri" type="text" id="f_descri" style="width:300px;" readonly="true"></td>
                </tr>
              </table>
            </form>
        </div>
      </td>
    </tr>
  </table>
</div>
<div id="info" style="width:517px; height:20px;  visibility: visible; position:absolute; left:3px; top:175px; padding:0; z-index: 1;">
  <table width="516" height="20" border="1" cellpadding="0" cellspacing="0">
    <tr bgcolor="#F8FAFC" class="c_tex">
      <td width="67"><center>F1: Incluir</center></td>
      <td width="70"><center>F2: Alterar</center></td>
      <td width="80"><center>F3: Consultar</center></td>
      <td width="70"><center>F4: Excluir</center></td>
      <td width="71"><center>F5: Grabar</center></td>
      <td width="80"><center>F6: Imprimir</center></td>
      <td width="67"><center>F7: Cerrar</center></td>
    </tr>
  </table>
</div>
<div id="grabar" style="width:1px; height:1px; visibility:hidden; z-index:1;"></div>
<div id="cerrar" style="width:1px; height:1px; visibility:hidden; z-index:1;"></div>
</body>
</html>

Thank you from already, very nice

Esteban

November 1,

Really the control grid works correctly, when I execute the examples included in ActiveWidgets 1.0.2 package, it works correctly in FF 2.0, but on having tried my codes, these do not work.

Can you helpme?

Thank you from already, very nice!

Esteban

November 1,

Can someone help me?

I don´t know how to resolve this trouble.

Thanks

Esteban

November 3,

I seem to remember experiencing the same problem with Firefox and version 1.

It disappeared when I started using AW 2.0.

Is that an option?

Karl Thoroddsen

November 3,

Thank you for your reply Karl, but at today it isn't a option, my project is just starting and it isn't profitable yet. I can't buy the 2.0 version now.

Someone has another suggest?

Thanks

Esteban

November 3,

Does it work in the AW 2.0.1 trial?

Otherwise the only recommendation I can give is to compare the DOMs in FF 1.5 and 2.0.

Karl Thoroddsen

November 3,

Good News

I have achieved that there works ActiveWidgets 1.0.2, the problem was that the files of styles (on xp folder) had problem of corruption, apparently the antivirus modify it.

I Replace the files with original and then it work.

Thanks to all for the help.

Regards

Esteban Maidana

November 3,

This topic is archived.

Why the ActiveWidgets dont work in FireFox 2.0

See also:

Search

New Data Grid

Version 2