Display grid to the right of a multi-select?

Hi,

I have just finished writing an HTML reports system. It's heavily script-based.

The user selects a report from a drop-down menu at the top, and the filters available for that report appear in the multi-select down the left-hand side of the screen. The user selects their filters, clicks the preview button, and then the report is displayed in a textarea to the right of the multi-select. They can then choose to print what's displayed in the textarea if they want.

The thing that I'm not happy with is that when the user clicks preview, the data in the textarea looks pretty boring (i.e. plain, monospaced font on a white background, with whitespace as column separator). I think that this is where ActiveWidgets could help me, but I can't figure out how to have the multi-select menu on the left with the report to the right of it. The ActiveWidgets grid always appears below the multi-select, not to the side.

Can anybody point me in the right direction? I have to admit that HTML coding isn't one of my strong points, so any help would be appreciated.

Here's some HTML to give you a basic idea of what it looks like at the moment (dimensions hard coded because I've removed all of the script and style tags - multi-select menu and textarea should appear side-by-side). Basically, I want to replace the textarea with a nice ActiveWidgets grid:

<head>
  <title>Reports Example</title>
</head>

<body>
  <b>Report drop-down:</b>
  <select>
    <option>Select report...</option>
    <option>Report 1</option>
    <option>Report 2</option>
  </select>
  <label><input type="checkbox" name="limit">Checkbox</label>
  <p>
  <select size="29" style="width:8%" multiple>
    <option>Filter 1</option>
    <option>Filter 2</option>
    <option>Filter 3</option>
    <option>Filter 4</option>
    <option>Filter 5</option>
  </select>
  <textarea name="report" rows="28" cols="88" readonly="readonly" wrap="off">The report goes here</textarea>
  <p align="center">
  <input type="submit" value="Preview"></input>
  <input type="submit" value="Print"></input>
  <input type="submit" value="Close"></input>
</body>
</html>

P.S. Anybody else keep finding themselves typing "ActiveMidgets" by mistake? ;-)

John

January 20,

Please corrent me if I'm wrong, but you say the grid shows below the select not to the side, but I don't see a grid anywhere in your code? And, yes, if it is appearing below and not to the right then you have your HTML/CSS wrong. I suggest reading about CSS and learning about object placement. This is not a topic that can be learned in a paragraph or two on this forum and this is not a place to be teaching it.

Jim Hunter

January 20,

You're right, I was rather unclear: the above HTML code is the original report, trimmed down simply to give an idea of the page layout. I want to remove everything inside the 'textarea' tags and replace it with an ActiveWidgets grid, but the grid always appears underneath.

Using my somewhat limited knowledge I have tried placing the multi-select and some grid code (from the basic.htm example that comes with the distribution) inside 'span' tags, and trying to align them left and right respectively (code below). Didn't work in Firefox, IE6, IE7 or Opera.

Would not expect to receive a CSS tutorial on this forum; looks like I'll be reading up on CSS and positioning over the weekend. :)

<span align="left">
    <select size="29" style="width:8%" multiple>
      <option>Filter 1</option>
      <option>Filter 2</option>
      <option>Filter 3</option>
      <option>Filter 4</option>
      <option>Filter 5</option>
    </select>
  </span>
  <span align="right">
    <script>
      var obj = new Active.Controls.Grid;

      obj.setRowProperty("count", 20);
      obj.setColumnProperty("count", 5);

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

      obj.setRowHeaderWidth("28px");
      obj.setColumnHeaderHeight("20px");

      obj.setAction("click", function(src){window.status = src.getItemProperty("text")});

      document.write(obj);
    </script>
  </span>

John

January 20,

When doing your reading, keep the following in mind:

 tags are designed to be used like you would see a printed page, that is that one follows another on a page. That is one reason that your grid is under the select box. In general I never use tags as I write mostly web applications, not web pages. Pages that contain a lot of text use the tag more often then a web application would.

<DIV> elements also follow one another down the page unless you use ABSOLUTE positioning. There is an implied after each DIV that make the DIVs flow down the page vertically.

 elements follow one another but there is no implied between then so they flow horizontally on the page. So if you had two spans, one after another, in your code they would display on the same 'line' unless too large and they wrapped to the next 'line'. Also, this is default behavior unless you use ABSOLUTE positioning.

To solve your problem, I suggest using 2 DIV's and placing then side-by-side with ABSOLUTE positioning and size. Put the select statement in the DIV on the left and the grid in the DIV on the right. CSS tutorials will show you how to do this and what to look out for when using ABSOLUTE positioning as there are some pitfalls you need to know.

Jim Hunter

January 20,

This topic is archived.

Display grid to the right of a multi-select?

See also:

Search

New Data Grid

Version 2