Background color

How do I get all the background to be set for the same background color?

Ignition 8.1.0
I have spent hours on this.
I set every single container to have style background color.

Is there a brute force way to make sure all the background is not white?

*updated code
this code has a different issue, where the top bar does not stay it’s color across the width.
However the background is at least not white.
Here is a sample code of my testing.


[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "direction": "column",
      "style": {
        "overflow": "visible",
        "backgroundColor": "#205287"
      }
    },
    "meta": {
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "wrap": "wrap",
          "style": {
            "overflow": "visible",
            "backgroundColor": "#4C78DB"
          }
        },
        "meta": {
          "name": "header80"
        },
        "position": {
          "shrink": 0,
          "basis": "34px"
        },
        "custom": {}
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "style": {
            "overflow": "visible",
            "backgroundColor": "#205287"
          }
        },
        "meta": {
          "name": "bodyrow840"
        },
        "position": {
          "shrink": 0,
          "basis": "800px"
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "overflow": "visible",
                "backgroundColor": "#808080"
              }
            },
            "meta": {
              "name": "leftnav"
            },
            "position": {
              "shrink": 0,
              "basis": "600px"
            },
            "custom": {}
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column",
              "style": {
                "backgroundColor": "#205287"
              }
            },
            "meta": {
              "name": "rightcontentcolumn1502scroll"
            },
            "position": {
              "shrink": 0,
              "basis": "6000px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.container.flex",
                "version": 0,
                "props": {
                  "direction": "column",
                  "style": {
                    "overflow": "visible"
                  }
                },
                "meta": {
                  "name": "outerrightcontentcolumn906visible"
                },
                "position": {
                  "shrink": 0,
                  "basis": "906px"
                },
                "custom": {},
                "children": [
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "backgroundColor": "#E1E63C"
                          }
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {},
                        "children": [
                          {
                            "type": "ia.display.label",
                            "version": 0,
                            "props": {
                              "text": "Label"
                            },
                            "meta": {
                              "name": "Label"
                            },
                            "position": {
                              "shrink": 0,
                              "basis": "32px"
                            },
                            "custom": {}
                          }
                        ]
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  },
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible_0"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "backgroundColor": "#1FDA54"
                          }
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {},
                        "children": [
                          {
                            "type": "ia.display.label",
                            "version": 0,
                            "props": {
                              "text": "Label"
                            },
                            "meta": {
                              "name": "Label"
                            },
                            "position": {
                              "shrink": 0,
                              "basis": "32px"
                            },
                            "custom": {}
                          }
                        ]
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  },
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible_1"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible",
                            "backgroundColor": "#E91B50"
                          }
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {},
                        "children": [
                          {
                            "type": "ia.display.label",
                            "version": 0,
                            "props": {
                              "text": "Label"
                            },
                            "meta": {
                              "name": "Label"
                            },
                            "position": {
                              "shrink": 0,
                              "basis": "32px"
                            },
                            "custom": {}
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

When I scroll to the right, I get this white space both at the top and the bottom on this test.
Though on another test, I actually go the top to be a color the whole way, not sure why or how.

Sounds like a good use case for themes. You can change most Perspective defaults this way. Check out the readme in your install files (C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes) for details on how to get started.

From what you’re describing, i think you’ll just need to override 3 variables:

--containerRoot: var(--neutral-10); /* the root container, depth 0 */
--container: var(--neutral-20); /* standard container, depth 1 */
--containerNested: var(--neutral-30); /* nested container, depth 2 */

You’ll replace var(*) with your desired color. Check out the light-warm and light-cool themes for examples on how to do this.

Note that this will apply to any project(s) using this theme. If you only need it for some parts of a project and not others, styles might be a better option.

1 Like

I think I finally got it to take.
Thanks for helping me Cory.
I will try style next on the root if this row-row way doesn’t take on other pages.

At the top, I made a flex container row with a flex container row.
The outer established the height, and the inner established the width.
I did the same at the bottom.
I set all of them with the background color I wanted.

1 Like

I think I glossed over your actual use case, themes probably don’t make sense here. Glad you were able to get it working at least!

Without know what specifically you’re looking to do, I think there may be a better way. Looks like the background colors are getting tripped up by having your row components being hardcoded to wider than the container itself. Seems like you’re using flex containers but forcing them in a way that takes away their key feature - flexibility.

What’s the end goal of this view?

1 Like

I have a column on the right side that starts a few pixels from the bottom.
So scrolling up in that column, doesn’t come from the bottom, but starts somewhere above bottom.

This lets me do other things, like caption and note below it while maintaining the position of the left side column.

A few things.

  1. Is there any reason you’re not using docked Views for your header and sidebar navigation?
  2. you’ve set fixed basis sizes for the components in your flex containers with no grow or shrink, so if there’s any slight change in screen resolution, you are either going to see scrollbars or the background colour of the root container
  3. I’m not really sure why there are 3 tall containers stacked on top of each other? Without any understanding of your page, it seems that these could be replaced by a single content which is an embedded view with a dynamic path
1 Like