:: Forum >>

Rollover on grid row make images in cell move 2-3 pixel to left

Hello
I'm using Tabs. For each tab, i have a Div that I display or hide. In each div there is a Grid. In 2 columns I have an image diplayed using
grid.setCellTemplate(new AW.Templates.Image, colNum) and then
grid.setCellImage("myImage", colNum, rowNum);
I also use
grid.getRowTemplate().setClass("text", "wrap");
to have text wrap in grid.

The problem is that 'wrap' style make a strange behavour when I rollover the row. The images in the grid move 2-3 pixel to the left. If I click on the selected tab, the images move back to the right.
I noticed that if I remove text wrap, this bug disappears.

I'm using version 2.0.2 Standard Developer

Thanks for your help. AciveWidget is really a nice tool.
Rod
Tuesday, April 24, 2007
Sorry, cannot reproduce this - could you post an example?
Alex (ActiveWidgets)
Thursday, April 26, 2007
Hi Alex

Here is the code that reproduce the bug. In fact there are 2 bug.
1. The one described before
2. On column resizing I got an infinite horizontal scroll bar
Note that these 2 bugs appear only on IE, not on FireFox

To run the code you need to put 2 small images 16x16px named image_1.gif and image_2.gif. Thes 2 images should appear in the 2 first columns in the grid

Thanks to look at it

<html>
<head>
        
        <script src="./runtime/lib/aw.js"></script>
        <link href="./runtime/styles/xp/aw.css" rel="stylesheet"></link>

    <script>
    
    AW.UI.TabsEnhanced = AW.UI.Tabs.subclass();
    AW.UI.TabsEnhanced.create = function()
    
{
     var obj = this.prototype;
    
     obj.isEnabled = function(col)
    
{
        if (typeof this.getItemTemplate(col).getAttribute('isEnabled') == 'undefined')
         return true
        else
         return (this.getItemTemplate(col).getAttribute('isEnabled'))
     }
     obj.setTabEnabled = function(tabIndex, enabled)
    
{
        if (enabled == true)
        {
         this.getItemTemplate(tabIndex).setAttribute('isEnabled', true);
         this.getItemTemplate(tabIndex).setClass("extension", "tabs-enabled")
        }
        else
        {
         this.getItemTemplate(tabIndex).setAttribute('isEnabled', false);
         this.getItemTemplate(tabIndex).setClass("extension", "tabs-disabled")
        }
     }
     obj.onItemClicked = function(event, index)
    
{
        if (this.isEnabled(index) == false)
         return true;
     }
    }
    
    var tabs;
    var tabContentDiv;
    var tabLabels = [];
    var tabLabelsInvisible = [];
    var activeTab;
    
    var divIds = []; // store ids of content DIVs
    var grids = []; // store grids reference
    var lastMessages = [];
    var hourGlassCursor = false;
    
    // Tabs
    
    var ID_MAIN = 0;
    var ID_NOTES = 1;
    var ID_HISTORY = 2;
    
    var TAB_MAIN_LABEL = "Main";
    var TAB_NOTES_LABEL = "Notes";
    var TAB_HISTORY_LABEL = "History";
    
    var TAB_LABELS_STR = [TAB_MAIN_LABEL, TAB_NOTES_LABEL, TAB_HISTORY_LABEL];
    
    var TAB_MAIN_VISIBLE = true;
    var TAB_NOTES_VISIBLE = true;
    var TAB_HISTORY_VISIBLE = false;
    
    var TABS_INIT_VISIBLE_STATE = [TAB_MAIN_VISIBLE, TAB_NOTES_VISIBLE, TAB_HISTORY_VISIBLE];
    
    var TAB_CONTENT_DIV_WIDTH = "100%";
    
    
    // Grids
    
    var GRID_HEIGHT = "500px";
    var GRID_WIDTH = "100%";
    
    var NUM_COL = 8;
    var ROW_HEIGHT = 32;
    
    var COL_ICON = 0;
    var COL_FLAG = 1;
    var COL_TITLE = 2;
    var COL_EDITION = 3;
    var COL_PUBLISHED = 4;
    var COL_NOTES = 5;
    var COL_HISTORY = 6;
    var COL_MSGID = 7;
    
    var COL_ICON_WIDTH = "35";
    var COL_FLAG_WIDTH = "35";
    var COL_TITLE_WIDTH = "240";
    var COL_EDITION_WIDTH = "170";
    var COL_PUBLISHED_WIDTH = "100";
    var COL_NOTES_WIDTH = "155";
    var COL_HISTORY_WIDTH = "45";
    var COL_MSGID_WIDTH = "0";
    
    var HEADER_MSG_TYPE = "";
    var HEADER_MSG_FLAG = "";
    var HEADER_MSG_TITLE = "Title";
    var HEADER_MSG_EDITION = "Edition";
    var HEADER_MSG_PUBLISHED = "Published";
    var HEADER_MSG_NOTES = "Notes";
    var HEADER_MSG_HISTORY = "History";
    var HEADER_MSG_ID = "";
    
    var HEADERS = [HEADER_MSG_TYPE, HEADER_MSG_FLAG, HEADER_MSG_TITLE, HEADER_MSG_EDITION, HEADER_MSG_PUBLISHED,
         HEADER_MSG_NOTES, HEADER_MSG_HISTORY, HEADER_MSG_ID];
    
    
    function doParseMessageList()
    
