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.