2 Replies Latest reply on Jun 9, 2018 11:32 AM by Roger Palmen

    PI Vision symbol selection indicator

    Roger Palmen

      Hi all,

       

      Pi Vision 3 shows a selection box around a symbol when the symbol is clicked. This does give quite an untidy appearance of the display if the size of the symbol canvas is larger than the actual symbol. When symbols become more dense, this also draws lines across other symbols:

       

       

      Is there a way to disable (hack?) this in the CSS? Somehow on a first look in the DOM i could not find it easily...

        • Re: PI Vision symbol selection indicator
          fwalsh

          Roger,

           

          Looks like these are controlled by the following 5 styles in the main .css file:

          .symbol-selector-handle

          .symbol-selector-handle.touch

          .symbol-selector-handle.touch::after

          .symbol-selector

          .symbol-selector-nonLayout

           

          In particular:

          .symbol-selector-nonLayout {
              width: -moz-calc(100% + 40px - 8px);
              width: -webkit-calc(100% + 40px - 8px);
              width: calc(100% + 40px - 8px);
              height: -moz-calc(100% + 50px - 8px);
              height: -webkit-calc(100% + 50px - 8px);
              height: calc(100% + 50px - 8px);
              background: rgba(122,122,122,.06);
              border: 4px solid rgba(110,110,110,.2);
              border-radius: 3px;
              left: -20px;
              pointer-events: none;
              position: absolute;
              top: -25px;
              z-index: 0
          }
          

           

          You could set .symbol-selector-nonLayout.border and background to '' if you'd like, to remove these visually.

          3 of 3 people found this helpful