Outline table row

Sciter Forums General discussion Outline table row

Tagged: , ,

This topic contains 5 replies, has 3 voices, and was last updated by  scorpion 2 hours, 19 minutes ago.

  • Author
    Posts
  • #51365

    scorpion
    Participant

    Hi!

    I wonder how could one outline a table row? As if “focused item” – with dashed/dotted border.
    Outline for cells is not the way, and for row itself it won’t work… See example, I need the second row to be in focus (the whole row, not individual cells).

    Thanks in advance for your advices 🙂

    <html>
    <head>
      <style type="text/css">
        table
        {
          behavior: column-resizer;
          border-spacing: 0;
        }
    
        /* borders */
        @const BORDER_GRID: solid 1dip darkgray;
        thead                         { border: @BORDER_GRID; }
        tbody:not(:empty)             { border: @BORDER_GRID; border-top: none; }
        th:not(:last-child),
        tbody td:not(:last-child)     { border-right: @BORDER_GRID; }
        tbody tr:not(:last-child) td  { border-bottom: @BORDER_GRID; }
    
        /* focus and selection */
        tr:checked  { background-image: url(theme:list-view-item-selected); }
        tr:current  { outline: dashed 1dip black -1dip; } /// <<< not working :(
    
        th, tbody td { padding: 2dip 3dip; }
    
        th { min-width: 20dip; width: max-content; background-color: threedlightshadow; }
        tfoot td { flow: horizontal; border-spacing: 4dip; padding-top: 4dip; padding-left: -1dip; }
      </style>
      <script type="text/tiscript">
        function self.ready() {
          $(tbody)[0].state.checked = true;
          $(tbody)[1].state.checked = true;
          $(tbody)[1].state.current = true; /* emulate focus by mouse or smth else */
        }
      </script>
    </head>
    <body>
      <table fixedlayout multiple>
        <thead>
          <tr> <th>#</th> <th>X (mil)</th> <th>Y (mil)</th> <th>Arc Angle (Neg = CW)</th> </tr>
        </thead>
        <tbody>
          <tr> <td>1</td> <td>3953.887</td> <td>4086.598</td> <td></td> </tr>
          <tr> <td>2</td> <td>4763.688</td> <td>3276.802</td> <td>20.292</td> </tr>
          <tr> <td>3</td> <td>4595</td>     <td>2995</td>     <td>20.292</td> </tr>
        </tbody>
        <tfoot><tr><td colspan=4><button>Add</button><button>Remove</button></td></tr></tfoot>
      </table>
    </body>
    </html>
  • #51368

    Mikanoshi
    Participant

    Outline for cells is not the way

    Paint your own outline.

    <style>
      tr:current td { aspect: selectedCell; }
    </style>
    <script type="text/tiscript">
      function selectedCell() {
        this.paintOutline = function(gfx) {
          var (l, t, r, b) = this.box(#rect, #inner, #padding);
          var (x1, x2) = (l-0.5, this.box(#width)-r+0.5);
          var (y1, y2) = (t-0.5, this.box(#height)-b+0.5);
          gfx.strokeDash(#dashed)
             .lineColor(color(0xFF,0,0))
             .lineWidth(1dip)
             .line(x1,y1,x2,y1);
          if (!this.next)
          gfx.line(x2,y1,x2,y2)
          gfx.line(x2,y2,x1,y2)
          if (!this.prior)
          gfx.line(x1,y2,x1,y1)
        }
      }
    </script>

    • This reply was modified 4 days, 2 hours ago by  Mikanoshi.
  • #51370

    Andrew
    Keymaster

    It’s a bug in current version with tr {outline:...} rendering.

    Fixed by r5147

  • #51378

    scorpion
    Participant

    Got it, thanks.
    Thought it wasn’t working by design – something like mentioned at stackoverflow

    • #51379

      Andrew
      Keymaster

      Technically <tr> is not a box element – it may contain rowspan cells for example.
      Yet its box model is quite non-trivial – no margins or paddings for example.

      That’s why browsers are not bothering to render

      ‘s at all – only cells in them.
  • #51409

    scorpion
    Participant

    Spent some time on experiments, that’s what is done with styles only:
    styled outline
    Outlines are working, but I couldn’t make them fully identical on all rows (1 pixel difference from left-right for example), and while waiting border-collapse: collapse fix there is “self painted” version:
    painted outline
    It works fine, but I have some questions:

    1. doesn’t tr Element have paintOutline function (and other paint*) or calls to it? aspect for tr never called one…
    2. is there a way to customize strokeDash(#dashed) drawing? I would like it to be painted as CSS outlines do (on top – 3colored pixels, 2 empty), but what I managed to achieve is 3 colored, 1 empty (or 2 colored, 2 empty without strokeCap(#square)): dashed lines

You must be logged in to reply to this topic.