{
        insertMessageInGrid(TAB_MAIN_LABEL);
    }
    
    
    function doInit()
    
{
        for (var i = 0; i < TAB_LABELS_STR.length ; i++)
        {
            var isTabVisible = TABS_INIT_VISIBLE_STATE[i];
            var tabLabel = TAB_LABELS_STR[i];
            
            if(isTabVisible == true)
            {
                tabLabels.push(tabLabel);
                
                buildTabContent(tabLabel, i);
            }
            else
            {
                tabLabelsInvisible.push(tabLabel);
                
                buildTabContent(tabLabel, i);
            }
        }
        
        document.write(tabContentDiv);
        
        initializeTabs();
    }
    
    
    function buildTabContent(tabLabel, i)
    
{
        // AW.HTML.DIV
        var d = new AW.HTML.DIV;
        var id = "div" + i;
        d.setId(id);
        d.setStyle("width", TAB_CONTENT_DIV_WIDTH);
        divIds.push(id);
        
        // AW.UI.Grid
        var grid = new AW.UI.Grid;
        gridId = tabLabel;
        grid.setId(gridId);
        grid.setStyle("width", GRID_WIDTH);
        grid.setStyle("height", GRID_HEIGHT);
        
        // Text wrap in grids rows
        grid.getRowTemplate().setClass("text", "wrap");
        grid.setRowHeight(ROW_HEIGHT);
        grid.setRowCount(0);
        grid.setSelectionMode("single-row");
        
        grid.setHeaderText(HEADERS);
        
        // Cell formating
        var str = new AW.Formats.String;
        var num = new AW.Formats.Number;
        var date = new AW.Formats.Date;
        date.setDataFormat("ISO8601");
        date.setTextFormat("dd-mmm hh:mm");
        
        // Columns
        grid.setColumnCount(NUM_COL);
        
        grid.setCellFormat([str, str, str, str, date, str, str, num]);
        grid.setCellTemplate(new AW.Templates.Image, COL_ICON); // display image in first cell
        grid.setCellTemplate(new AW.Templates.Image, COL_FLAG);
        grid.setCellTemplate(new AW.Templates.Image, COL_HISTORY);
        
        if(tabLabel == TAB_MAIN_LABEL)
            grid.setColumnIndices([COL_ICON, COL_FLAG, COL_TITLE, COL_EDITION, COL_PUBLISHED, COL_NOTES, COL_HISTORY]); // hide 8th column containing message ids
        else
            grid.setColumnIndices([COL_ICON, COL_FLAG, COL_TITLE, COL_EDITION, COL_PUBLISHED, COL_NOTES]); // hide history column too
            
        grid.setColumnWidth(COL_ICON_WIDTH, COL_ICON);
        grid.setColumnWidth(COL_FLAG_WIDTH, COL_FLAG);
        grid.setColumnWidth(COL_TITLE_WIDTH, COL_TITLE);
        grid.setColumnWidth(COL_EDITION_WIDTH, COL_EDITION);
        grid.setColumnWidth(COL_PUBLISHED_WIDTH, COL_PUBLISHED);
        grid.setColumnWidth(COL_NOTES_WIDTH, COL_NOTES);
        grid.setColumnWidth(COL_HISTORY_WIDTH, COL_HISTORY);
        grid.setColumnWidth(COL_MSGID_WIDTH, COL_MSGID);
        
        grid.setColumnResizable(false, COL_ICON);
        grid.setColumnResizable(false, COL_FLAG);
        grid.setColumnResizable(true, COL_TITLE);
        grid.setColumnResizable(true, COL_EDITION);
        grid.setColumnResizable(false, COL_PUBLISHED);
        grid.setColumnResizable(true, COL_NOTES);
        grid.setColumnResizable(false, COL_HISTORY);
        grid.setColumnResizable(false, COL_MSGID);
        
        // AW.UI.Grid events
        //grid.onRowDoubleClicked = processRowDoubleClicked;
        //grid.onCellClicked = processCellClicked;
        //grid.onHeaderClicked = processHeaderClicked;
        grid.onColumnWidthChanged = processColumnWidthChanged;
        
        // Store a grid reference
        grids.push(grid);
        
        // Add Grid in DIV
        d.setContent(grid.getId(), grid);
        
        // Put the DIV in the global DIV
        tabContentDiv.setContent(d.getId(), d);
    }
    
    
    function processColumnWidthChanged(value, index)
    
