Generating a dynamic layout using Bootstrap grid system

I am attempting to use a JavaScript function to dynamically generate bootstrap columns. The objective is to have them appear in a single row as distinct columns.https://i.sstatic.net/50xDo.png

Here is the current appearance:

I am invoking this function on window.onload() with the div id:

// Refresh the bootstrap grid after adding tasks
function updateTaskContainerHead(containerId){
    let containerHead = document.getElementById(containerId);
    // Convert the row headings into an HTML container
    let tblRowHeadings = ['Task Name','Assigned To','Priority','Due Date',''];
    let tblHeadRow = document.createElement("div");
    tblHeadRow.classname="row";
    for (let heading of tblRowHeadings){
        let tblHeadCell = document.createElement("div");
        tblHeadCell.className="col";
        let cellText = document.createTextNode(heading);
        tblHeadCell.appendChild(cellText);
        tblHeadRow.appendChild(tblHeadCell);
    }
    containerHead.appendChild(tblHeadRow);
}

and the HTML component is simply:

<lead>Completed Tasks</lead>
<div class="container" id="ongoingTasksContainer">

What could be causing the issue?

javascriptbootstrap-4

Answer №1

Here's a common mistake that is easily overlooked, especially when dealing with case sensitivity:

tblHeadRow.classname="row";

The correct syntax should be:

tblHeadRow.className="row";

Answer №2

Your implementation of the tblHeadRow class is incorrect.

To rectify this, utilize the element.classList.add(className) method. Check out the (documentation)

If you employ this approach, you will successfully style your columns:

tblHeadRow.classList.add("row");

For further guidance, refer to this fiddle.

Nevertheless, I strongly suggest opting for a table in this scenario. If you are constructing a structure with tbl, head, and cell, a table layout seems more appropriate. You can also explore helper classes provided by Bootstrap.

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

Utilizing ng-model-options updateOn:blur in conjunction with the uib-datepicker popup

