On hover effect using PDOCrud
Message :
Products
Showing 1 to 10 of 101 entries
On Hover Show on hover effect (Added in v 4.0)
On hover effect is particularly useful when you have large number of columns in grid/table. Due to large number of columns, it shows the scroll if the data doesn't fit. You need to horizontal scroll to reach to action buttons. Using hover css, you won't need to scroll because on hover, it will show the action button directly. We have created a skin named "hover", you will either need to use this skin or you can directly use the css shown below to achieve this effect
$pdocrud = new PDOCrud();
$pdocrud->setSkin("hover");//add this skin to show hover effect
echo $pdocrud->dbTable("products")->render();
//Or you can add below css in your style file
.pdocrud-table-container table tr.pdocrud-header-row th{
padding: 9px 15px;
}
.pdocrud-table tbody tr.pdocrud-data-row{
height: 50px;
}
.pdocrud-table tbody tr.pdocrud-data-row:hover td.pdocrud-row-actions{
position: absolute;
right: 0;
border-left: none;
margin-top: 0;
border-top: 1px solid #000;
}
.pdocrud-table tbody tr.pdocrud-data-row:hover td{
background: #000;
color: #fff;
}
On hover effect using PDOCrud
Products