Angular 6 CSS spacing dilemmas

Question

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc.

We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Angular 5 example, there are spaces between the buttons both inside and outside of the Angular app.

However,

In Angular 6, the spacing between the buttons within the Angular app has been removed.

Any suggestions?

Angular 5 Example (Desired behavior)

https://stackblitz.com/edit/angular-5-example-kyu8ud?file=index.html

Angular 6 Example (Current issues described above)

https://stackblitz.com/edit/angular-vyfwih?file=src%2Fapp%2Fapp.component.html

javascript css angular angular5 angular6

Answer 1

Answer №1

Starting with Angular 6, the preserveWhitespaces compiler option is defaulted to false. This is why you may have noticed that change in behavior. If you want to modify this setting, you can do so in your tsconfig file:

"angularCompilerOptions": {
  "preserveWhitespaces": true
}

In essence, this setting determines the presence of whitespace in your HTML code. For example:

<button>Test1</button> <-- whitespace here
<button>Test2</button>

compared to

<button>Test1</button><button>Test2</button> <-- no whitespace

You can view an example of Angular 5 without whitespace Here, showing how it aligns with the behavior in Angular 6 version.

Answer 2

Starting with Angular 6, the preserveWhitespaces compiler option is defaulted to false. This is why you may have noticed that change in behavior. If you want to modify this setting, you can do so in your tsconfig file:

"angularCompilerOptions": {
  "preserveWhitespaces": true
}

In essence, this setting determines the presence of whitespace in your HTML code. For example:

<button>Test1</button> <-- whitespace here
<button>Test2</button>

compared to

<button>Test1</button><button>Test2</button> <-- no whitespace

You can view an example of Angular 5 without whitespace Here, showing how it aligns with the behavior in Angular 6 version.

Answer 3

Answer №2

The reason why you are encountering this issue is due to the presence of Bootstrap in your Angular 5 Example. Make sure to check the screenshot showing your dependencies, where you will see that Bootstrap is indeed included :).

For a visual reference, here is the screenshot displaying the list of Dependencies.

Reflect on when you originally added Bootstrap as a dependency.

Answer 4

The reason why you are encountering this issue is due to the presence of Bootstrap in your Angular 5 Example. Make sure to check the screenshot showing your dependencies, where you will see that Bootstrap is indeed included :).

For a visual reference, here is the screenshot displaying the list of Dependencies.

Reflect on when you originally added Bootstrap as a dependency.

Answer 5

Answer №3

remember to include this in your document

platformBrowserDynamic() .bootstrapModule(AppModule, { maintainWhitespace: true})

Answer 6

remember to include this in your document

platformBrowserDynamic() .bootstrapModule(AppModule, { maintainWhitespace: true})

Answer 7

Answer №4

Success! By following the instructions in this post, I was able to restore my whitespacing by including the following:

,
"angularCompilerOptions": {
  "preserveWhitespaces": true
}

This code snippet was added to tsconfig.app.json

Additionally, I inserted it into main.ts within platformBrowserDynamic like so:

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true})

Once these steps were completed, I ran ng serve again to implement the changes successfully.

Answer 8

Success! By following the instructions in this post, I was able to restore my whitespacing by including the following:

,
"angularCompilerOptions": {
  "preserveWhitespaces": true
}

This code snippet was added to tsconfig.app.json

Additionally, I inserted it into main.ts within platformBrowserDynamic like so:

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true})

Once these steps were completed, I ran ng serve again to implement the changes successfully.

Angular 6 CSS spacing dilemmas

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to efficiently update the API_BASE_URL in a TypeScript Angular client generated by NSwag

Comparison of Foundation5 source ordering: main content versus sidebar

Harness the power of Vue.js by implementing plugin methods in your code

How to Create Smooth Transitions for Text Arrays using jQuery's Fade In and Fade Out Features

What is the best way to link options from a select directive with a different array?

Using ExtJS to populate a panel with data from various sources

jQuery function used to create an HTML menu

I'm having trouble figuring out why this React Router setup is not functioning properly. Can anyone provide any insights

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

Discover an alternative to Events by harnessing the power of Observables to effectively listen for dismiss events in Angular Ionic

A tool designed to create a function that can fetch information from a JSON file

Firefox browser does not display flashing titles for tabs

Customize a theme component only when it is a child of another component

Utilizing Sequelize validation through condition objects

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

A Nuxt plugin that integrates a separate website into the serverMiddleware

"Learn how to securely redirect to a custom URI scheme with a fail-safe option to display alternative content if not supported

How can I make the arrows work on a secondary slider with EasySlider1.7?

The use of async/await within an observable function

Is there a way to generate a modal list of values by utilizing bootstrap and angular, while incorporating spring boot as the backend technology?