The Dilemma
I am currently working on an Angular project that incorporates Bootstrap and ng-bootstrap. My intention is to utilize the grid system within this project, but I encountered some bugs along the way.When trying to render the following HTML/TS code (with an empty SCSS file)
<div class="container-fluid">
<div class="row">
<ng-container *ngFor="let entry of entries">
<span
class="col-md-6"
style="height: 3rem; border: 2px solid black;"
>
Text
</span>
</ng-container>
</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
entries = Array(8).fill(undefined);
}
The output appears as follows: https://i.stack.imgur.com/37l45.png
I was expecting to see 2 columns of entries, similar to what is shown in the second screenshot below.
Although the styling of the col-md-6 class is correctly applied, there seems to be an issue where the width settings are being overridden by certain rules defined in _rfs.scss, a feature within Bootstrap.
Findings
To investigate further, I set up a new project with Bootstrap and ng-bootstrap installed, where the same HTML code worked without any problems. This indicates the issue is specific to my original project.https://i.stack.imgur.com/zIjUA.png
Here's what I have uncovered so far:
- The HTML structure and CSS classes are correct, as they render properly in a fresh project.
- The issue does not seem to stem from the Bootstrap.scss imports, which follow the standard format of
@import '/node_modules/bootstrap/scss/bootstrap.scss'; - Copying over all relevant SCSS files to the new project did not result in any rendering issues.
- Installing ng-bootstrap did not cause any complications in the fresh project either.
- The package.json dependencies and angular.json assets/styles also do not seem to be related to the problem.
- The inconsistency appears to be component-specific, affecting how the HTML is processed in each respective project.
With these observations in mind, I have a couple of questions:
- Why are the _rfs.scss rules impacting the rows only in my original project, but not in the fresh one?
- How can I resolve this conflicting behavior?
Related Issues
There is a similar question posted about this matter here.However, the proposed solution in that thread did not address the underlying problem effectively. The overriding of the width property by _rfs.scss is indeed causing the initial discrepancy, though the root cause might involve the presence of _rfs.scss itself, which remains uncertain.
It should be noted that assigning just "col-md-6" is adequate to achieve the desired column layout based on screen size, as demonstrated in Bootstrap documentation.
Due to insufficient details provided in the previous question for troubleshooting purposes, it seemed necessary to create a new inquiry.
Troubleshooting Resources
If applicable, here is mystyles.scss content:
@import './custom_bootstrap.scss';
@import '/node_modules/bootstrap/scss/bootstrap.scss'; //Must be imported after custom_bootstrap so that values from custom_bootstrap are available for overriding
@import './variables.scss';
html{
font-size: 16px;
}
body{
font-family: "Source Sans Pro", sans-serif;
overflow-x: hidden;
}
.highlight{
background-color: var(--highlight-gray);
}
.hover-highlight{
transition: 0.2s background-color;
}
.pointer{
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.hover-highlight:hover{
background-color: var(--highlight-gray);
}
}
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
font-weight: bold!important;
line-height: 1.5;
margin: 0 0 1rem 0;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
h1{
letter-spacing: 0.5rem!important;
font-size: 2.25rem!important;
line-height: 1.3!important;
}
h2{
letter-spacing: 0.2rem!important;
font-size: 1.5rem!important;
}
blockquote{
border-left: solid 4px var(--bs-white);
font-style: italic;
margin: var(--spacer-0);
padding: var(--spacer-2) var(--spacer-0) var(--spacer-1) var(--spacer-4);
}
@import './custom_ngbootstrap.scss';
@import './global_class_modifications.scss';
@import './custom_leaflet.scss';