Sightly showing unexpected behaviour with bootstrap

[jezwn]

I was trying to use the bootstrap navbar with configurable links. Wrote a model class which injects the resource from the cq:dialog, which is a multifield. It all works fine without the bootstrap classes and other jargons. With all these it's not rendering properly. The rendered html contains the sly element and it hasn't been rendered.

The component.html

<sly data-sly-use.childPages="com.project.core.models.NavbarModel">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="
    width: 100%;>
 <a class="navbar-brand" href="#">
    <img src="/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
 </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
       <sly data-sly-list.child="${childPages.pages.listChildren}">
      <li class="nav-item">
        <a class="nav-link" href="${child.pagePath}">${child.linkText}<span class="sr-only">(current)</span></a>
      </li>
        </sly>
     </ul>
  </div>
</nav>
</sly>

The NavbarModel.java

package com.project.core.models;
import javax.inject.Inject;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class NavbarModel {
@Inject
private Resource pages;
public Resource getPages() {
     return pages;
   }
}

The cq:dialog is a multifield with a textfield and pathbrowser.

After rendering I'm getting this html.

<div class="navbar aem-GridColumn aem-GridColumn--default--12">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="
    width: 100%;>
 <a class="navbar-brand" href="#">
    <img src="/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
 </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
       <sly data-sly-list.child=",,,,">
      <li class="nav-item">
        <a class="nav-link" href=""><span class="sr-only">(current)</span></a>
      </li>
        </sly>
     </ul>
  </div>
</nav>
</sly></div>

[arunpatidar · Accepted solution]

1. <sly data-sly-use.childPages="com.project.core.models.NavbarModel"> 
2.     <ul class="navbar-nav mr-auto" data-sly-list.child="${childPages.pages.listChildren}"> 
3.       <li class="nav-item"> 
4.         <a class="nav-link" href="${child.path}">${child.linkText}<span class="sr-only">(current)</span></a> 
5.       </li> 
6.      </ul> 
7. </sly> 

If the above works that mean there is an issue with either nav or img tag, just try to render them alone by one.

you may have to use proper context to render img or attributes.