Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    10.0: problem with grid cell styles

    SmartClient Version: v10.0p_2014-10-15/EVAL Development Only (expires 2014.12.14_06.39.06) Licensed to: Isomorphic Software (#ISC_EVAL_NIGHTLY)
    and
    v9.1p_2014-10-05/PowerEdition Development Only (2014-10-05)

    Chrome, Safari on OSX

    In the showcase, please modify #gridCellStyles sample, CSS:
    Code:
    .pacchettoStyle,
    .pacchettoStyleDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background-color: #ffffcc;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .pacchettoStyleDisabled,
    .pacchettoStyleDisabledDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background-color: #6f5050;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .pacchettoStyleSelected,
    .pacchettoStyleSelectedDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background-color: #ffff66;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .pacchettoStyleSelectedOver,
    .pacchettoStyleSelectedOverDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background: #ffff66 url(images/ListGrid/row_Over.png) repeat-x bottom left scroll;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .pacchettoStyleOver,
    .pacchettoStyleOverDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background: #ffff66 url(images/ListGrid/row_Over.png) repeat-x bottom left scroll;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .servizioSempliceStyle,
    .servizioSempliceStyleDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background-color: #dcfcfb;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .servizioSempliceStyleDisabled,
    .servizioSempliceStyleDisabledDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background-color: #6f5050;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .servizioSempliceStyleSelected,
    .servizioSempliceStyleSelectedDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background-color: #9ededb;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .servizioSempliceStyleSelectedOver,
    .servizioSempliceStyleSelectedOverDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background: #9ededb url(images/ListGrid/row_Over.png) repeat-x bottom left scroll;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    
    .servizioSempliceStyleOver,
    .servizioSempliceStyleOverDark {
        font-family: Arial, Verdana, sans-serif;
        font-size: 11px;
        color: black;
        background: #9ededb url(images/ListGrid/row_Over.png) repeat-x bottom left scroll;
        border-right: 1px solid #AEBDD4;
        border-bottom: 1px solid #AEBDD4;
    }
    Javascript code:
    Code:
    isc.defineClass("CountryListGrid", "ListGrid").addProperties({
        width:500, height:"100%", alternateRecordStyles:true, canDragSelect: true,
        data: countryData,
        fields:[
            {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
            {name:"countryName", title:"Country"},
            {name:"capital", title:"Capital"},
            {name:"continent", title:"Continent"}
        ]
    })
    
    isc.CountryListGrid.create({
        ID: "countryList1",
        getBaseStyle: function (record, rowNum, colNum) {
          if (rowNum % 2 == 0) {
            return "pacchettoStyle";
          } else {      
            return  "servizioSempliceStyle";
          }
        }
    })
    you'll see a strange effect when hovering over the grid...it seems that when hovering on a row its height decreases of 1 pixel.

    Older 9.1 builds, as v9.1p_2014-08-27/PowerEdition Development Only (2014-08-27) for example, don't suffer from this visual glitch.

    #2
    it seems that the problem arises when there are rows with alternate styles applied AND the styles don't have both border-top and border-bottom. Am I right?

    Comment

    Working...
    X