Revision history [back]

click to hide/show revision 1
initial version

asked 2016-05-10 20:54:23 +0800

ansancle gravatar image ansancle

Disabling Grid Hover Effect does not work for Chrome

The removal of the Grid hover effect does not work on Windows Chrome (at least with the CSS I use for every other browser). My CSS is included in the sample code below. In my application I have custom buttons built out of the Vbox component. Css provides the borders to make them look like buttons. On Chrome, only inside a grid component, the mouseover/hover effect is causing the borders to disappear and reappear.

Cut and past this code into ZK Sandbox, it works correctly on Firefox/IE/Edge/Safari and even Ubuntu Chrome but on Windows Chrome the highlight effect of the grid causes the borders to disappear and re-appear. How can I update my CSS so that this does not happen on windows chrome?

<zk>

<style>

body { padding:0 0 0 0 !important;
background : #000000; }

/* Prevents the selection box around components on the Ipad like when you hold down a light button */ * { -webkit-touch-callout: none; -webkit-user-select: none; / Disable selection/copy in UIWebView */ }

.z-vbox-separator { height: 0px !important; width: 0px !important; visibility: hidden !important; margin: 0; padding: 0 !important; }

.z-hbox-separator { width: 0px; visibility: hidden !important; margin: 0; padding: 0 !important; }

.z-window-content {
margin: 0; padding: 0 !important; }

.z-grid { border: 1px solid rgba(0, 0, 0, 0); overflow: hidden; } .z-grid-header { background: transparent; overflow: hidden; position: relative; width: 100%; } .z-grid-header table { border-spacing: 0; } .z-grid-header table th, .z-grid-header table td {

padding: 0;

} .z-grid-header table th { text-align: inherit; } .z-grid-header-border { border-bottom: 0px solid transparent; margin-top: -1px; position: relative; } .z-grid-body { margin-top: auto; overflow: hidden; position: relative; } .z-grid-body table { border-spacing: 0; } .z-grid-body table th, .z-grid-body table td {

padding: 0;

} .z-grid-body table th { text-align: inherit; } .z-grid-emptybody td { color: transparent; font-family: Arial,Sans-serif; font-size: 12px; font-style: italic; font-weight: normal; text-align: center; } .z-grid-footer { background: none repeat scroll 0 0 transparent; border-top: 0px solid transparent; overflow: hidden; } .z-grid-footer table { border-spacing: 0; } .z-grid-footer table th, .z-grid-footer table td {

padding: 0;

} .z-grid-footer table th { text-align: inherit; } .z-grid-footer .z-footer { overflow: hidden; } .z-grid-odd > .z-row-inner, .z-grid-odd > .z-cell .z-row-over { background: transparent !important; }

.z-row:hover > .z-row-inner, .z-row:hover > .z-cell { background: transparent !important; }

.z-columns th:first-child { border-left: medium none; } .z-columns th.z-columns-border:first-child { border-left: 0px solid transparent; } .z-columns-bar { border-bottom: 0px solid transparent; border-left: 0px solid transparent; } .z-column { background: transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent; overflow: hidden; padding: 0; position: relative; white-space: nowrap; } .z-column-hover { background: transparent; } .z-column-hover .z-column-button { display: block; } .z-column .z-column-content { position: relative; } .z-column-sort .z-column-content { cursor: pointer; } .z-column-sort .z-column-sorticon { color: transparent; left: 50%; position: absolute; top: -7px; } .z-column-button { border-left: 0px solid transparent; box-shadow: 0px 0 transparent inset; color: transparent; cursor: pointer; display: none; height: 32px; line-height: 32px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0; width: 23px; z-index: 15; } .z-column-button:hover { background: transparent; } .z-column-sizing, .z-column-sizing .z-column-button, .z-column-sizing.z-column-sort .z-column-button { cursor: e-resize; } .z-row td:first-child { border-left: medium none; } .z-row .z-row-inner, .z-row .z-cell { border-left: 0px solid transparent; background: transparent; overflow: hidden; } .z-row:hover > .z-row-inner, .z-row:hover > .z-cell { background: transparent; position: relative; } .z-row:hover > .z-row-inner > .z-row-content { color: transparent; background: transparent; } .z-group-inner { background: transparent; border-bottom: 0px solid transparent; border-top: 0px solid transparent; overflow: hidden; position: relative; } .z-group-inner .z-group-content, .z-group-inner .z-cell { padding: 3px 5px; } .z-group-icon { color: transparent; cursor: pointer; display: inline-block; font-size: 14px; height: 16px; line-height: 16px; position: relative; text-align: center; width: 16px; } .z-group-icon:hover { color: transparent; } .z-groupfoot-inner { background: transparent; overflow: hidden; } .z-column-content, .z-row-content, .z-group-content, .z-groupfoot-content, .z-footer-content { color: #FFFFFF; font-family: Arial,Sans-serif; font-size: 12px; line-height: 24px; overflow: hidden; padding: 4px 5px; background: transparent; } .z-column-content { font-weight: bold; padding: 4px 5px 3px; } .z-group-content .z-label, .z-groupfoot-content .z-label { font-weight: bold; } .z-grid-body .z-cell { font-family: Arial,Sans-serif; font-size: 12px; line-height: 24px; overflow: hidden; padding: 4px 5px; } .z-grid-paging-top { border-bottom: 0px solid transparent; overflow: hidden; width: 100%; } .z-grid-paging-bottom { border-top: 0px solid transparent; overflow: hidden; width: 100%; }

.z-window { border: none !important; background: none repeat scroll 0 0 #000000; }

.dhSquareButton {

 border: .18em solid #FFFFFF;

}

.dhSquareButton-border { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; color: #FFFFFF; border: .18em solid #FFFFFF; background: none; text-shadow: none; }

.dhIpadHomeWindowStyle .z-window-content

{ background: #000000;
}

</style>

<window border="normal" title="hello" sclass="dhIpadHomeWindowStyle">

            <grid width="100%">
                <rows>
                    <row>
                                              <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
                    </row>  
                    <row>
                    <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
                    </row>                          

                </rows>
            </grid>

</window> </zk>

click to hide/show revision 2
Added a vbox outside the grid to demonstrate that it's the grid causing the issue.

updated 2016-05-11 12:22:19 +0800

Disabling Grid Hover Effect does not work for Chrome

The removal of the Grid hover effect does not work on Windows Chrome (at least with the CSS I use for every other browser). My CSS is included in the sample code below. In my application I have custom buttons built out of the Vbox component. Css provides the borders to make them look like buttons. On Chrome, only inside a grid component, the mouseover/hover effect is causing the borders to disappear and reappear.

Cut and past this code into ZK Sandbox, it works correctly on Firefox/IE/Edge/Safari and even Ubuntu Chrome but on Windows Chrome the highlight effect of the grid causes the borders to disappear and re-appear. How can I update my CSS so that this does not happen on windows chrome?

 <zk>

<style>

<style> body { padding:0 0 0 0 !important;
background : #000000; }

/* } /** Prevents the selection box around components on the Ipad like when you hold down a light button */ * { -webkit-touch-callout: none; -webkit-user-select: none; / /* Disable selection/copy in UIWebView */ }

} .z-vbox-separator { height: 0px !important; width: 0px !important; visibility: hidden !important; margin: 0; padding: 0 !important; }

} .z-hbox-separator { width: 0px; visibility: hidden !important; margin: 0; padding: 0 !important; }

} .z-window-content {
margin: 0; padding: 0 !important; }

} .z-grid { border: 1px solid rgba(0, 0, 0, 0); overflow: hidden; } .z-grid-header { background: transparent; overflow: hidden; position: relative; width: 100%; } .z-grid-header table { border-spacing: 0; } .z-grid-header table th, .z-grid-header table td {

{

    padding: 0;

} .z-grid-header table th { text-align: inherit; } .z-grid-header-border { border-bottom: 0px solid transparent; margin-top: -1px; position: relative; } .z-grid-body { margin-top: auto; overflow: hidden; position: relative; } .z-grid-body table { border-spacing: 0; } .z-grid-body table th, .z-grid-body table td {

{

    padding: 0;

} .z-grid-body table th { text-align: inherit; } .z-grid-emptybody td { color: transparent; font-family: Arial,Sans-serif; font-size: 12px; font-style: italic; font-weight: normal; text-align: center; } .z-grid-footer { background: none repeat scroll 0 0 transparent; border-top: 0px solid transparent; overflow: hidden; } .z-grid-footer table { border-spacing: 0; } .z-grid-footer table th, .z-grid-footer table td {

{

    padding: 0;

} .z-grid-footer table th { text-align: inherit; } .z-grid-footer .z-footer { overflow: hidden; } .z-grid-odd > .z-row-inner, .z-grid-odd > .z-cell .z-row-over { background: transparent !important; }

} .z-row:hover > .z-row-inner, .z-row:hover > .z-cell { background: transparent !important; }

} .z-columns th:first-child { border-left: medium none; } .z-columns th.z-columns-border:first-child { border-left: 0px solid transparent; } .z-columns-bar { border-bottom: 0px solid transparent; border-left: 0px solid transparent; } .z-column { background: transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent; overflow: hidden; padding: 0; position: relative; white-space: nowrap; } .z-column-hover { background: transparent; } .z-column-hover .z-column-button { display: block; } .z-column .z-column-content { position: relative; } .z-column-sort .z-column-content { cursor: pointer; } .z-column-sort .z-column-sorticon { color: transparent; left: 50%; position: absolute; top: -7px; } .z-column-button { border-left: 0px solid transparent; box-shadow: 0px 0 transparent inset; color: transparent; cursor: pointer; display: none; height: 32px; line-height: 32px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0; width: 23px; z-index: 15; } .z-column-button:hover { background: transparent; } .z-column-sizing, .z-column-sizing .z-column-button, .z-column-sizing.z-column-sort .z-column-button { cursor: e-resize; } .z-row td:first-child { border-left: medium none; } .z-row .z-row-inner, .z-row .z-cell { border-left: 0px solid transparent; background: transparent; overflow: hidden; } .z-row:hover > .z-row-inner, .z-row:hover > .z-cell { background: transparent; position: relative; } .z-row:hover > .z-row-inner > .z-row-content { color: transparent; background: transparent; } .z-group-inner { background: transparent; border-bottom: 0px solid transparent; border-top: 0px solid transparent; overflow: hidden; position: relative; } .z-group-inner .z-group-content, .z-group-inner .z-cell { padding: 3px 5px; } .z-group-icon { color: transparent; cursor: pointer; display: inline-block; font-size: 14px; height: 16px; line-height: 16px; position: relative; text-align: center; width: 16px; } .z-group-icon:hover { color: transparent; } .z-groupfoot-inner { background: transparent; overflow: hidden; } .z-column-content, .z-row-content, .z-group-content, .z-groupfoot-content, .z-footer-content { color: #FFFFFF; font-family: Arial,Sans-serif; font-size: 12px; line-height: 24px; overflow: hidden; padding: 4px 5px; background: transparent; } .z-column-content { font-weight: bold; padding: 4px 5px 3px; } .z-group-content .z-label, .z-groupfoot-content .z-label { font-weight: bold; } .z-grid-body .z-cell { font-family: Arial,Sans-serif; font-size: 12px; line-height: 24px; overflow: hidden; padding: 4px 5px; } .z-grid-paging-top { border-bottom: 0px solid transparent; overflow: hidden; width: 100%; } .z-grid-paging-bottom { border-top: 0px solid transparent; overflow: hidden; width: 100%; }

} .z-window { border: none !important; background: none repeat scroll 0 0 #000000; }

} .dhSquareButton {

{

     border: .18em solid #FFFFFF;

}

} .dhSquareButton-border { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; color: #FFFFFF; border: .18em solid #FFFFFF; background: none; text-shadow: none; }

}





    .dhIpadHomeWindowStyle .z-window-content

{ background: #000000;
}

</style>

} </style> <window border="normal" title="hello" sclass="dhIpadHomeWindowStyle">

 sclass="dhIpadHomeWindowStyle">

                <grid width="100%">
                 <rows>
                     <row>
                                               <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
                     </row>  
                     <row>
                     <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
                     </row>                          

                 </rows>
             </grid>

<separator bar="true" spacing="20px"/> <label value="This vbox is not in the grid - so the mouseover/hover has no effect" style="color:#FFFFFF"/> <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>

 </window>
</zk>
</zk>

Disabling Grid Hover Effect does not work for Chrome

The removal of the Grid hover effect does not work on Windows Chrome (at least with the CSS I use for every other browser). My CSS is included in the sample code below. In my application I have custom buttons built out of the Vbox component. Css provides the borders to make them look like buttons. On Chrome, only inside a grid component, the mouseover/hover effect is causing the borders to disappear and reappear.

Cut and past this code into ZK Sandbox, it works correctly on Firefox/IE/Edge/Safari and even Ubuntu Chrome but on Windows Chrome the highlight effect of the grid causes the borders to disappear and re-appear. How can I update my CSS so that this does not happen on windows chrome?

        <zk>
  <style>


body 
{
    padding:0 0 0 0 !important;   
    background : #000000;
}

/** Prevents the selection box around components on the Ipad like when you hold down a light button */
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}




