ActiveWidgets • How to add a input field above grid and position grid below it. • java html report

I have tried DIVs and <P> like in the two grid example, but no luck. Grid overlaps my input field. I do not want to use iframes.

Here is what I want to add above the grid....

<form name="title" id="title">

  <INPUT TYPE=TEXT NAME="GridTitle" ID="GridTitle" TITLE="" VALUE="Type report title here..." CLASS="transparent" MAXLENGTH=67 STYLE="position:absolute; top:.15in; left:.1in; width:9.2in; height:0.250in; font-family: Arial; font-size: 14.00pt; font-weight: 400; font-style: normal;">

  <button onclick=printreport(); STYLE="position:absolute; top:.15in; left:9.5in;">Print</button>

</form>



<style>

  .transparent  {background: Transparent; border: none}

  .position {position: relative; top 30px}

</style>

<SCRIPT LANGUAGE="JavaScript1.2">

//document.title.GridTitle.focus();

//document.title.GridTitle.select();

function printreport(){

  print();

}

</script>

Seems that no matter what I add the grid seems to be start from the top and overlaps my input field, instead of starting below the input field.

Any help would be appreciated....thanks!

Here is my whole code....

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

<HTML>

  <HEAD>

  <META http-equiv="content-type" content="text/html; charset=windows-1250">

  <META name="generator" content="PSPad editor, www.pspad.com">

  <TITLE></TITLE>

  <LINK href="ActiveWidgets/runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" >

  <SCRIPT src="ActiveWidgets/runtime/lib/grid.js"></script>

    <!-- grid format -->

    <style>

      .active-controls-grid {height: 100%; font: menu;}



        .active-column-0 {width:  80px;}

        .active-column-1 {width: 200px;}

        .active-column-2 {text-align: right;}

        .active-column-3 {text-align: right;}

        .active-column-4 {text-align: right;}



        .active-grid-column {border-right: 1px solid threedlightshadow;}

        .active-grid-row {border-bottom: 1px solid threedlightshadow;}

        

    @media print

{

    .active-scroll-bars,

    .active-scroll-left,

    .active-scroll-corner {

       display: none;

    }



   .active-scroll-top {

      position: absolute;

      overflow: visible;

      width: auto!important;

      height: auto!important;

  }            

        

   .active-controls-grid {

      overflow: visible;

      height: auto;

      width: auto;

   }

    

   .active-scroll-data {

      position: absolute;

      overflow: visible;

      width: auto!important;

      height: auto!important;

   }

} 

    </style>

<SCRIPT LANGUAGE="JavaScript1.2">



    var myColumns = dialogArguments.Xstring;

    var myData = dialogArguments.ctext;

</script>

  </HEAD>

  <BODY>

<p>

<form name="title" id="title">

  <INPUT TYPE=TEXT NAME="GridTitle" ID="GridTitle" TITLE="" VALUE="Type report title here..." CLASS="transparent" MAXLENGTH=67 STYLE="position:absolute; top:.15in; left:.1in; width:9.2in; height:0.250in; font-family: Arial; font-size: 14.00pt; font-weight: 400; font-style: normal;">

  <button onclick=printreport(); STYLE="position:absolute; top:.15in; left:9.5in;">Print</button>

</form>



<style>

  .transparent  {background: Transparent; border: none}

  .position {position: relative; top 30px}

</style>

<SCRIPT LANGUAGE="JavaScript1.2">

document.title.GridTitle.focus();

document.title.GridTitle.select();

function printreport(){

  print();

}

</script>

</p>



<SCRIPT LANGUAGE="JavaScript1.2">



    // create grid object

    var obj = new Active.Controls.Grid;



    // set number of columns/rows

    obj.setRowCount(myData.length-1);

    obj.setColumnCount(myColumns.length);



    // link to cell text

    obj.setDataText(function(i,j){return myData[i][j]});

    obj.setColumnProperty("text", function(i){return myColumns[i]});

    document.write(obj);

    

    obj.setDataProperty("value", function(i,j){

    var text = "" + this.getDataText(i, j);

    if (text.match(/^\s*$/)) {return ""}

    var value = Number(text.replace(/[ ,%\$]/gi, "").replace(/\((.*)\)/, "-$1"));

    return isNaN(value) ? text.toLowerCase() + " " : value;

}); 

var stylesheet = document.styleSheets[document.styleSheets.length-1];

stylesheet.addRule(".active-column-2", "width:150px");

</script>

  </BODY>

</HTML>

How to add a input field above grid and position grid below it.

Forum search