I'm developing a hybrid-app w/ Cordova. In my index.html I have the following code:
<div class="container">
<table style="width:100%;height:100%;border-spacing:3px;border-collapse: separate;">
<tr style="height:15%;width:100%">
<td style="width:33%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:33%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:33%" colspan="3">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
</tr>
<tr style="height:15%;width:100%">
<td style="width:25%">
<button class="btn btn-default"style="width:100%" type="button">OK</button>
</td>
<td style="width:25%">
<button class="btn btn-default" style="width:100%"type="button">OK</button>
</td>
<td>
<button class="btn btn-default" style="width:100%"type="button">OK</button>
</td>
<td>
<button class="btn btn-default" style="width:100%"type="button">OK</button>
</td>
</tr>
</table>
Don't care about the Bootstrap things, the main thing is the <td> tags in the second <tr>.
Change your 1:st tr's last td's to <td style="width:33%" colspan="2"> and both rows will be equal wide.
<div class="container">
<table style="width:100%;height:100%;border-spacing:3px;border-collapse: separate;">
<tr style="height:15%;width:100%">
<td style="width:33%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:33%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:33%" colspan="2">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
</tr>
<tr style="height:15%;width:100%">
<td style="width:25%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:25%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td>
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td>
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
</tr>
</table>
</div>
Nevermind, this is what I wanted. I figured it out :)
<div class="container">
<table style="width:100%;height:100%;border-spacing:3px;border-collapse: separate;">
<tr style="height:15%;width:100%">
<td style="width:33%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:33%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:33%" >
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
</tr>
</table>
<table style="width:100%">
<tr style="height:15%;width:100%">
<td style="width:25%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:25%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:25%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
<td style="width:25%">
<button class="btn btn-default" style="width:100%" type="button">OK</button>
</td>
</tr>
</table>
</div>
Related
I'm working with a dynamic table where each line of this table is a person's reg and each person has a lot of files that must be shown below their reg. The following image is how the html table supposed to works:
I'm using bootstrap 3.3 in my project and this is my HTML table code that is not working properly:
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Nome </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>#1</strong></td>
<td>Peter Parker</td>
<td>
<button type="button" class="btn btn-warning btn-xs"
title=" Editar ">
<span class="glyphicon glyphicon-pencil"></span>
<!-- Editar -->
</button>
<button type="button" class="btn btn-danger btn-xs"
title=" Excluir ">
<span class="glyphicon glyphicon-trash"></span>
<!-- Excluir -->
</button>
</td>
<br><br>
<table class="table table-hover">
<tbody>
<tr>
<td>XLS</td>
<td>file1.xls</td>
<td></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td style="line-height: 12.0;">
<button class="btn btn-primary"
type="button" data-toggle="modal" data-target="#modalMembroFamiliar">
<span class="fa fa-plus"></span>
Add New Member
</button>
</td>
</tfoot>
</table>
The above code is rendering the HTML table as following:
How can I fix my code to make the table rendering like in the first image?
Yout have to insert the "inner" table into a <td> tag.
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Nome </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>#1</strong></td>
<td>Peter Parker</td>
<td>
<button type="button" class="btn btn-warning btn-xs"
title=" Editar ">
<span class="glyphicon glyphicon-pencil"></span>
<!-- Editar -->
</button>
<button type="button" class="btn btn-danger btn-xs"
title=" Excluir ">
<span class="glyphicon glyphicon-trash"></span>
<!-- Excluir -->
</button>
</td>
<td>
<table class="table table-hover">
<tbody>
<tr>
<td>XLS</td>
<td>file1.xls</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td style="line-height: 12.0;">
<button class="btn btn-primary"
type="button" data-toggle="modal" data-target="#modalMembroFamiliar">
<span class="fa fa-plus"></span>
Add New Member
</button>
</td>
</tfoot>
</table>
For more information, please review HTML5.2: Tabular data
Initially my page appears like this, with one input text box and a "+" button and a "-" button.
Image -
Now, if i click on the "+" button , the size between the first text-box and button increases. Please have a look -
Image -
Please guide on why such a gap appears. This gap doesn't appear when i click on subsequent "+" buttons.
code -
app.component.html
<div *ngIf="addContainer">
<p style="margin-left: 200px; font-size:18px">Please enter the node -</p>
<table align="center">
<tbody>
<tr>
<td>
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" class="btn btn-danger"> - </button>
</td>
</tr>
<tr *ngFor="let container of containers" >
<div #myElement>
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</div>
</tr>
<tr>
<td style="text-align:center">
<button type="button" (click)="showGraphs()" class="btn btn-dark">Search</button>
</td>
</tr>
</tbody>
</table>
</div>
Its because of extra div inside the tr. replace the div by ng-container.
<tr *ngFor="let container of containers" >
<ng-container #myElement>
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</ng-container>
</tr>
OR
you can put the reference myElement at tr level
<tr *ngFor="let container of containers" #myElement >
<ng-container >
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</tr>
I did this -
app.component.ts
deleteOneMore(){
this.containers.splice(this.index, 1);
}
app.component.html
<tr *ngFor="let container of containers; let i = index;" >
<ng-container >
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td >
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="deleteOneMore()" class="btn btn-danger"> - </button>
</td>
</ng-container>
</tr>
So here is my answer i think it will help you with your problem, you have used a class in every button called "btn" and it contain by default padding of padding: .375rem .75rem; so you guess my answer, you have to remove it and you will be fine.
when padding were not removed from btn class
when padding removed from btn classjust checked after commenting this btn padding in picture
Here I am providing a screenshot and I outlined the area I wanted to collapse all the way to just right after the last blue buttom, touching it. I outlined the area I wanted to collapse in red. Is there a specific class that will let me do that?
Ty
code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="panel panel-primary col-md-6">
<div class="row">
<!-- Label -->
<button type="button" class="btn btn-info btn-xs btn-block" id='invoicelabel'><strong>Invoice CP</strong>
</button>
<!-- Invoice CP -->
<div class="btn-group btn-group-vertical col-md-3 test2">
<button class="btn btn-primary btn-sm" type="submit">Total Amount</button>
<button class="btn btn-primary btn-sm" type="submit">Duplicate</button>
<button class="btn btn-primary btn-sm" type="submit">Clear</button>
<button class="btn btn-primary btn-sm" type="submit">Currency</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
</div>
<table class="table table-condensed">
<tbody class="col-md-10 test pull-right">
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Try checking the CSS height property of the .test or .test2. Probably it is set to a specific value. If you leave it blank, the area will fit to the content.
I have a table and put 2 buttons in the last column, but they are one below each other. It looks as following:
The HTML code look as following:
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td><img src="{{ item.Avatar }}" /></td>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
I've tried a lot of settings, but it doesn't help.
How to put them next to each other?
UPDATE:
You can use below code and achieve
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Delete</button>
Or if you use Bootstrap then you can get Bootstrap Code from Bootstrap Group Buttons or use below code
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
to achieve
This is an easy problem to fix.
As you used tables in your structure, you can use tables in the last column.
Inside that last column td, add a table. The table body should look like this.
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td>
<img src="{{ item.Avatar }}" />
</td>
<td>
<table>
<tbody>
<tr>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
</td>
<td>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
in stylesheet make button css display to inline or inline-block
Also do check the TD width and buttons width. If the buttons width is greater than the TD width it will break to next row for sure
Try this
<div class="list-unstyled list-inline"><button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button><button ng-click="delete($index)" class="btn btn-primary">Delete</button></div>
What you were looking for is a button group.
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#editModal">Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>
I have a table using Bootstrap, where the content of each table cell is a button. I want the width of each cell to be the width of the button plus margin. I tried resizing using <td class="col-md-1"> but this makes no difference.
Is there a way of resizing the width with Bootstrap?
This is the HTML:
<table class="table table-bordered">
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">1</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">2<br>ABC</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">3<br>DEF</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">4<br>GHI</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">5<br>JKL</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">6<br>MNO</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">7<br>PQRS</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">8<br>TUV</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">9<br>WXYZ</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs"><<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">0<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">Clr<br></button></td>
</tr>
Thanks
You can add a width to the table like this (assuming you add id="phone-table" to your <table>):
#media (min-width:767px) {
#phone-table{
width:20%;
}
}
#media (max-width:768px) {
#phone-table{
width:40%;
}
}
I used media queries so that the table maintains responsiveness and won't be too large or small on any screen.
Bootply Demo