Mirrored Caption

87 of 122
Add a caption to the top and bottom of your grid with <zg-caption mirror></zg-caption>.
Result Full HTML CSS JS
Edit Download
This is a caption position both on top and bottom

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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></script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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;}

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!

Edit in Studio

Demo Gallery