Layout not rendering correctly when using template inclusion

[jaypanares]

trafficstars

Hi, seemed to have found a bug. In my example below, I am using another template within grids/columns, but it doesn't render correctly (not middle and center aligned). If I render the template without any other templates (just the whole html code), it renders correctly.

http://meteorpad.com/pad/Js9KZ6Dbf9nEo2Xdz/Semantic%202.0

Try running the code with the {{> loginForm}} template first, then try running again replacing {{> loginForm}} with the html it's supposed to be loading.

Using the latest semantic:ui with 2.0

Thanks!

[jaypanares]

Looks like in the class="ui middle aligned center aligned grid" the duplicate aligned gets merged into one, so it gets rendered like so: class="ui middle aligned center grid"

Is this a Meteor thing?

[bitIO]

It also happens if you use something like two column computer one column mobile grid. It might be related to how meteor set classes (I haven't dig into that). To make it work you need to add classes via plain js or something like that. Just a workaround.

EDIT: Just forgot to mention that this also happens with css version of semantic so, I guess is more a blaze issue rather than Semantic.

EDIT 2: After some research, I've found the problem and opened and issue here https://github.com/meteor/meteor/issues/5632

[nooitaf]

sorry about closing this so quickly, i thought it got "fixed" :P

---

Meteor removes duplicates because of the HTML5 spec. https://github.com/meteor/blaze/issues/30

Consensus seems to be that SUI should be patched instead of Meteor or Blaze.

Here is an interesting solution from @arggh https://github.com/Semantic-Org/Semantic-UI/issues/1526#issuecomment-226924617

<template name="div">
  <div>
    {{> Template.contentBlock}}
  </div>
</template>

Template.div.onRendered(function() {
  $(this.firstNode).get(0).className = this.data.class;
});

How to use:

<div class="ui grid">
   {{#div class="sixteen wide mobile twelve wide tablet ten wide computer column"}}
      <!-- column content -->
   {{/div}}
</div>

This info and example should be in the readme. Till that's done i'll reopen this.