CSS and Dynamic Content

Question

UPDATE: Messed up with my CSS, as nothing to do with dynamic content.! The answer is very informative though!

I'm creating tags and inserting content with handlebars:

Handlebars code:

{{#each docs}}
    <article class="first"> 
        <p class="date">
            {{@date}} {{date}} 
        </p>
        <h4 class="header">{{@venue.title}} {{venue.title}}
        - {{@venue.city}} {{venue.city}}</h4>
        <p class="details">
            {{@description}} {{description}}
        </p>
    </article>
{{/each}}

If I just list articles, the CSS works - but when I let handlebars dynamically create them, it won't apply.

CSS code:

div.gig-items{
    article: nth-of-type(n +2); 
    height: 0;
    padding: 0;
}

Is there a way to first create the content and then apply CSS or some more elegant solution?

ylerjen · Accepted Answer · 2017-01-21 14:44:07Z

1

The CSS is applied automatically at each repaint. So inserting your code in the source html or dynamically with js doesn't matter, the css will be applied correctly.

The problem come for sure from your code which has several errors...

First the CSS

You want to style every div elements with class gig-items, but there is no div and no class gig-items in your template...
You define a property article with value nth-of-type(n+2), but this is not a property, this is a selector

you should use it like :

article:nth-of-type(n+2) {
  color: blue;
}

Then in your handlebar template :

I assume you want to insert values by their names, but you use the prefix @ which is reserved for handlebar's loop values like @index or @keys
Another error is that you write double handlebar block to display the value. One is enough.

The correct way to insert value is :

<p class="date">{{date}}</p>

edited Jan 21, 2017 at 14:44

answered Jan 21, 2017 at 13:44

ylerjen

4,3082 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS and Dynamic Content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related