Sightly showing unexpected behaviour with bootstrap

jezwn

27-11-2019

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>

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar

MVP

30-11-2019

  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.

Answers (0)