• Replies 5 replies
  • Subscribers 10 subscribers
  • Views 6921 views
  • Users 0 members are here
Options
Related

Coloring grid cells is irregular in IE - CSS issue

AngelaIp
Hi, I use the following VB-Method for coloring some certain properties in the grid, e.g. the state column: 
Dim tmpInn As Innovator = Me.getInnovator()
Dim i As Integer

For i=0 To Me.getItemCount()-1

  Dim bg_color_state As String
  Dim myCss As String
  Dim thisItem As Item = Me.getItemByIndex(i)
  'Choose color for 'State'
  Dim thisStatus As String = thisItem.getProperty("state","")
    '------
      Select (thisStatus)
          Case "Preliminary","In Review","In Change"
          bg_color_state = "#FFFFBB" 'light yellow
          Case "Released" 
          bg_color_state = "#90EE90" 'light green
          Case "Superseded","Obsolete" 
          bg_color_state = "#FFBBBB" 'light red
          Case Else
          bg_color_state = "" 'none
      End Select

  If bg_color_state <> "" Then
    myCss = ".state { background-color: " & bg_color_state & " }" & vbNewLine & ""
    thisItem.setProperty("css",myCss)
  End If
Next i
Return Me
Unfortunately, the coloring is not always performed correctly in IE. The color is fine, but the borders of the cell sometimes disappear. Is there a solution for this? It's not a big issue, but it does not look pretty. Best regards! Angela
  • Short note. I use the shown Method as onAfterGet Server Event in ItemType Part.
  • Offline
    Hi Angela, This is an issue we've seen before in relationships grids. If you have a property on the Relationship ItemType, it is displayed in the relationship grid with a darker gray color. In IE, this has a side effect of causing the bottom and right border of the grid cell to not display properly. I believe you're seeing this same issue due to using different background colors. Unfortunately there doesn't seem to be an easy solution for this issue as increasing the border width in IE will cause the borders to appear too wide in Chrome and Firefox. Chris ___________________________________ Christopher Gillis Aras Labs Software Engineer
  • Hi Chris, Yes, I see the border issue in the regular relationships as well. At first I thought this effect was caused by my coloring Method. But maybe a solution is the CSS property background-clip? This following code correctly draws the State column: myCss = ".state { background-color: " & bg_color_state & ";background-clip: padding-box;}" It seems not to have any negative effect in Chrome and Firefox. The dark grey relationship grid columns still show missing borders. This propably can be fixed inside the general CSS settings in the installation folder. Do you know which function in Innovator/client/styles is responsible for it? It is worth a try. If it does not work. it is not a problem either. I just like when things look tidy. Angela
  • Offline
    Good catch, Angela! You should be able this property globally by adding it near line 336 of \Innovator\Client\styles\controls\grid.css . 
    .dojoxGrid .dojoxGridContent .dojoxGridCell, .claro .dojoxGridTreeModel .dojoxGridContent .dojoxGridCell {
padding: 1px 2px 0px 3px !important;
padding: 0px 2px 0px 3px\9 !important;
<strong>background-clip: padding-box;</strong>
}
    You will also need to update the filesRevision tag in your Client web.config to apply this change to all of your clients. Chris __________________________________________ Christopher Gillis Aras Labs Software Engineer
  • That was really lucky coincidence. If I had seen this before, I would not have written this post. The modification of the grid.css worked without problems. Looks much better now! :-)