I have a bootstap modal with tabs in the modal body. In each tab i have a regular table, the rows are later appended into the table with jquery.
My issue is that the text in the columns never linebreak, so the right side of the table is shown outside of the modal body.
How can i fix this? This is my HTML modal.
<div class="modal modal-wide fade" id="detailsmodal" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="details">Detaljer</h4>
</div>
<div class="modal-body" id="detailsmodalBody">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">MetaData</li>
<li>Enhet</li>
<li>Appar</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="MetaDataTab">
<br />
<br />
<table id="detailvalues" class="table table-bordered">
<thead>
<tr bgcolor="#4d4f53">
<th>Metadata</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>AppleID#1: </td>
<td id="modalMetaDataCol1">No data</td>
</tr>
<tr>
<td>AppleID Password#1: </td>
<td id="modalMetaDataCol2">No data</td>
</tr>
<tr>
<td>AppleID#2: </td>
<td id="modalMetaDataCol3">No data</td>
</tr>
<tr>
<td>AppleID Password#2: </td>
<td id="modalMetaDataCol4">No data</td>
</tr>
<tr>
<td>SIMpin: </td>
<td id="modalMetaDataCol5">No data</td>
</tr>
<tr>
<td>Losekod: </td>
<td id="modalMetaDataCol6">No data</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="EnhetTab">
<br />
<br />
<table class="table table-bordered" id="devicedetailsTable">
<thead>
<tr bgcolor="#4d4f53">
<th>Detalj</th>
<th>Värde</th>
</tr>
</thead>
<tbody id="devicedetails">
</tbody>
</table>
</div>
<div class="tab-pane" id="ApparTab">
<br />
<br />
<table class="table table-bordered">
<thead>
<tr bgcolor="#4d4f53">
<th>Apps</th>
</tr>
</thead>
<tbody id="appvalues">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
try using word-wrap:break-word in your css to break the line in the coloumn and width:auto for your table to restrict its size in the modal.
Related
I have a html table whose headers need to be fixed. I am using bootstrap classes to make html headers fix, but i see many issues with that.
Please find the sample here.
Issues i'm facing are Header is not displayed starting from first column, word wrap is not applied for the columns header or the columns. Please advice. Is there any better way to solve this.
html code:
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped"> <thead>
<tr class="row"><th class="col-md-7">Header1</th><th class="col-md-4">Header2</th><th class="col-md-3">Header3</th><th class="col-md-4">Header4</th></tr>
</thead><tbody>
<tr><td>1111</td><td>33333</td><td>1111</td><td>3333322222222222222222222222222222</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>112222222222222215555555551</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
</tbody> </table>
</div>
1.) The cells in your header tr have Bootstrap classes which add up to a width of 18 columns (7+4+3+4), but one row can only fit 12 columns in the bootstrap grid system.
2.) You write that wordwrap is not applied, but you don't have any CSS rules for wordwrap anywhere.
You're using class .row on one row only :
<tr class="row">
<th class="col-md-7">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
You either use the same class on each row or just delete it and leave the rows without a class.
<tr></tr>
this would fix your issue.
Only simple thing missed is using the same structure (Or CSS classes), I've checked the code from your fiddle and this should work for the scenario you've presented.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped table-scroll">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5443545435354543</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5437665</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5435435443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">68678454</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">786876</td>
<td class="col-md-3">8787876</td>
<td class="col-md-4">6765767</td>
</tr>
<tr class="row">
<td class="col-md-3">7656765</td>
<td class="col-md-4">656456</td>
<td class="col-md-3">116611</td>
<td class="col-md-4">43434</td>
</tr>
<tr class="row">
<td class="col-md-3">43243432434324342</td>
<td class="col-md-4">33344343233</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">4343</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">432434343243243</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">432443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">333333</td>
<td class="col-md-3">111312312123121</td>
<td class="col-md-4">32112</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Okay:
For Word-wrap in continuous text
add " word-break: break-all;" (see the CSS below)
FOR Fixed Header
Refer the 'table-scroll' class in the HTML markup above
AND
Add the following CSS:
.modal-body {
/*max-height: calc(100vh - 210px);*/
height:300px;
width:90%;
overflow: hidden;
word-break: break-all;
}
.table-scroll tbody {
position: absolute;
overflow-y: scroll;
height: 400px;
}
.table-scroll tr {
width: 100%;
table-layout: fixed;
display: inline-table;
}
.table-scroll thead > tr > th {
border: none;
}
repalce this
<tr class ="row" >
with this
<tr>
your updated fiddle http://jsfiddle.net/girish28892/ZcLSE/1431/
I have this picture below that I want to convert into web from a windows. I manage to do the design but I have a problem in the grid (I am using data tables in bootstrap) I can't do the design in what in the picture like.
<table>
<tr>
<td>
<div>
<input type="radio" />
Radio Button
</div>
</td>
<td>
<input type="radio" />
Radio Button
</td>
</tr>
<tr>
<td>
<div>
<input type="text" />
</div>
</td>
<td>
< div>
< input type="button" />
</div>
</td>
</tr>
</table >
<table >
<tr>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw" >< / i >Table
< /div >
< /div>
< /div>
< !-- /.panel-heading -->
< div class="panel-body">
< div class="dataTable_wrapper">
< table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxxx">
</table>
</div>
</div>
</div>
</div>
< /div>
</td>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw"></i>Table
< /div>
< /div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxasdxx">
</table>
< /div>
< /div>
< /div>
< /div>
< /div>
</ td>
< /tr>
< /table>
My 2 Images bellow:
Try the below design hope it helps.You can customize the column property as your desire I just added the basic skeleton.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row">
<div class=" col-sm-12 form-group">
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
</div >
<div class=" col-sm-12 form-group ">
<div class=" col-sm-2">
<input type="text" class="form-control" id="usr">
</div>
<div class=" col-sm-2">
<button type="button" class="btn btn-default">Submit</button>
</div>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Or See the below fiddle for a better look
table design demo fiddle (updated)
You can also, do something like this instead of using tables for layout and mimic as close as to your conversion UI.
table tags are meant primarily for data formatting. Bootstrap has the concept of grid layout which is meant for laying out your UI without using tables.
When you open the snippet in full screen, you would see the exact replica. However, when the screen is too small to fit in your entire content, it just wraps into the next row, giving you the flexibility to build responsive layout, which is not possible with table tags.
.custom-margin {
margin-top: 10px;
margin-bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-container">
<div class="radio">
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosOne" value="optionOne">Radio Button One
</label>
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosTwo" value="optionTwo">Radio Button Two
</label>
</div>
<div class="custom-margin">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Enter Email :</label>
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
</div>
<div class="row">
<div class="col-lg-3">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
<div class="col-lg-6">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
</div>
</div>
I'm trying to get a button into a panel-heading section, but I can't get it to display on the same line. I've managed to get it centered with help of some of the questions on StackOverflow where others asked about a button on the right of the header, but adding the button in seems to make the header taller.
I've got an example showing the difference Bootply
Code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has space below</b>
<div class="btn-group pull-right">
new
</div>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has no space</b>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Does anybody have any ideas why adding a button or button group to the panel heading increases the height? Any tips on getting the height to what it was before the button?
because you are using a btn-sm (for small-devices) if you use btn-xs (for extra-small devices) that space will go away due to having a smaller padding
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has space below</b>
<div class="btn-group pull-right">
new
</div>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has no space</b>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a bootstrap table with 8 columns and several rows and I would like to show this table with scroll bar when the size of screen is reduced because otherwise tha table get off the wrapper layout. The problem is that the scroll bar is ever show and whereas it is quite ugly I would like to show only when it is necessary, how can I do it?
Is it better to use jQuery plugin like this table collapse
<div class="panel-body">
<div class="table-responsive">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover"
id="fleetsTable">
<thead>
<tr>
<th>Application</th>
<th>Cubic</th>
<th>Power</th>
<th>Euro class</th>
<th>Engine Type</th>
<th>Traction</th>
<th>Transmission</th>
<th>Cars</th>
<th>Add Car</th>
</tr>
</thead>
<tbody>
<tr th:each="fleet : ${fleets}" class="odd gradeX">
<td class="col-xs-2" th:text="${fleet.application}"></td>
<td class="col-xs-1" th:text="${fleet.cubic}"></td>
<td class="col-xs-1" th:text="${fleet.power}"></td>
<td class="col-xs-1" th:text="${fleet.euroClass}"></td>
<td class="col-xs-1" th:text="${fleet.engineType}"></td>
<td class="col-xs-2" th:text="${fleet.traction}"></td>
<td class="col-xs-2" th:text="${fleet.transmission}"></td>
<td class="col-xs-1"><button id="showCarsButton"
type="button" class="btn btn-primary">Show cars</button></td>
<td class="col-xs-1"><button id="addCarButton"
type="button" class="btn btn-primary">Add car</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
use this
table style="overflow:auto"
even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)