I am using a ngx tabset that invoke various Angular 4 components that use Bootstrap 3.3.7 components. In one of those tabs I am displaying a pretty basic Bootstrap table. For some reason, I am losing table responsiveness within a tab -- the table just smooshes together rendering the fields pretty much unusable. Other tables in the app (not encapsulated within a ngx component) work just fine. Just to make things more interesting, I have a fairly complex form in a different tab that responds as expected.
For now, the app will use this library b/c it works well with AoT, so for now we are stuck using it.
Aside from tweaking the cols, I have tried a few different hacks that have worked for other issues I've ran into with Angular 4 over the last year. Like leveraging Angular built in shadow dom functionality (View Encapsulation) and that didn't work. I've also tried updating ngx and even played around with migrating Angular 4.6 to 5.2..that also had no effect. I can't migrate Bootstrap to a newer version since that will change the look and feel too drastically. Just looking for any ideas/opinions as they will be appreciated!!
Tabs.html
<div class="container">
<tabset type="tabs" class="nav nav-tabs" #tabselect>
<br /><br />
<tab heading="Tab 1" class="active" name="tab1">
<app-tab-one></app-tab-one>
</tab>
<tab heading="Tab 2" name="tab2">
<app-tab-two></app-tab-two>
</tab>
<tab heading="Tab 3" name="tab3">
<app-tab-three></app-tab-three>
</tab>
<tab heading="Tab 4" name="tab4">
<app-tab-four></app-tab-four>
</tab>
</tabset>
</div>
Tab1.html
<div class="container">
<div class="row col-xs-12">
<h3>Select Data</h3>
</div>
<br />
<br />
<table class="table table-striped table-responsive">
<tbody>
<tr class="header">
<th class="text-xs-left col-md-0">Number</th>
<th class="text-xs-left col-md-0 col-lg-6">Data 1</th>
<th class="col-md-3 col-lg-3 margin-top-xs">Data 2</th>
<th class="col-md-3 col-lg-3 margin-top-xs">Data 3</th>
<th class="col-md-3 col-lg-2 margin-top-xs"></th>
</tr>
<tr *ngFor="let x of data; let idn = index">
<td>{{idn+1}}</td>
<td class="text-xs-center col-md-3 margin-top-xs col-lg-4">
<select class="col-md-2 margin-top-xs form-control" [(ngModel)]="data[idn].data1">
<option value="">Please select prefix</option>
<option *ngFor="let x of data" type="text">{{x.data1}}</option>
</select>
</td>
<td class="text-xs-center col-md-3 margin-top-xs col-lg-4">
<input type="text" class="form-control" maxlength="5" />
</td>
<td class="col-md-3 margin-top-xs col-lg-4">
<input type="text" class="form-control" />
</td>
<td class="col-md-2 col-lg-2 text-right margin-top-xs">
<button class="btn btn-primary">Button</button>
</td>
</tr>
</tbody>
</table>
</div>
snippet from Tab1.component.ts
import { Component, OnInit, ViewChild, Inject, ViewEncapsulation } from '@angular/core';
import { Data } from '../App/Models/Data';
import { TData } from '../App/Models/TData';
@Component({
selector: 'app-tab-one',
templateUrl: './Tab1.component.html',
styleUrls: ['./tab-one.component.css'],
providers: [ModalService, { provide: BsDropdownConfig, useValue: { autoClose: false } }]//,
//encapsulation: ViewEncapsulation.Native ## this will enable ng Shadow Dom
})
export class TabOneComponent implements OnInit {
tableData: Data[];
tupleData: TData[];
***** EDIT - Included a Plunker and simplified the code some more. I promise to become a better poster!! ******
**** EDIT2 - A Plunker w/out the tabs https://plnkr.co/edit/n1dnAHvcWa2ENzIP9v7H?p=preview
Must be noted that I am seeing this behavior in dev-tools within my application, but dev tools WITHIN THE PLUNKER LIVE POP UP PREVIEW TOOL does not seem to allow the responsive form-factor button at the top-left corner of the UI. Not sure how else I can simulate this
Responsive behavior functions in both Chrome and Firefox using Plunker for this example. But, Firefox allows formal form-factor simulation in the live pop-up preview in it's dev-tools while Chrome does not ****
After refactoring and getting Plunker's working to demo the problem, I have proven that it is a Bootstrap issue (not sure if my fault or a bug) and NOT a Ngx-Bootstrap issue. Turns out it was really just Bootstrap form classes that was breaking the table
<div class="container">
<table class="table table-bordered">
<thead>
<tr class="header">
<th class="col-xs-1">Number</th>
<th class="col-xs-3">Data 1</th>
<th class="col-xs-3">Data 2</th>
<th class="col-xs-3">Data 3</th>
<th class="col-xs-1"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of data; let idn = index">
<td class="col-xs-1">{{idn+1}}</td>
<td class="col-xs-3">
<div class="form-group">
<select class="form-control" [(ngModel)]="data[idn].data1">
<option *ngFor="let x of data" type="text">{{x.data1}}</option>
</select>
</div>
</td>
<td class="col-xs-3">
<input class="form-control" type="text" maxlength="5" />
</td>
<td class="col-xs-3">
<input class="form-control" type="text" />
</td>
<td class="col-xs-1">
<button class="btn btn-primary">Button</button>
</td>
</tr>
</tbody>
</table>
</div>
When I removed the 'form-control' classes things work
Here is the final Plunker