Issue with Bootstrap 4 column width when using Angular 2 *ngFor

I have a container that displays search results. The layout is set up using Bootstrap columns, but there seems to be excessive padding or margin causing the results to appear very narrow. Interestingly, if I manually input each result instead of using *ngFor directive, the display looks correct.

Below is the code snippet responsible for iterating over the list of results:

<div id="results" class="text-uppercase">
    <div id="up-button-row" class="row">
        <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4">
            <button id="up-button" class="m-x-auto" md-fab [disableRipple]="true" (click)="scrollUp()"></button>
        </div>
    </div>
    <div class="row" *ngIf="noResults">
        <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
            offset-xl-4">
            <h2 class="m-x-auto">No vegan stuff found :-(</h2>
        </div>
    </div>
    <div class="row" *ngIf="!noResults">
        <div *ngFor="let result of results">
            <result [result]="result"></result>
        </div>
    </div>
</div>

This section contains the individual search results represented by the custom component 'result.component' utilizing the following template:

<div class="col-sm-6 col-md-4 col-xl-3">
   <div class="product-item scale-on-hover">
      <div [ngStyle]="{background: result.image}" id="image"></div>
      <div id="info">
         <h6 id="brand" class="medium-text">{{result.brand}}</h6>
         <h6 id="name" class="medium-text">{{result.name}}</h6>
      </div>
   </div>
</div>

Despite the expected behavior, the actual result displayed appears extremely narrow and cuts off most of the content within it.

A screenshot demonstrating the issue can be found here:

https://i.sstatic.net/1wCck.png

The problem seems to be related to the Bootstrap columns having excessive padding or margin. The default width should be 100%, allowing the content to scale properly within the columns. However, this does not seem to be the case. Here are some detailed CSS styles applied to the column element:

// CSS Styles
element.style {
}
@media (min-width: 1200px)
.col-xl-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

// More CSS styles...

If you encounter any suggestions or solutions to resolve this issue without compromising the dynamic nature of the result display, please share your thoughts or recommendations.

Answer №1

Trying other solutions didn't solve my problem, but I found this one to be effective:

<div class="row">
<div *ngFor="let item of items" class="col-md-4 col-sm-6 col-12">
    <p>{{item.awesome}}</p>
</div>
</div>

Answer №2

After trying various solutions, I finally found one that worked for me. It's worth mentioning that in my case, the issue was caused by missing the bootstrap.css file in the index.html. Don't forget to double-check this detail as well!

<div class="container">
<div *ngIf='projects && projects.length'>
    <div class="row">
    <div *ngFor='let project of projects'> 
        <div class="col-md-3 col-sm-4 col-xs-6">
        <h4>{{project.by}}</h4>
        </div>
    </div>
    </div>
</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

Material-UI's JSS does not adhere to the justify content property

Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it. I suspect there might be a naming issue since mat ...

How can I efficiently utilize HTML/CSS/JS to float items and create a grid that accommodates expandable items while minimizing wasted space?

After meticulously configuring a basic grid of divs using float, I've encountered an issue. When expanding an item in the right-hand column, the layout shifts awkwardly. My goal is to have boxes A and B seamlessly move up to fill the empty space, whi ...

Javascript AppendChild Problem with Internet Explorer

When it comes to this particular snippet of code, everything seems to run smoothly in Firefox and Chrome. However, Internet Explorer is causing some major headaches. var anotherDiv= document.getElementById("anotherDiv"); var destination = document.getElem ...

jQuery autoscroll feature for Carousels added

I followed a tutorial to create a jQuery Carousel, but made some modifications. You can find the tutorial here. This is the code I have: (function ($) { $.fn.infiniteCarousel = function () { // Function to repeat a string function repeat(str, num ...

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

I have a form with a list of users and checkboxes below their names. Each user has a button that should select all checkboxes assigned to them. Below is the code for the dynamically created buttons and checkboxes. The included function takes the form name ...

Looking to retrieve the smallest amount of array sets in Angular4

I'm currently developing an Angular 4 application and facing an issue with a function I'm trying to write. The goal is to extract the minimum and maximum numbers from three array objects. The yAxisData object consists of three yaxis array objects ...

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...

Executing a function in the view/template with Angular 2+

Whenever a function is called in the view of an Angular component, it seems to be executed repeatedly. A typical example of this scenario can be seen below: nightclub.component.ts import { Component } from '@angular/core'; @Component({ selec ...

Steps for incorporating a variable into a hyperlink

I'm trying to achieve something similar to this: var myname = req.session.name; <------- dynamic <a href="/upload?name=" + myname class="btn btn-info btn-md"> However, I am facing issues with making it work. How can I properly ...

How can I utilize jQuery to create a remove button that deletes individual div elements one at a time?

<div class= "button"> <button id="More" type="submit">Click here to add more Parameters</button> <button id="Remove" type="submit">Click here to Remove Parameters</button> </div> <script> var count = 2; ...

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

Is there a way to modify the text of image URLs using JavaScript?

My method of replacing a specific word in text works like this: document.body.innerHTML = document.body.innerHTML.replace(/katt/g, "smurf"); However, when I try to replace an image URL in HTML using the same line of code, it doesn't seem to work. H ...

Learn the methods for successfully transferring dynamic values from Angular to a jQuery script

This is the script that I have included in my HTML code: <div class="progress-bar"></div> <script type="text/javascript"> $('.progress-bar').gradientProgressBar({ value: $(this).attr('$scope.moodvalue'), ...

Click on the entire Material-UI formControlLabel to select it, not just the text

I have recently started working with the material UI. Currently, I am dealing with a form that looks like this: <FormControl variant="outlined" className={css.formControl} margin="dense" key={"abc_" + index} > <FormControlLabel cont ...

Creating DIV's with Equal Heights Using AngularJS ng-repeat

I'm currently facing an issue with aligning two side-by-side divs to the same height when the content is generated using an ng-repeat function. Using flexbox is causing responsiveness issues, and I'm unsure of the appropriate time to call a jQuer ...

Is it possible to access BreakpointObserver in Angular Material before the page has finished loading?

When utilizing the Angular BreakpointObserver in combination with Angular Material, I encounter an issue where the observer only triggers a change after it detects a difference. This becomes problematic on initial page load as there is no existing change t ...

Meteor chat platform now offers the option to create multiple chat rooms

I've been working on an application that features multiple chat rooms. Currently, one of the rooms is functional in terms of sending and receiving messages. However, when I navigate to a different room and try to send a message, the message doesn&apos ...

Interactive JQuery plugin for scrolling through thumbnails with customizable buttons

I am attempting to create a jQuery thumbnail scroller with buttons that respond to mousedown and mouseup events. I have successfully implemented the scrolling functionality, but I am facing issues when trying to refactor it into a reusable function. Below ...

A CSS3 property that does not have a vendor prefix, followed by properties that do have vendor prefixes

As discussed in a response on Stack Overflow, one reason for the necessity of vendor prefixes in CSS properties is to prevent web pages from breaking even if the final specification varies from the implementation by different browsers. In a recent reading ...

Ensuring grid columns are equal for varying text sizes

I am looking to achieve equal width and spacing for columns without using the width, min-width, max-width properties. Can anyone help me accomplish this using flex or any other method? https://i.sstatic.net/xo56M.png .d-flex { display: flex; } .d-fl ...