.z-vbox-separator 
{
    height: 0px !important;
    width: 0px !important;
    visibility: hidden !important;
    margin: 0;
    padding: 0 !important;
}

.z-hbox-separator 
{
    width: 0px;
    visibility: hidden !important;
    margin: 0;
    padding: 0 !important;
}


.z-window-content 
{   
    margin: 0;
    padding: 0 !important;
}





.z-grid {
    border: 1px solid rgba(0, 0, 0, 0);
    overflow: hidden;
}
.z-grid-header {
    background: transparent;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.z-grid-header table {
    border-spacing: 0;
}
.z-grid-header table th, .z-grid-header table td {

    padding: 0;
}
.z-grid-header table th {
    text-align: inherit;
}
.z-grid-header-border {
    border-bottom: 0px solid transparent;
    margin-top: -1px;
    position: relative;
}
.z-grid-body {
    margin-top: auto;
    overflow: hidden;
    position: relative;
}
.z-grid-body table {
    border-spacing: 0;
}
.z-grid-body table th, .z-grid-body table td {

    padding: 0;
}
.z-grid-body table th {
    text-align: inherit;
}
.z-grid-emptybody td {
    color: transparent;
    font-family: Arial,Sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-align: center;
}
.z-grid-footer {
    background: none repeat scroll 0 0 transparent;
    border-top: 0px solid transparent;
    overflow: hidden;
}
.z-grid-footer table {
    border-spacing: 0;
}
.z-grid-footer table th, .z-grid-footer table td {

    padding: 0;
}
.z-grid-footer table th {
    text-align: inherit;
}
.z-grid-footer .z-footer {
    overflow: hidden;
}
.z-grid-odd > .z-row-inner, .z-grid-odd > .z-cell .z-row-over {
    background: transparent !important;
}

  .z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
        background: transparent !important;
    }