{
        // When a column is resized in a grid, the same column is resized in other invisible grids
        for(var i = 0 ; i < grids.length ; i++)
        {
            grids[i].onColumnWidthChanged = function(value, index){return;};
            grids[i].setColumnWidth(value, index);
            grids[i].onColumnWidthChanged = processColumnWidthChanged;
        }
    }
    
    
    // Initialize tabs
    function initializeTabs()
    
{
        tabs.setItemText(tabLabels);
        tabs.setItemValue(divIds); // store ids of content DIVs
        tabs.setItemCount(tabLabels.length);
        
        tabs.setTabEnabled(ID_HISTORY, false);
        
        tabs.refresh();
        
        // Tabs event
        tabs.onSelectedItemsChanged = processTabsSelectedItemsChanged;
    
        tabs.setSelectedItems([ID_MAIN]);
        activeTab = ID_MAIN;
        
        doParseMessageList();
    }
    
    function processTabsSelectedItemsChanged(selected)
    
{
        var i, divs = document.getElementById("content").childNodes;
    
        for(i = 0 ; i < divs.length ; i++ )
        {
            if(divs[i].style)
            {
                divs[i].style.display = "none"; // hide all elements
            }
        }
    
        var index = selected[0];
        activeTab = index;
        
        var value = this.getItemValue(index);
        
        // Trick to get the getElementById working
        var divName = divId + "-" + value;
        document.getElementById(divName).style.display = "block"; // show selected
    }
    
    
    function insertMessageInGrid(tabid)
    
{
        var msgid = 1234;
        var msgType = "test";
        var msgIcon = "pdf";
        
        var msgName = "title";
        var msgStartDateValue = 12342342;
        var msgStartDate = giveDate(msgStartDateValue);
        var msgFlag = "redx";
        var msgFlagValue = getFlagValue(msgFlag);
        var msgEdition = "edition content";
        var msgNotes = "notes content";
        
        // Get the grid for this groupName
        var g = getGrid(tabid);
        
        // Get the grid's rowcount
        var rowcount = g.getRowCount();
        var newRowIndex = rowcount++;
        
        // Add row
        g.addRow(newRowIndex);
        
        // Populate row
        g.setCellImage(msgIcon, COL_ICON, newRowIndex); // Image is referenced in ssActiveWidgetsLib.css (.aw-image-...)
        g.setCellValue(msgIcon, COL_ICON, newRowIndex); // Set icon column a text value to make it sortable
        g.setCellImage(msgFlag, COL_FLAG, newRowIndex);
        g.setCellValue(msgFlagValue, COL_FLAG, newRowIndex);
        g.setCellText(msgName, COL_TITLE, newRowIndex);
        g.setCellText(msgEdition, COL_EDITION, newRowIndex);
        g.setCellText(msgStartDate, COL_PUBLISHED, newRowIndex);
        g.setCellValue(msgStartDateValue, COL_PUBLISHED, newRowIndex);
        g.setCellText(msgNotes, COL_NOTES, newRowIndex);
        g.setCellText(msgid, COL_MSGID, newRowIndex);
        
        g.sort(COL_PUBLISHED, "descending");
        
        g.refresh();
    }
    
    
    function getGrid(id)
    
{
        var g = null;
        for(var i = 0 ; i < grids.length ; i++)
        {
            if(grids[i].getId() == id)
            {
                g = grids[i];
                return g;
            }
            else
            {
            }
        }
        return g;
    }
    
    
    function giveDate(sec)
    
{
    
        var d = new Date();
        var millsec = sec * 1000;
        
        d.setTime(millsec);
        
        var min = d.getMinutes();
        if(min < 10)
            min = "0" + min ;
            
        var hours = d.getHours();
        if(hours < 10)
            hours = "0" + hours ;
            
        var day = d.getDate();
        if(day < 10)
            day = "0" + day ;
            
        var month = d.getMonth();
        var mon = getMonthStr(month);
            
        //var year = d.getYear();
        
        return day + '-' + mon + ' ' + hours + ':' + min ;
    }
    
    
    function getMonthStr(num)
    
