Customize card borders with Handlebars and BootStrap styling

I am utilizing Bootstrap 4 with nested cards containing tabs and headers, which also house forms. Additionally, I am using Handlebars to retrieve JSON data and fill in the form fields.

However, upon transitioning from hardcoded data to using Handlebars for form population, I noticed that the borders around all cards except the first one disappear.

Handlebars.registerHelper("incIndex",function(property){
    var index = property + 1;
    str = index.toString();
    return str;
});

$(function() {
  let template = Handlebars.compile($("#deliveries-template1").html());

  let data = [{
    "name": "Acme",
    "city": "Seattle",
    "reference": "1905421",
    "units": "5",
  }, {
    "name": "CostLess",
    "city": "Redmond",
    "reference": "2105413",
    "units": "1",
  },{
    "name": "FastRepair",
    "city": "Lynden",
    "reference": "1994512",
    "units": "12",
  }];

  $('#delCard1').html(template(data));

});

JSFiddle

Answer №1

The border styling is applied to the card class, which is currently only used on the wrapper div. This results in only 1 border being displayed. To have borders on both cards, you should remove the card class from the div where you are appending the handlebar template and instead add it within the each loop of the handlebar template. Additionally, I have included another class mb-2 to create some space between the two cards.

{{#each this}}
     <div class="card mb-2">

Handlebars.registerHelper("incIndex", function(property) {
  var index = property + 1;
  str = index.toString();
  return str;
});

$(function() {

  //get custom template
  var template = Handlebars.compile($("#deliveries-template1").html());

  var data = [{
    "name": "Acme",
    "city": "Seattle",
    "reference": "1905421",
    "units": "5",
  }, {
    "name": "CostLess",
    "city": "Redmond",
    "reference": "2105413",
    "units": "1",
  }, {
    "name": "FastRepair",
    "city": "Lynden",
    "reference": "1994512",
    "units": "12",
  }];

  $('#delCard1').html(template(data));

});

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

Placing toast notifications on top of dialog modals

When trying to combine a DaisyUI modal (a TailwindCSS UI library) with a toast alert library from GitHub, I'm facing an issue where the global toast alerts are not appearing above the modal dialog. Despite experimenting with various CSS options using ...

Explaining Content Alignment for various breakpoints in Bootstrap 4

Is there a way to manage the alignment of content in a column for varying breakpoints? Specifically, I would like the email text to be justified to the end for larger columns but centered for smaller columns. Any suggestions for an elegant solution? < ...

How to vertically center a form element in Bootstrap 4

As a newbie to using bootstrap 4 for the first time, I expected vertical alignment of elements to be easy, especially with flex being touted as the simplest way to achieve this. The issue: Struggling to vertically align my form element within my navigatio ...

Jquery each function not correctly retrieving all elements with the specified class

I created a page featuring a search box and 5 Bootstrap Cards. I set it up so that the cards would hide if the text typed in the search box does not match the content within the data-tags attribute. Everything seems to be working fine, except that it is on ...

Tips for preventing DIV elements from overlapping

In the process of creating a CSS design for a SIM game I enjoy playing, a client requested four boxes: two large ones with two smaller ones aligned horizontally in between. Everything was going smoothly until I attempted to add headers to the boxes. The en ...

Addressing Layout Problems When I Enlarge the Browser Width

My website is www.adventureswithross.com When the device width is larger than 601px, I have specific requirements: I need the menu and custom header to be seamlessly connected without any spacing in between. To address the issue of space above the custo ...

Always ensure that the horizontal scrollbar is visible without the need for vertical scrolling

I'm attempting to create a data grid-style layout where the left side is fixed and only the right side is scrollable. However, the entire div needs to be vertically scrollable. The concept is functioning correctly, but the horizontal scrollbar appears ...

Generate a container element that occupies the remaining space on the screen under a header of adjustable height

I'm trying to create a layout where the header height can vary, but the footer has a fixed height. I want the left nav and content sections to fill the screen height, with the left nav having a fixed width and the content taking up the remainder. Is ...

Customizing CSS in Blazor on mouseover with multiple displayed divs

@foreach (var item in RootOfJson.results) { <div class="card" @onmouseout="@OnMouseOut" @onmouseover="@OnMouseOver"> <img class="@Imgdisplay" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

Font compatibility issue in email template on mobile devices

When I send out my email template, Agency FB font displays correctly in the desktop view, but reverts back to PT-sans in device view. I've ensured that the font family is set to Agency FB and included the URL link. My emails are sent using MailChimp. ...

Copy the CSS path from Firebug and paste it into the command line suggested

Currently, I am working on customizing the firebug plugin for Firefox. My goal is to enable a feature where when a user Inspects an element and clicks 'Copy CSS path', the CSS path will automatically be pasted onto the command line of the firebug ...

The JSSOR slider is having trouble maintaining its correct position

Currently, I am utilizing the Jssor slider and have reviewed various posts on how to make it responsive and set it to be the full width of the screen. However, my problem lies in the fact that as it expands and enlarges, it overlaps with both the header ...

How Can I Move My Toggle Button to the Left of My Brand Image/Name in Bootstrap 4.5.0?

My issue is with the toggle button placement, as it always appears slightly to the right of my brand image. The same issue occurs when using a brand name. This is the current layout: https://i.sstatic.net/zdvN0.jpg I would like the toggle to be positione ...

Encountering a problem when transitioning Bootstrap 3 code to version 5

After finding this template on github, I noticed it was a bit outdated with the use of Bootstrap 3. I decided to update it to Bootstrap 5 and replaced the Bootstrap 3 CDN accordingly. However, upon doing so, I encountered some issues. Can anyone help me ...

CSS rule for targeting an element that does not have any child elements

I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...

Trouble with CSS positioned image rendering in Internet Explorer? Z-index not solving the issue?

I've been working on a timeline project where the completed sections should have a green background with a check mark image in the foreground. It appears correctly in Firefox, Chrome, and Safari. However, in IE 7 and 8 (and possibly 9), the layout is ...

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Need some assistance with a website project for a client. The scrollbars on each page are not loading or changing height until the window is resized. I have a jQuery scrollbar in place, but disabling it does not solve the issue as the normal scrollbar beha ...

The z-index of two elements seems to be behaving differently than anticipated

I am encountering an issue with the code provided below, which is a simplified version of a larger problem. Can you explain why, if: .div_A {z-index: 10;} < .div_C {z-index: 20;} the button inside div_C appears behind div_A? I need to understand the ...

Adjust the height of an element when the maximum height is set to none

I am trying to add animation to the opening of a menu on my website. This is achieved by adjusting the max-height property of the <div> element that represents the menu, as well as changing the display property. The max-height value is being changed ...