Angular components are not inheriting the Bootstrap row class as expected

Within my codebase, there are numerous controls declared in the following manner.

<div class="row">
  <div class="col-sm-12">
    <div>Caption</div>
    <input type="text" class="form-control">
  </div>
</div>

In an attempt to refactor my code, I decided to introduce a component to encapsulate this specific behavior.

<div class="row">
  <app-textbox [caption]="'Caption'"></app-textbox>
</div>

The component's markup is essentially a replication of the original code.

<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
  <div>{{data?.caption}}</div>
  <input type="text" class="form-control">
</div>

An issue arises with the class row not propagating to the component. While it spans the full width (as specified by 12 but it's not the width of the component containing the row class - it's narrower). Upon inspecting the markup in browser console, the difference lies in the custom control tag injected into the structure like this:

div class="row"
-- app-textbox
-- -- div class="col-sm-12"
-- -- input

Conversely, the "old-style" generates this:

div class="row"
-- div class="col-sm-12"
-- input

One approach to addressing this is by setting the columns on the component directly in the main page like so.

<div class="row">
  <app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>

However, there are two concerns that give me pause about this method. Firstly, the component still receives a slight additional margin of 15px on each side relative to the enclosing component (all items have it, but the custom app-textbox receives it twice, likely due to encapsulation). The second concern is that this approach somewhat defeats the purpose of encapsulation.

I have attempted to adjust the widths of the components and apply different styles/classes to the input boxes, but after investing several hours, I find myself at a standstill.

Is there a way to ensure that the injected app-textbox tag spreads fully within its parent container?

Answer №1

I encountered a similar issue and managed to find a solution.

The original structure in app.component.html was as follows:

<div class="container-fluid">
  <div class="row">
   <app-one></app-one>
   <app-two></app-two>
  </div>
</div>

The original content of one.component.html was:

<div class="col-9">
 <p>One</p>
</div>

And the original content of two.component.html was:

<div class="col-3">
 <p>Two</p>
</div>

To resolve the issue, I transferred the 'col' divs from the one and two components to the app component:

The updated app.component.html now looks like this:

<div class="container-fluid">
  <div class="row">
   <div class="col-9">
    <app-one></app-one>
   </div>
   <div class="col-3">
    <app-two></app-two>
   </div>
  </div>
</div>

The new one.component.html now simply contains:

<p>One</p>

And the new two.component.html now simply contains:

<p>Two</p>

Answer №2

To ensure that your css is visible in all components, you can add it directly to the index.html file or to app.component.css.

For instance, in the index.html file, include the following as the last element in the head section:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e3eeeef5f2f5f3e0f1c1b2afb2afb6">[email protected]</a>/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

You can find the URL here: https://getbootstrap.com/docs/3.3/getting-started/

(Assuming your Angular2 project was created with angular-cli and follows standard naming conventions)

If you are experiencing extra margin, check the app.component.html file for container divs. Also, review the index.html file.

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

Issue encountered when using Angular CLI to generate new files in the current directory

I've encountered an issue where, when using Angular CLI to generate components, it places them in the App folder instead of the current directory. For example, if I navigate to App/Recipe and run "ng g c recipe-item", the component will be generated i ...

What is the best way to design a group of radio buttons with corresponding labels at the top

I'm looking to create a structure like this in HTML: https://i.sstatic.net/wLcZs.png Does anyone know how I can achieve this layout so that the labels are aligned properly with the radio buttons? My main challenge is getting the horizontal labels ab ...

Prevent scrollbar from appearing while splash page loads

Looking for help with a script to create a splash/intro page loader. $(function(){ setTimeout(function() { $('#splash').fadeOut(500); }, 6000); }); The current script hides the intro page after 6 seconds, ...

The kendo-grid-messages are utilized across all columns

I encountered an issue while working with the following code: <kendo-grid-column field="isActive" [title]="l('Status')" filter="boolean"> <kendo-grid-messages filterIsTrue="Yes" filterIsFalse=&qu ...

Error: Unable to access the property of an undefined variable in Angular 4

