3.0.5

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

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>
Anthony
September 20,
Try replacing
.active-controls-grid {height: 100%; font: menu;}
with
.active-controls-grid {height: 100%; font: menu;top:30px;}
September 20,
Or adding a <br> after </form>
September 20,
.active-controls-grid {height: 100%; font: menu;top:30px;}

That was the trick. thanks.
Anthony
September 20,
how to add a check box in a page?
August 11,

This topic is archived.

See also:


Back to support forum