CODEWITHSUNDEEP
meteormeteor-blaze
Taimoor
Taimoor

Reputation: 167

How do I apply a css style to a template in meteor

<template name="userPill">
    <span>{{Zipcode}}</span>
    <span>{{City}}</span>
</template>

The above template is being used for a meteor autocomplete. What I need is a vertical scrollbar on a container that is around the list, so a user can scroll through these values. Would appreciate any help.

Thanks

Upvotes: 4

Views: 4482

Answers (1)

David Weldon
David Weldon

Reputation: 64342

The template tag does not exist in the DOM, so you can't rely on it for CSS. If you need to target that template specifically (as opposed to adding generic classes to its elements), your best bet is to wrap its contents in a div like so:

<template name="userPill">
  <div class="user-pill">
    <span>{{Zipcode}}</span>
    <span>{{City}}</span>
  </div>
</template>

Then you can target it in your css:

.user-pill {
  color: red;
}

In larger projects, I prefer to use a double underscore to identify class names for templates, e.g. <div class="__user-pill">. It may look a little ugly but I find it's really helpful to figure out what's going on.

Based on your comment, it looks like you need to style the container of a userPill. Let's say you have a template like this:

<template name="userPillContainer">
  <div class="user-pill-container">
    {{> userPill name="home"}}
    {{> userPill name="about"}}
    {{> userPill name="profile"}}
  </div>
</template>

Then you can target the container in the same way as above:

.user-pill-container {
  border: 1px solid black;
}

Upvotes: 2

Related Questions