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

a listbox doesn't show its focused state obviously

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Normal Normal
    • None
    • 9.6.3
    • None
    • Security Level: Jimmy

      Steps to Reproduce

          <listbox sizedByContent="false" >
              <listhead sizable="true">
                  <listheader label="default0"  />
                  <listheader label="default1" />
                  <listheader label="default2" />
              </listhead>
              <listitem>
                  <listcell label="Row 1" />
                  <listcell label="Hello World" />
                  <listcell label="Hello World2" />
              </listitem>
          </listbox>
      

      1. move a focus to the listbox by pressing a tab key

      Current result

      no obvious visual effect for the focused listbox

      Expected result

      end-users can clearly identify the listbox is focused right now

      Details

      • Currently, when focusing on a listbox, it actually on a 1x1 button .z-focus-a which is hard to be identified by end users:
      • please also fix ZK-5486

      workaround

       	<style> 
      	.z-listbox:focus-within {
      		position: relative;
      	}
      	.z-listbox:focus-within::before {
      	    z-index: 1;
      	    content: "";
      	    display: block;
      	    width: 100%;
      	    height: 100%;
      	    position: absolute;
      	    box-shadow: inset 0 0 0 2px #E67626, inset 0 0 0 0px #FFFFFF;
      	    pointer-events: none;
      	}
      	</style>
      

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

              Created:
              Updated: