What could be causing this template literal to display each column on its own row instead of in a

Incorporating Bootstrap 4 on the front end and utilizing a straightforward template literal for string passing. My concern lies in the fact that the columns are being outputted into separate rows, a behavior I find perplexing.


          const bodList = [
            {
              image: "https://placekitten.com/450/600",
              name: "First Last",
              profile: "https://www.google.com",
              termExp: "2023",
              title: "Chief Guy",
              company: "The Company"
            },
            {
              image: "https://placekitten.com/450/600",
              name: "First Last",
              profile: "https://www.google.com",
              termExp: "2023",
              title: "Chief Guy",
              company: "The Company"
            },
            {
              image: "https://placekitten.com/450/600",
              name: "First Last",
              profile: "https://www.google.com",
              termExp: "2023",
              title: "Chief Guy",
              company: "The Company"
            }
          ];

          function bodTemplate(bod) {
            return `
              <div class="col-md-4 col-lg-3">
                <div class="card border-0">
                  <img src="${bod.image}" class="card-img-top" alt="${bod.name}">
                  <div class="card-body pl-0">
                    <h5 class="card-title"><a href="${bod.profile}">${bod.name}</a> <span class="text-right">${bod.termExp}</span></h5>
                    <h6 class="card-title">${bod.title}</h6>
                    <h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
                  </div>
                </div>
              </div>
            `;
          }

          document.getElementById("boardDirectors").innerHTML = `
            ${bodList.map(bodTemplate).join(" ")}
          `;
        
      

          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

          <div class="container-fluid">
            <div class="row no-gutters">
              <div id="boardDirectors"></div>        
            </div>
          </div>
        
      

Answer №1

It seems like the issue is related to Bootstrap/CSS rather than being caused by your use of template literals.

The problem appears to be caused by the unnecessary <div> placed in between the row div and the col divs, disrupting the layout in Bootstrap's eyes and not treating the columns as intended. I suspect this has to do with the CSS rules and possibly the hierarchy requirements.

A simple solution would be to remove that extra div and assign the id="boardDirectors attribute to the row div instead.

I also took out the no-gutters class to prevent images from clustering next to each other, allowing some spacing between them.

const bodList = [
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  },
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  },
  {
    image: "https://placekitten.com/450/600",
    name: "First Last",
    profile: "https://www.google.com",
    termExp: "2023",
    title: "Chief Guy",
    company: "The Company"
  }
];

function bodTemplate(bod) {
  return `
    <div class="col-md-4 col-lg-3">
      <div class="card border-0">
        <img src="${bod.image}" class="card-img-top" alt="${bod.name}">
        <div class="card-body pl-0">
          <h5 class="card-title"><a href="${bod.profile}">${bod.name}</a> <span class="text-right">${bod.termExp}</span></h5>
          <h6 class="card-title">${bod.title}</h6>
          <h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
        </div>
      </div>
    </div>
  `;
}

document.getElementById("boardDirectors").innerHTML = `
  ${bodList.map(bodTemplate).join(" ")}
`;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>


<div class="container-fluid">
  <div class="row" id="boardDirectors">
  </div>
</div>

Answer №2

This information does not relate to template literals. It pertains to CSS instead.

An effective solution would be to add your id to the div below:

<div id="boardMembers" class="row no-gutters">

Then, remove the previous id. This should resolve the issue you are facing.

<div class="container-fluid">
  <div id="boardMembers" class="row no-gutters"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable: https://i.sstatic.net/YN7Iu.png The HTML ...

Guide to updating current rjs files to incorporate jQuery and json in Rails 3

Currently, in my Rails 3 application, I am using rjs to render partials in my controllers. An example of this is when saving a new item to a table, the table gets refreshed: respond_to do |format| format.js { render :update do |page| ...

Dynamic and static webpage

Is it possible to design a webpage using purely valid HTML and CSS that can dynamically adjust its size based on the browser window, while ensuring none of the content is lost or cut off? Please refer to the linked image for a visual representation of what ...

Tap, swipe the inner contents of a <div> element without being inside it

(Make sure to check out the image below) I'm facing an issue with a <div> on my website. It's not taking up the full width of the page, and the scrolling functionality within the <body> is not working as expected. I just want the cont ...

Effortlessly adjust item width in CSS Grid

I am currently utilizing CSS Grid to showcase various tags. If a tag happens to be quite large, with a width exceeding 150px, I would ideally like that specific item to expand across multiple columns as necessary. For instance, in the visual representation ...

Can you explain the concept of the "node module wrapper function" in the context of Node.js?

Can someone explain to me the concept of a "module wrapper function" and how it affects my code? (function (exports, require, module, __filename, __dirname) { }); ...

What is the best way to represent objects in a user interface?

Currently, I have some information stored in the following format: data : { full_name: 'John Doe', date_of_birth: '01-01-1990' } I am looking to display this data in a table-like format that resembles: Full Name: John Doe Date Of B ...

Tips for safeguarding the security of my PHP API when accessed through Ajax using OAuth2

I've developed a cross-origin ajax application that utilizes some personal APIs I created. Now, I'm looking to enhance the security measures so only my application has access to the API. After researching, I came across OAuth2 at OAuth2. I foll ...

What is the process for clearing CSS position properties?

I am facing an issue with a multiselect dropdown in my kendo grid, which is being used for a kendo modal window. The dropdown box initially appears correctly but when I scroll horizontally due to multiple columns, the selected value still displays at the o ...

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

An issue occurred with accessing window handles in Selenium WebDriverJS

I have encountered a similar question, but the provided answer is not working for me. Unfortunately, I do not have enough reputation to comment or request clarification on that post yet. My setup involves JavaScript, WebDriverJS, and NodeJS. The specific ...

Challenges with the Express server console

I have configured an Express Server and everything appears to be functioning correctly. The content I send is rendered in the browser, and my console.log test statements are being displayed in the terminal. However, when I inspect the browser page, nothi ...

The upload directory fails to include the folder name when sending a file

After experimenting with the new directory upload feature, I encountered an issue where the server request did not preserve the exact folder structure as expected. Here is the HTML code snippet: <form action="http://localhost:3000/" method="post" enct ...

Is there a way to troubleshoot a webpack-compiled npm module effectively?

Looking to debug an npm module compiled with webpack by setting breakpoints and stepping through the code? The issue may arise when importing the module locally using npm link, as only the compiled code is accessible for debugging from the application. W ...

Encountering a hydration issue in Next.js when attempting to refresh the page after switching languages (excluding English) with next-translate/useTranslation

I've encountered an issue with the useTranslation hook from the next-translate package in my Next.js project. Although all languages are being recognized, I'm facing a hydration error whenever I change the language and refresh the page. Below is ...

Update the headers of the axios.create instance that is exported by Axios

I have a single api.js file that exports an instance of axios.create() by default: import axios from 'axios' import Cookies from 'js-cookie' const api = axios.create({ baseURL: process.env.VUE_APP_API_URL, timeout: 10000, headers ...

Adding classes to a div in a sequential animation using jQuery: A step-by-step guide

I'm aiming to create an animated effect using jQuery that replicates the motion in this GIF. I experimented with CSS3 animation keyframes, but the result was not as clean and polished as I would like. If there is a simpler way to achieve this effect u ...

What is the best way to extract individual objects from several arrays and consolidate them into a single array?

Currently, I have a collection of objects stored in a variable called listOfObjects. They are not separated by commas because I utilized the Object.entries method to extract these values from another array. console.log(listOfObjects) outputs { q: 'L ...

Utilize viewport activation to determine browser width

Is there a way to dynamically add the viewport-meta tag only for devices with screen widths larger than 680px? If the screen is smaller than 680px, then the responsive style file should be enabled instead. I attempted to achieve this by placing the follow ...

The common CSS technique using the before pseudo class is failing to address the issue of content disappearing behind the page

I've been struggling with implementing CSS code in my main stylesheet file. I followed the advice online to use the ::before pseudo class to align the height and margin with the header. However, even after making these adjustments, the content still a ...