.z-columns th:first-child {
    border-left: medium none;
}
.z-columns th.z-columns-border:first-child {
    border-left: 0px solid transparent;
}
.z-columns-bar {
    border-bottom: 0px solid transparent;
    border-left: 0px solid transparent;
}
.z-column {
    background: transparent;
    border-bottom: 0px solid transparent;
    border-left: 0px solid transparent;
    overflow: hidden;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
.z-column-hover {
    background: transparent;
}
.z-column-hover .z-column-button {
    display: block;
}
.z-column .z-column-content {
    position: relative;
}
.z-column-sort .z-column-content {
    cursor: pointer;
}
.z-column-sort .z-column-sorticon {
    color: transparent;
    left: 50%;
    position: absolute;
    top: -7px;
}
.z-column-button {
    border-left: 0px solid transparent;
    box-shadow: 0px 0 transparent inset;
    color: transparent;
    cursor: pointer;
    display: none;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 23px;
    z-index: 15;
}
.z-column-button:hover {
    background: transparent;
}
.z-column-sizing, .z-column-sizing .z-column-button, .z-column-sizing.z-column-sort .z-column-button {
    cursor: e-resize;
}
.z-row td:first-child {
    border-left: medium none;
}
.z-row .z-row-inner, .z-row .z-cell {
    border-left: 0px solid transparent;
    background: transparent;
    overflow: hidden;
}
.z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
    background: transparent;
    position: relative;
}
.z-row:hover > .z-row-inner > .z-row-content {
    color: transparent;
     background: transparent;
}
.z-group-inner {
    background: transparent;
    border-bottom: 0px solid transparent;
    border-top: 0px solid transparent;
    overflow: hidden;
    position: relative;
}
.z-group-inner .z-group-content, .z-group-inner .z-cell {
    padding: 3px 5px;
}
.z-group-icon {
    color: transparent;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    height: 16px;
    line-height: 16px;
    position: relative;
    text-align: center;
    width: 16px;
}
.z-group-icon:hover {
    color: transparent;
}
.z-groupfoot-inner {
    background: transparent;
    overflow: hidden;
}
.z-column-content, .z-row-content, .z-group-content, .z-groupfoot-content, .z-footer-content {
    color: #FFFFFF;
    font-family: Arial,Sans-serif;
    font-size: 12px;
    line-height: 24px;
    overflow: hidden;
    padding: 4px 5px;
    background: transparent;
}
.z-column-content {
    font-weight: bold;
    padding: 4px 5px 3px;
}
.z-group-content .z-label, .z-groupfoot-content .z-label {
    font-weight: bold;
}
.z-grid-body .z-cell {
    font-family: Arial,Sans-serif;
    font-size: 12px;
    line-height: 24px;
    overflow: hidden;
    padding: 4px 5px;
}
.z-grid-paging-top {
    border-bottom: 0px solid transparent;
    overflow: hidden;
    width: 100%;
}
.z-grid-paging-bottom {
    border-top: 0px solid transparent;
    overflow: hidden;
    width: 100%;
}


