Mirrored Caption
Add a caption to the top and bottom of your grid with
<zg-caption mirror></zg-caption>.
Result
Full
HTML
CSS
JS
Edit
Download
Full Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid Demo</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> body { background: #e6e6e6; } zing-grid[loading] { height: 341px; } </style> </head> <body> <zing-grid data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'> <!-- default is position top so we don't really need to set this attribute --> <zg-caption position="both">This is a caption position both on top and bottom</zg-caption> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid Demo</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body> <zing-grid data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'> <!-- default is position top so we don't really need to set this attribute --> <zg-caption position="both">This is a caption position both on top and bottom</zg-caption> </zing-grid> </body> </html>
body{background:#e6e6e6;}
// No JS code
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!