Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-5499

a tree header doesn't show its focused state obviously

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Major Major
    • None
    • 9.6.4
    • None
    • Security Level: Jimmy

      Steps to Reproduce

          <tree id="tree" rows="5">
              <treecols sizable="true">
                  <treecol label="Name"/>
                  <treecol label="Description"/>
              </treecols>
              <treechildren>
                  <treeitem>
                      <treerow>
                          <treecell label="Item 1"/>
                          <treecell label="Item 1 description"/>
                      </treerow>
                  </treeitem>
                  <treeitem>
                      <treerow>
                          <treecell label="Item 2"/>
                          <treecell label="Item 2 description"/>
                      </treerow>
                      <treechildren>
                          <treeitem>
                              <treerow>
                                  <treecell label="Item 2.1"/>
                              </treerow>
                          </treeitem>
                          <treeitem>
                              <treerow>
                                  <treecell label="Item 2.2"/>
                                  <treecell
                                          label="Item 2.2 is something who cares"/>
                              </treerow>
                          </treeitem>
                      </treechildren>
                  </treeitem>
                  <treeitem label="Item 3"/>
              </treechildren>
          </tree>
      

      1. select the 1st item with the keyboard
      2. press UP arrow key to focus on the 1st column header

      Current result

      no obvious visual effect for the focused header

      Expected result

      end-users can clearly identify which header is focused on right now

      Workaround

      dotted

              .z-treecol-sort:focus{
                  outline: 3px dotted red;
                  outline-offset: -2px;
              }
      

      blinking

              @keyframes blinking {
                  0% { opacity: 1;
                      background-color: inherit;}
                  50% { opacity: 0.5;
                      background-color: white;}
                  100% { opacity: 1;
                      background-color: inherit;}
              }
      
              .z-treecol-sort:focus{
                  animation: blinking 1s infinite;
              }
      

            Unassigned Unassigned
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: