2

I have two nav tabs

<ul class="nav nav-tabs" id="myTab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Profile</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" onclick="getData()">Data</a>
                      </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

                        <p id="first-tab-data></p>

                      </div>
                      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" >
                      </div>

In the 2nd tab, I added an onClick behaviour getData() to display my array.

Array:

 { name:"string 1", value:"this", other: "that" },
 { name:"string 2", value:"this2", other: "that2" },
 { name:"string 3", value:"this3", other: "that3" },
 { name:"string 4", value:"this4", other: "that4" },
 { name:"string 5", value:"this5", other: "that5" },
 { name:"string 6", value:"this6", other: "that6" },
 { name:"string 7", value:"this7", other: "that7" },
 { name:"string 8", value:"this8", other: "that8" },
 { name:"string 9", value:"this9", other: "that9" },
 { name:"string 10", value:"this10", other: "that10" },
 .
 .
 .
 { name:"string 20", value:"this10", other: "that10" }

getData() function:

for (var i = 0; i < distinct_review_array.length; i++) { 
      var html =  document
              .getElementById("profile")
              .insertAdjacentHTML("beforeend", "<div><p> distinct_review_array[i].name </p> <p> distinct_review_array[i].value </p> </div>");
    
    document.getElementById("profile").insertAdjacentHTML("beforeend", html);

However, when the code is executed, the contents loaded from getData spills out of the div. The p tag goes on and the div does not change its size to accommodate the size.

Is there any way I can make it so that the contents are inside the "profile" div and not spill out of the div? Thank you

tinylee
  • 53
  • 3
  • [`insertAdjacentHTML`](//developer.mozilla.org/docs/Web/API/Element/insertAdjacentHTML) doesn’t return anything, so `var html =` can be removed; `.insertAdjacentHTML("beforeend", html)` does not make sense. Your HTML string looks like you wanted to use variables. Did you mean `\`

    ${distinct_review_array[i].name}

    ${distinct_review_array[i].value}

    \``?     – Sebastian Simon Jan 02 '22 at 03:25
  • Is this a CSS issue? If so, [edit], add a [mre]. Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`). The dev tools provide an **Inspector** / **Elements** tab. Inspect your elements. What does the applied CSS reveal? Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Jan 02 '22 at 03:29

0 Answers0