{
        switch(num)
        {
            case 0:
                return "Jan";
                break;
            case 1:
                return "Feb";
                break;
            case 2:
                return "Mar";
                break;
            case 3:
                return "Apr";
                break;
            case 4:
                return "May";
                break;
            case 5:
                return "Jun";
                break;
            case 6:
                return "Jul";
                break;
            case 7:
                return "Aug";
                break;
            case 8:
                return "Sep";
                break;
            case 9:
                return "Oct";
                break;
            case 10:
                return "Nov";
                break;
            case 11:
                return "Dec";
                break;
        }
    }
    
    
    function getFlagValue(msgFlag)
    
{
        switch(msgFlag)
        {
            case "excla":
            case "excla16":
            case "excla32":
                var value = "a";
                break;
            case "redx":
            case "redx16":
            case "redx32":
                var value = "b";
                break;
            case "":
                var value = "c";
                break;
            default :
                var value = "c";
        }
        
        return value;
    }
    
    
    function doInitView()
    
{
        registerEventHandlers();
    }
    
    var timeoutID = new Number(0);
    var windowWidth = new Number(0);
    var windowHeight = new Number(0);
    
    function registerEventHandlers()
    
{
        window.onresize = doOnResize;
    }
    
    function doOnResize()
    
{
        if(timeoutID)
            window.clearTimeout(timeoutID) // clear old timeout
        timeoutID = window.setTimeout("doResize()", 50);
    }
    
    function doResize()
    
{
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
        
        grids[ID_MAIN].setStyle("height", windowHeight - 100);
        grids[ID_NOTES].setStyle("height", windowHeight - 100);
        grids[ID_HISTORY].setStyle("height", windowHeight - 100);
    }
    
    
</script>

    <style>
    .aw-ui-tabs .aw-item-box
    {
        width: 75px
    
}
    
    /* Icons */
    .aw-image-pdf
    {
        background: url(image_1.gif);
        width: 16px;
        height: 16px
    
}
    .aw-image-redx
    {
        background: url(image_2.gif);
        width: 16px;
        height: 16px
    
}
    /* Tab enabled-disabled style */
    .aw-extension-tabs-enabled {color:black;}
    .aw-extension-tabs-disabled {color:gray; background-position: 100% 0px!important;}
    .aw-extension-tabs-disabled .aw-item-box {color:gray; background-position: 0px -50px!important;}
    
    /* Selected row in grid */
    .aw-grid-control .aw-cells-selected, .aw-grid-control .aw-rows-selected {color:#000;background:#DDDDDD}
    
</style>
</head>
    
<body onLoad="doInitView();" oncontextmenu="return false;">

<div class="TopElement">

<!-- Tabs -->
<div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<script>
var tabs = new AW.UI.TabsEnhanced;
     var tabsId = "tabs";
     tabs.setId(tabsId);
tabs.setStyle("width", "100%");
document.write(tabs);
</script>
</td>
</tr>
</table>
</div>
<!-- End Tabs -->

<!-- Tabs content global Div -->
<div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<script>
var tabContentDiv = new AW.HTML.DIV;
var divId = "content";
tabContentDiv.setId(divId);
tabContentDiv.setStyle("width", "100%");
tabContentDiv.setStyle("border", "1px solid #aaa");
</script>
</td>
</tr>
</table>
</div>
<!-- End Tabs content global Div -->

<script>

     doInit();
    
    
</script>

</div>
<!-- End TopElement -->
</body>
</html>
Rod
Friday, April 27, 2007
No idea ?
Rod
Monday, May 7, 2007
1). Scrollbar problem - the grid does not initialize correctly in IE when the grid is inserted into the composite AW object with setContent() method. The possible workaround would be to insert the grid html using the function,

d.setContent(grid.getId(), function(){return grid.toString()});

instead of

d.setContent(grid.getId(), grid);

line 217 in your example code.

2). 2-3 pixel image shift on mouseover - this is a bug related to text-wrap setting, you can fix it adding the following CSS rules to your stylesheet -

.aw-ie .aw-text-wrap .aw-item-image {
left: -2px;
margin-left: 0px;
margin-right: 2px;
}

The problem was due to the negative margin-left value in combination with float:left.

Alex (ActiveWidgets)
Tuesday, May 15, 2007

This topic is archived.


Back to support forum

Forum search