Angular and Bootstrap do not support margin styles

While working with Angular 5 and Bootstrap, I have encountered an issue with using inline styles for margin. The template I am using is as follows:

@Component({
    selector: "dynamic-container-component",
    template: `
        <div 
            style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;" class="col">
        </div>
    `
})
export default class DynamicContainerComponent {
}

There are multiple instances of dynamic-container-component within a container.

@Component({
    selector: "container",
    template: `
        <div class="container">
          <div class="row">
            <dynamic-container-component></dynamic-container-component>
            <dynamic-container-component></dynamic-container-component>
          </div>
        </div>
    `
})
export default class Container{
}

When rendered, the HTML structure would be similar to the following:

<div>
  <dynamic-container-component>
   <div style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;">
    </div>
  </dynamic-container-component>
  <dynamic-container-component>
   <div style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;">
    </div>
  </dynamic-container-component>
</div>

However, the margin style does not render correctly in the browser.

Answer №1

The problem lies with the .col class, which has a width of 100% and collapsing margins. My suggestion is to adjust the CSS either in the parent component or the child component as follows:

::ng-deep [class*="col"] {
   width:calc(100% - 20px) !important;  // Adjusting for a 10px margin on each side
}

Check out the demo

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

Height of the div dynamically increases upwards

Just a quick question - is there a way to make position: fixed divs at the bottom of an element (such as the body) grow upwards as content is dynamically added? Maybe something like anchor: bottom or increase: up? I'm thinking that using JavaScript m ...

Tips for Integrating an Angular App into a Different Website

I have an Angular application hosted at www.A.com, My client has a website hosted at www.B.com I am looking to enable my client to embed the Angular app on their webpage without physically copying the application files. I want them to simply add some HTML ...

Unable to access any pages using the angular-cli http-server for deployment

When I run my project using 'ng serve', everything works fine. However, when I deploy it on a server using 'http-server ./dist', none of the pages can be accessed and an error message is displayed: host:~/morange/project$ http-server . ...

Font loading error in Angular 2 - Denied access to load font

Recently, I started experimenting with Angular 2 and delved into working with routes. Surprisingly, everything was functioning seamlessly until I introduced routes into the mix. Now, whenever I navigate to /home, an error pops up. Refused to load the font ...

How to access the state of an @ngrx/data entity in a reducer function in ngrx 8

I am trying to access the state of a ngrx/data entity within a reducer function. Currently, I am working on implementing a pager (pagination) feature where users can navigate through different pages. However, I am facing a challenge in determining the tot ...

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

I have a group of form elements located within a hidden div which looks like this: <div id="jDivUpdateFolder" style="display:none;"> <asp:TextBox ID="txtEditFolderName" runat="server"></asp:TextBox><br /> <asp:TextBox ID ...

When working with a barcode font in Chrome, using style.fontFamily may not be effective, but utilizing className can achieve the desired result

Take a look at this HTML snippet: <style> .barcode { font-family: 'BC C39 3 to 1 Medium'; } </style> <div><span id='spn'>1234567</span></div> This code will apply a barcode font style: <script> ...

Show the Select component in a grid format with a list view, displaying three items per row

Within my react Dropdown component, there is currently a list view displayed when an item is selected. However, I am looking to modify it so that the items are arranged in a grid format with 3 items per row. Sample Code: import { Dropdown } from 'pri ...

Localization of labels and buttons in Angular Owl Date Time Picker is not supported

When using the Owl Date Time Picker, I noticed that the From and To labels, as well as the Set and Cancel buttons are not being localized. Here is the code snippet I am using to specify the locale: constructor( private dateTimeAdapter: DateTimeAdapter&l ...

Top Choice for Customizable Location Bar Dragging

I'm currently working on an app that features a draggable location bar. This feature will allow users to navigate through chapters in a book and will be displayed at the bottom of the screen, similar to Kindle or other mobile reading applications. I ...

Combining various POST requests by matching the common value in each array. (Angular)

Here are the two different sets of data: "statusCode": 200, "data": [ { "color": { "id": "1111", "name": null, "hex&quo ...

disappearance of background image at bootstrap breakpoint

Hey there, I'm diving into a new journey in web design and I've encountered my first newbie issue. I'm attempting to place an image and text side by side on my web layout, but as soon as the breakpoint hits below 560px, the image disappears ...

In Internet Explorer, auto margins in Flexbox do not function properly when using justify-content: center

My table has cells that can contain both icons and text, with the icons appearing to the left of the text. There are different alignment scenarios to consider: Only an icon is present: The icon should be centered Only text is present: The text should be ...

Developing a custom CSS for React using clamp and focus attributes

I'm currently working on creating an object to be used in inline style, but I'm having trouble figuring out how to correctly write `clamp` and `after`. const PhoneInputStyle = { fontSize: clamp("13px", "1.111vw", "16px"), /*this particular ...

gulp-angular2 task is malfunctioning

Currently, I am in the process of working on a gulpfile and have written the following task: var tsProject = ts.createProject('app/Resources/public/angular/tsconfig.json'); gulp.task('angular-2', function () { var tsResul ...

Create an array of arrays within a loop using TypeScript

My application contains an object with dates and corresponding time arrays. The console log output is displayed below: 32: { 1514160000: Array [ 1200, 1500 ], 1514764800: Array [ 1200, 1500 ], 1515369600: Array [ 1200, 1500 ], 1515974400: Array [ 700, 12 ...

What is the best way to keep fixed input at the bottom of the page?

Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here. The Scenario I ...

What is the best way to distribute multiple inline-block elements evenly?

Is it feasible to evenly distribute numerous elements in a div with adjustable width? Check out this example that doesn't work. While using text-align:center; will center the elements, margin:0 auto; does not have any effect. I am aiming for somethin ...

Adjust the dimensions of an Angular Material 2 dialog by updating the width or height

Is there a way to adjust the dimensions of an open Angular Material 2 dialog, either its width or height? I attempted to modify the size of the dialog by obtaining a reference to it and using the updateSize method within the dialog. Unfortunately, I belie ...

Attempting to modify read-only properties is prohibited in strict mode within the context of [background: url({{XXX}}) no-repeat center center

I encountered an issue in Edge, but everything works fine in Chrome. I can't figure out what's causing the problem... <div class="container-fluid project_img" style="background: url({{_project.images.web}}) no-repeat center center;"> ...