:: Forum >> Version 1 >>

Is there a difference between example style sheet and distribution style sheet

More information on this topic is available in the documentation section: /active.howto.style.headers/column-header-height.html.

Hi Alex,

the column header height setting works fine in the example you have provided, but if I want to apply that to an example coming with the distribution, the divider does not expand to the full height.

Here is my example code, and you might need to test that within the distribution:

<html>
<
head>
    <
title>ActiveWidgets Grid :: Examples</title>
    <
style
    *        {-
moz-box-sizingborder-box;}
        
html    width100%; height100%; margin0pxpadding0pxoverflowhidden}
        
body    width100%; height100%; margin0pxpadding50pxoverflowhiddenfontmenu}
        .
active-controls-grid {border1px solid #ccc}
  </
style>

    <!-- 
ActiveWidgets stylesheet and scripts -->
    <
link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <
script src="../../runtime/lib/grid.js"></script>

    <!-- 
grid format -->
    <
style>
  
    .
active-scroll-top, .active-scroll-corner {height50px}
    .
active-scroll-left, .active-scroll-data {padding-top50px}
    .
active-box-resize {background-repeatrepeat-y;} /* fix border */
  
        
.active-controls-grid {height100%; fontmenu;}

        .
active-column-{width:  80px;}
        .
active-column-{width200px;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}
        .
active-column-{
      
text-alignright;
      
width110px;
    }
/*
        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}
    */
    
</style>

    <!-- 
grid data -->
    <
script>
        var 
myData = [
            [
"MSFT","Microsoft Corporation""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>
</
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(ij){return myData[i][j]});
    
obj.setColumnProperty("text", function(i){return myColumns[i]});

    
//    set headers width/height
    //obj.setRowHeaderWidth("28px");
    //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>
 
Andreas
Monday, April 4, 2005
The example style sheet is the same, but you need border height bug fix, which I included into example:

.active-box-resize {
    
background-repeatrepeat-y;

 
http://www.activewidgets.com/grid.howto.fix/column-header-border-height.html
Alex (ActiveWidgets)
Monday, April 4, 2005



This topic is archived.

Back to /active.howto.style.headers/column-header-height.html

Documentation:

Forum search