Sightly showing unexpected behaviour with bootstrap

Avatar

Avatar

jezwn

Avatar

jezwn

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)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840
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)