How can we use <select> object in grid with out over laping the header

Hi, i am using <select> object in grid, it is over lapping on header when i am scrolling down.Where i have set for hide with out over laping on header

Try it in FF and you might find that it works correctly. IE has a huge bug with SELECT boxes. It ALWAYS outs it on top of everything and does not adhere to parent borders. I have not found a work around for it yet except to account for the overlap with my design.

Have you heard of the IFRAME SHIM technique? It may help you in this situation. If you do a google on 'iframe shim' you should find a lot of examples.

Here is where I first heard of it:
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx

And here's an example:
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx

If this helps can I get a discounted commercial license? :)

This is an interesting technique but I don't think it is a solution to the problem of putting a select inside the grid. IE is still going to display it wrong and trying to add IFrames in and around the grid would be very cumbersome. I just wish IE would get fixed. As far as I know this behavior does not show in other browsers. There is also another huge bug in IE where all Flash annimation stays on top. I had windows that pop up and Flash annimation from the lower page rode above the pop up window. We had to exclude Flash from our allowable page content.

This should be fixed in IE7 :-)

Seriously, the technique referred by Jack works, but it requires some adjustment. The original method is intended for static layout so everything is fine until you scroll the div containing the select box. Then again it will appear above everything including the iframe (WTF!!!).

So the solution is to repaint iframe in onscroll event handler :-(

Here is the patch for v. 1.0 which adds iframe below column headers

<style>

    .active-select-fix {

        position: absolute;

        width: 100%;

        height: 20px;

        border: none;

        z-index: 1;

        filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);

    }

</style>



<script>

Active.Controls.Grid.patch = function(){



    var obj = this.prototype;



    var iframe = new Active.System.HTML();

    iframe.setTag("iframe");

    iframe.setAttribute("src", "javascript:'';");

    iframe.setAttribute("frameborder", "0")

    iframe.setAttribute("scrolling", "no")

    iframe.setClass("select", "fix");



    if (!obj.$browser) {



        var scroll = obj.getTemplate("layout").getContent("scrollbars").getEvent("onscroll");



        obj.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", function(){

            scroll.call(this);

            this.$owner.getContent("iframe").refreshClasses();

        });



        obj.setContent("iframe", iframe);

    }

};



Active.Controls.Grid.patch();

</script>

And here is the complete example -

<html>

<head>

    <title>ActiveWidgets Grid :: Examples</title>



    <!-- ActiveWidgets stylesheet and scripts -->

    <link href="../../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>

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



    <!-- grid format -->

<style>

    .active-controls-grid {height: 100%; font: menu; border: 1px solid #ccc;}



    .active-select-fix {

        position: absolute;

        width: 100%;

        height: 20px;

        border: none;

        z-index: 1;

        filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);

    }



</style>



    <!-- grid data -->

    <script>

        var myData = [

            ["MSFT","<select><option>1</option></select>", "314,571.156", "32,187.000", "55000"],

            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],

            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],

            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],

            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],

            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],

            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],

            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],

            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],

            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],

            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],

            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],

            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],

            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],

            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],

            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],

            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],

            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],

            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],

            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]

        ];



        var myColumns = [

            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"

        ];



    </script>





    <script>



Active.Controls.Grid.patch = function(){



    var obj = this.prototype;



    var iframe = new Active.System.HTML();

    iframe.setTag("iframe");

    iframe.setAttribute("src", "javascript:'';");

    iframe.setAttribute("frameborder", "0")

    iframe.setAttribute("scrolling", "no")

    iframe.setClass("select", "fix");



    if (!obj.$browser) {



        var scroll = obj.getTemplate("layout").getContent("scrollbars").getEvent("onscroll");



        obj.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", function(){

            scroll.call(this);

            this.$owner.getContent("iframe").refreshClasses();

        });



        obj.setContent("iframe", iframe);

    }

};



Active.Controls.Grid.patch();



    </script>





</head>

<body>

    <script>



    //	create ActiveWidgets Grid javascript object

    var obj = new Active.Controls.Grid;



    //	set number of rows/columns

    obj.setRowProperty("count", 20);

    obj.setColumnProperty("count", 5);



    //	provide cells and headers text

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

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



    //	set headers width/height

    obj.setRowHeaderWidth("0");

    obj.setColumnHeaderHeight("20px");



    //	set click action handler

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



    //	write grid html to the page

    document.write(obj);



    </script>

</body>

</html>

Jim, about ur flash problem, try adding this parameter to the flash embedding code

mode=opaque

This will ensure that all dhtml layers stay above the flash.

Forum search