There is an input field where a user can either enter a date manually or choose one from the uib-datepicker calendar (https://angular-ui.github.io/bootstrap/). When the user clicks on the input, the calendar pops up for date selection. Here is the input co ...

javascriptangularjstwitter-bootstrapdatepickerangular-ui-bootstrap

Using a function to identify and check dynamically added checkboxes

I am using a PHP page that loads a group of categories from another PHP script as checkboxes. Here is the format for the checkboxes: <input type='checkbox' class='cat-selector' id='Business' data-toggle='checkbox&apo ...

javascriptphpjquery

How to disable the ripple effect of a parent button in Material UI when clicking on a nested child button?

Attempting to nest one button within another (IconButton inside ListItem with the button prop) is proving challenging. The issue lies in the fact that the ripple animation of the ListItem is triggered even when clicking on the IconButton. Ideally, I would ...

javascriptreactjsmaterial-ui

How to reset or clear the RangePicker in Ant Design for React

I am working with a component similar to this one and I am looking for a way to make it automatically reset after the user selects a date. Currently, once a date is selected, it remains as is until manually cleared. Current behavior: https://i.sstatic.ne ...

javascriptreactjsdateantd

What is the advantage of using event.target over directly referencing the element in eventListeners?

Suppose there are several buttons in an HTML file and the following code is executed: const buttons = document.querySelectorAll('button'); buttons.forEach((btn) => { btn.addEventListener('click', (e) => { console.log(btn.te ...

javascriptaddeventlistenertarget

What is causing the reluctance of my Angular test to accept my custom form validation function?

I'm currently facing an issue with testing an angular component called "FooComponent" using Karma/Jasmine. Snippet of code from foo.component.spec.ts file: describe('FooComponent', () => { let component: FooComponent let fixture ...

javascriptangulartypescriptjasminekarma-runner

The passing of query string parameters from JavaScript to a PHP processing script is ineffective

I am looking to dynamically populate a jQWidgets listbox control on my webpage with data retrieved from a MySQL database table once the page has finished loading and rendering. PARTIAL SOLUTION: You can find a solution here. NEW PROBLEM: I have created a ...

phpjavascriptjquerymysqlajax

Bootstrap modal with sticky-top class displays abnormal margin and padding upon being shown

Whenever I launch a bootstrap modal, I notice unexpected side padding or margin appearing on certain HTML elements. For instance: Before displaying the modal: <div id="fixedMenu" class="d-none container-fluid menu sticky-top px-0" s ...

javascripthtmlcssbootstrap-4bootstrap-modal

Spinning html/css content using JavaScript

Greetings! I am currently working on a demo site using just HTML, CSS, and JavaScript. Typically, I would use Ruby and render partials to handle this issue, but I wanted to challenge myself with JavaScript practice. So far, I have created a code block that ...

javascripthtmlcss

Displaying items as objects in search results in Kendo Angular's auto complete feature

Seeking assistance with implementing Kendo Angular's auto complete widget using server filtering. Following the service call, the popup displays [object Object] and the count of these matches the results retrieved from the server. Could someone kindly ...

javascriptangularjsautocompletekendo-ui

Angular signals are easily managed using new Set()

Curious about using the new Set() object in JavaScript with Angular "new" Signals? After experimenting with it for a while, I decided to share my findings here. It's all about simple adding and deleting. set = signal(new Set()); // Initializing an emp ...

javascriptangularsignals

Display sibling element upon hovering with AngularJS

Within a single view, I have multiple instances of repeated content elements. Each content element contains an anchor element. My goal is to toggle a class on a sibling element within that specific content element when a user hovers over the anchor. For c ...

javascriptcssangularjs

Tips for achieving text alignment after a line break in React JS

I am struggling to align the text properly after a line break. I have attempted using CSS, such as setting margin bottom on the text. Unfortunately, margin bottom does not seem to work. I also tried adjusting the line height without success. ...

javascriptcssreactjsstyles

Update the js file by incorporating the import statement

Currently, I am in the process of transitioning to using imports instead of requires for modules. Here is an example of my previous code: const { NETWORK } = require(`${basePath}/constants/network.js`); The content of network.js file is as follows: export ...

javascripttypescriptimport

Deploying an Angular 2 application using SystemJS and Gulp can sometimes feel cumbersome due to its

Although I have experience developing with Angular, I recently started working with Angular 2. After completing the quickstarter tutorial, I attempted to deploy the finished application on a server in production mode. My lack of experience with SystemJS a ...

javascriptangulargulpsystemjs

Ways to implement variables in Jade that are transmitted through res.render

Firstly, I would like to apologize for any errors in my English. In my router file, I have the following code: exports.index = function (req, res) { res.render('./game/main', {name:req.session.name, menuOp:'Home'}); } Additionally, ...

javascriptnode.jspug

Angular - Dealing with the value of zero in the @if template syntax

Having a dilemma with the Angular template flow syntax using @if. There is a value within an RxJs Observable, which is handled with the async pipe and assigned to a variable. @if (currentPageNumber$ | async; as currentPageNumber) { // currentPageNumber is ...

javascriptangular

Positioning the camera for an infinite ThreeJs gaming experience

I am currently learning Three.js and attempting to create my first game: an endless runner. After reading this article, I aim to create a similar game where the main character, a blue ball, rolls infinitely forward while dodging obstacles that appear in i ...

javascriptthree.js

Transferring PHP Arrays to JavaScript with JQuery

I am facing an issue with redrawing markers (on Google Maps) from a database using jQuery form. Here is the code snippet: Index.html: var map; var data; function updateLocations(){ var post= $.post('php/getLoc.php',{table: "Auto"), functio ...

javascriptphpjquery

Updating data in Redux triggers a refresh of Material UI table data

Utilizing the material-ui data table component to showcase data, enabling users to update and save information via a form when clicking on a row. Implemented react-redux for state management and dispatching updated rows to the existing data. However, despi ...

javascriptreactjsreduxmaterial-ui