.z-window 
{
    border: none !important;
    background: none repeat scroll 0 0 #000000;
}




.dhSquareButton 
{

     border: .18em solid #FFFFFF;
  }


.dhSquareButton-border 
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; 
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     -webkit-transition-property: all;
     -moz-transition-property: all;
     -o-transition-property: all;
     transition-property: all;
     -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
     transition-duration: 0.3s;
     color: #FFFFFF;
     border: .18em solid #FFFFFF; 
     background: none;
     text-shadow: none; 
 }





    .dhIpadHomeWindowStyle .z-window-content
{
    background: #000000;   
}



  </style>

  <window border="normal" title="hello"  sclass="dhIpadHomeWindowStyle">

                <grid width="100%">
                    <rows>
                        <row>
                                                  <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
                        </row>  
                        <row>
                        <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
                        </row>                          

                    </rows>
                </grid>

<separator bar="true" spacing="20px"/> <label value="This vbox is not in the grid - so the mouseover/hover has no effect" style="color:#FFFFFF"/> <vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>

dhSquareButton-border"/>


      </window>
 </zk>
About Us | Faq | Help | Privacy Policy | Contact Us
Copyright Potix Corporation 2015.
Content on this site is licensed under a Creative Commons Attribution Share Alike 3.0 license.
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More