Here is what I currently have in my code: <p *ngIf="model.something.satisfy"> Yes </p> <p *ngIf="!model.something.satisfy"> {{model.something.comments}} </p> The issue arises in the second line with the error message "Type ...

What changes should I make to my code in order to incorporate an additional level of submenu to my CSS-based dropdown menu?

Hello and thank you for your help, I currently have some CSS code that is working well for 3 levels of dropdown menus, but I am now in need of it to also support a 4th level. When I try to add the extra level by copying the 3rd level code and making adjus ...

What is the optimal HTML tag for showcasing chat text conversations?

To create a text window with fixed width and length that automatically wraps long texts without a horizontal scroll bar but with a vertical one, you can use HTML and CSS. The preview window on SO's ask question page is a good example of this. It is si ...

Partial height side navigation bar

Check out this JS Fiddle: https://jsfiddle.net/wqbn6pe6/2/ This is a simple side navigation, but the grid layout is causing the sidebar not to stretch to the bottom even though it's set at 100% height. Any suggestions or solutions? Here's the ...

Tips for resolving the issue with the 'search input field in the header' across all pages in angular 5 with typescript

I currently have a search field in the header that retrieves a list of records when you type a search term and click on one of them. The search function utilizes debounceTime to reduce API requests, but I'm encountering an issue where the search doesn ...

Update the Bootstrap CSS styling of a button element following a user's click action

I am currently working with Bootstrap and facing an issue where I am trying to change the button color, but after clicking it and moving the mouse away, the color reverts back to blue. Here is the color I initially selected: https://i.sstatic.net/DCMq5.p ...

Setting a radio button as default based on a variable value can be accomplished by following a few

I am working with 2 radio buttons and I need to dynamically check one based on a variable value. <input type="radio" name="team" id="team_7" value="7"> <input type="radio" name="team" id="team_8" value="8"> The variable number is set dependin ...

Adjusting the options in the subsequent dropdown menu based on the selection made in the initial dropdown menu

I am currently working on select boxes where values are dynamically added through an array. For example, if I have 4 values in the first select box, I only want to display 3 values in the second select box, excluding the value that has already been selecte ...

Looking to implement a dual-column layout for posts on WordPress using Bootstrap

Creating an intranet website for a client which functions similar to a Facebook or Twitter feed. The layout includes three columns using Bootstrap's grid system. The first column serves as a navigation sidebar, while the other two columns should disp ...

Confirmation checkbox that retains original value if canceled

Imagine a scenario where there is a checkbox value. When the checkbox value changes, the user is asked, "Do you want to SHOW this item on the website?" or "Do you want to HIDE this item on the website?" Everything seems to be working fine, except for one ...

`The LiipImagineBundle HTML encoding error`

Utilizing LiipImagineBundle, I efficiently resize my images after uploading. However, I encountered an error specifically when trying to upload certain JPEG files due to HTML encoding issues. The resizing process works fine with JPEG files from my camera, ...

The element is not displaying the correct width percentage value

When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work. I wonder if this issue is related to me using "content-max" to set the parent element's width and height? Here is a simplified version ...

I am facing an issue where the text on my website is failing to display properly

I am facing an issue where the text on my website renders normally on Android or Windows, but when I run it on iOS, the text disappears completely. It's as if all the text has been set to display: none; The other elements seem to be tucking in just fi ...

Comparison between Mobile Phone's innerWidth and innerHeight Versus Resolution

My test phone, the Galaxy S3 Mini, has a resolution of 800x480 according to its specs. Strangely, when I run the following code in my HTML game: window.innerWidth window.innerHeight The width appears as 533 and the height as 295. I recently discovered ...

Utilizing jQuery to emphasize a selected table row upon radio button selection

When I have a table (standard markup) with a radio select in each row, I want to highlight the selected radio button. It seems simple, but for some reason it's not triggering as expected. Here is the example of the markup: The Table Row: <tr> ...

Extracting multiline value from a textarea using JavaScript

I'm trying to extract a multiline value from a textarea using JavaScript or jQuery and store it in a cookie. Below is the code snippet I am using: HTML: <textarea id="cont" cols="72" rows="15"> JavaScript: var txt = $('#cont').val( ...