I am working on my first Meteor (v1.2.1) project, a webpage that will display three grid sections of html elements with dynamic styling. I think I've implemented the individual grid-item styling correctly, but I'm baffled why the overall page layout is so different from what I'm expecting. To be honest, my knowledge of web design fundamentals like HTML & CSS is poor, so there could be a simple solution that I am oblivious to. Thanks in advance for your help.
The desired layout needs clear divisions between each set and should look something like this:
"Heading"
Foo Set:
(grid of all foo)
Bar Set:
(grid of all bar)
Baz Set:
(grid of all baz)
When I try to do this with a template and helper functions I get this:
The first h1 title, "Foo Set", and associated grid are positioned correctly, but the subsequent titles and grids do not separate how I want them too.
Ideally the h1 titles should stay put, and the grids can expand or contract the number of grid-items shown per row based on the browser window size.
In DevTools Elements view I see some things that don't make sense to me. Why is the h1 tag for "Bar Set" taking the dimensions of the Foo grid above it?
This happens with each div and h1. They seem to reference the dimension of whatever element precedes them. In addition, the divs without IDs for each grid have a width value but zero for their height. My assumption was that these divs would have a height based on the number of grid-items displayed.
Here is my code, minus the server.js and a statusLookup.js file:
viewSets-client.js:
if (Meteor.isClient) {
Meteor.subscribe('units');
Template.body.helpers({
foo: function () {
return Units.find({TYPE: 'FOO'}, {sort : {ORDERVALUE:1}}).fetch();
},
bar: function () {
return Units.find({TYPE: 'BAR'}, {sort: {ORDERVALUE:1}}).fetch();
},
baz: function () {
return Units.find({TYPE: 'BAZ'}, {sort: {ORDERVALUE:1}}).fetch();
}
});
Template.set.helpers({
getBackgroundColor: function (elem, status) {
return Meteor.statusLookup(elem, status);
},
getTextColor: function (elem, status) {
return Meteor.statusLookup(elem, status);
}
});
}
viewSets.html:
<head>
<title>Set List</title>
</head>
<body>
<div class="container">
<header>
<h1>All Sets</h1>
</header>
<div id="fooDiv">
<h1>Foo Set:</h1>
<div>
{{#each foo}}
{{> set}}
{{/each}}
</div>
</div>
<div id="barDiv">
<h1>Bar Set:</h1>
<div>
{{#each bar}}
{{> set}}
{{/each}}
</div>
</div>
<div id="bazDiv">
<h1>Baz Set:</h1>
<div>
{{#each baz}}
{{> set}}
{{/each}}
</div>
</div>
</div>
</body>
<template name="set">
<div class="grid-item" style="background:{{getBackgroundColor 'isBackground' STATUS }}; color:{{getTextColor 'isText' STATUS}}"><span>{{UNIT}}</span></div>
</template>
viewSets.css:
html, body {
font-family: sans-serif;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
font-size: 14px;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
.grid-item {
width: 75px;
height: 30px;
float: left;
text-align: center;
vertical-align: middle;
margin: 1px;
font-weight: bold;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: 30px;
}
Please help me understand how to correctly format my html and CSS rules so the grid sections are separated. I appreciate your help.
