I am working with bootstrap and I have a div, which inside of that is 2 more side by side. Naturally, I took the row approach to get the desired result, but I ran into a problem. The div I am designing is for a small web widget on ozone (not that that matters now) but when I have the window the size it is going to be it pushes the second div down below.
The code, with them stacked (no row implementation) is:
<div style="margin: 1em">
<h4>User Card</h4>
<i class="fa fa-user fa-5x"></i>
<h6>User: {{username.slice(5)}}</h6>
<h6>Total Score: {{totalscore.toFixed(3)}}%</h6>
<table class="table table-hover table-striped">
<thead>
<th>#</th>
<th>Model</th>
<th>Score</th>
</thead>
<tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launch()" ng-style="setColor(item.score)">
<td>{{$index + 1}} </td>
<td>{{item.name.replace("_"," ")}}</td>
<td>{{item.score.toFixed(3)}}</td>
</tr>
</table>
</div>
So I want the little user icon in the top left corner with username and score below it. And I want the table over to the right (at the same height) but I want to be able to scroll the table if necessary, but the user information to remain static.
EDIT Here is the code that has row implementation in it but still they only stay in the same row when the window is like 3/4 width.
<div id="wrapper">
<div style="margin: 1em">
<h4>User Card</h4>
<div>
<div class="row">
<div class="col-lg-1">
<h6>User: {{username.slice(5)}}</h6>
<h6>Total Threat Score: {{totalscore.toFixed(3)}}%</h6>
</div>
<div class="col-lg-3">
<table class="table table-hover table-striped">
<thead>
<th>#</th>
<th>Risk Model</th>
<th>Score</th>
</thead>
<tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launchIAT()" ng-style="setColor(item.score)">
<td>{{$index + 1}} </td>
<td>{{item.name.replace("_"," ")}}</td>
<td>{{item.score.toFixed(3)}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
I have a roughly working example here:
http://www.bootply.com/xWByEnAkXE
Basically, your 3/4 width issue is with the column tags you're using. You were using col-lg-* which only applies when the browser window is wide, which caused your issue of only staying in the same row when the browser window was large.
The height of the table is tricky unless you set an explicit CSS height on the table with overflow:scroll.
My example uses position:absolute on the table to set the height to 100% of the parent (using top:0;bottom:0). It's not pretty, and it's prone to break if you try to do too much advanced stuff in there, but it gets the job done.
Hope that helps!
Edit:
Tweaked the example to use media queries.
Related
I have a small formatting issue. It can be because I don't fully understand the data tables formatting.
HTML code
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
<h1 class="page-header">Test Runs</h1>
<div class="table-responsive">
<table class="table table-striped" id="tests">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
</tbody>
</table>
</div>
The outer div is present because i have a side menu bar which is not shown here.
JS code
$(document).ready(function() {
$('#tests').DataTable( {
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-3'i><'col-sm-6 text-center'B><'col-sm-3'p>>"
} );
} );
In the above js code, if I don't add "dom" element the filter results and search bar are not in the same row , they are one below the other.
The same applies to information and pagination.
I want the four elements to be in four corners of the screen.
eg:
length changing input control : top left
filtering input : top right
table information summary : bottom left
pagination control : bottom right.
With the current code (with the "dom" added) I am able to achieve this but now there is a horizontal scroll which I don't want.
Can someone tell me what mistake I made.
You can place the relevant elements in the bootstrap panel.
$(document).ready(function() {
var table = $('#example').DataTable({
"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });
Demo : http://jsfiddle.net/a62hqqf9/
You can also look again for the use of DOM elements : datatable dom
The main reason for horizontal scroll is negative margins of .row. You need to remove negative margins with custom class. I have added .no-gutters in the snippet example as you are probably using Bootstrap 3. If you are using Bootstrap 4, the class comes with Bootstrap CSS.
Demo: Working example
I have a Meteor project which I just need to list a bunch of orders on a HTML table. But when the table gets too big, it overlaps my DIV like this:
At first I thought that this could be a CSS problem, but then I noticed that the HTML tag size is SMALLER than my table size:
Now I'm a bit lost, I already set all my DIVs to have a 100% height, but because the HTML tag size is static (for some reason :confused: ), the table overlaps my DIVs. Here is how I'm generating my table:
{{#if isNewOrder}}
<h2 style="margin-left: 30px"> Pedidos Pendentes </h2>
<table cellspacing='0'>
<tr>
<th>ID</th>
<th>Data</th>
<th>Cliente</th>
<th>Telefone</th>
<th>Valor</th>
<th>Operações</th>
</tr>
{{#each tablecontent}}
<tr>
<td>{{id}}</td>
<td>{{prettifyDate timestamp}}</td>
<td>{{name}}</td>
<td>{{phone}}</td>
<td>{{prettifyPrice price}}</td>
<td>
<button type="button" class="btn btn-info">Detalhes</button>
<button type="button" class="btn btn-success">Aceitar</button>
<button type="button" class="btn btn-danger">Rejeitar</button>
</td>
</tr>
{{/each}}
</table>
{{/if}}
No big deal right? I have two session variables (isNewOrder and tablecontent), isNewOrder tells if I should show that table or not, and tablecontent contains all the elements of my table.
So, am I missing something about big lists with Meteor? Or could it really be a problem with my CSS (despite I set all DIVs to 100% of height).
Best Regards, Ernani
I have a requirement where all the data have to be shown on the same page (so can't use pagination). I am working with angular 1.5 and following is the code :
<div ng-repeat="a in data">
<span>{{a.help}}</span>
<div ng-repeat="b in a.dataAgain">
<span>{{b.helpAgain}}</span>
<table class="table table-bordered" style="text-align:center;">
<tr class="info">
<td><strong>S.No.</strong></td>
<td><strong>Name</strong></td>
<td><strong>Age</strong></td>
<td><strong>Id</strong></td>
<td><strong>Dept</strong></td>
</tr>
<tr ng-repeat="c in b.allData" class="info">
<td>{{$index+1}}</td>
<td>{{c.name}}</td>
<td>{{c.age}}</td>
<td>{{c.id}}</td>
<td>{{c.dept}}</td>
</tr>
</table>
</div>
</div>
In my scenario the number of watchers reaches to around 1500 , i am using ng-stats ng-stats for watching the number of watchers. Can anybody hep me how to reduce the number of watchers.
I found same question over here :
Stackoverflow Question
But there is no proper answer for the same
<div ng-repeat="a in data">
<span>{{::a.help}}</span>
<div ng-repeat="b in a.dataAgain">
<span>{{::b.helpAgain}}</span>
<table class="table table-bordered" style="text-align:center;">
<tr class="info">
<td><strong>S.No.</strong></td>
<td><strong>Name</strong></td>
<td><strong>Age</strong></td>
<td><strong>Id</strong></td>
<td><strong>Dept</strong></td>
</tr>
<tr ng-repeat="c in b.allData" class="info">
<td>{{::$index+1}}</td>
<td>{{::c.name}}</td>
<td>{{::c.age}}</td>
<td>{{::c.id}}</td>
<td>{{::c.dept}}</td>
</tr>
</table>
</div>
</div>
Angular processes the DOM as usual and once the value has been resolved it removes the particular property from it’s internal $$watchers list.
You can read more about it here: More Broad Answer
I would strongly recommend using collection-repeat over ng-repeat it will dramatically improve application performance. Just give it a shot.
<div collection-repeat="b in a.dataAgain">
and
<tr collection-repeat="c in b.allData" class="info">
I am new to angularjs and I am creating an table rows using ng-repeat.
Below is the code snippet
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
<th>heading3</th>
<th>heading4</th>
<th>heading5</th>
<th>heading6</th>
<th>heading7</th>
<th>heading8</th>
<th>heading9</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in taskList">
<td>{{task.item1}}</td>
<td>{{task.item2}}</td>
<td>{{task.item3}}</td>
<td>{{task.item4}}</td>
<td>{{task.item5}}</td>
<td>{{task.item6}}</td>
<td>{{task.item7}}</td>
<td>{{task.item8}}</td>
<td>{{task.item9}}</td>
</tr>
</tbody>
</table>
</div>
and i am loading same in ng-view div
<div ng-view class="container-fluid"></div>
But when I see the above table in mobile mode of chrome browser, table is growing horizontally(out of device width).
Same code works fine if I create a test page with same classes.
Let me know if anything I need to change to use in angular?
I've made a table with a fixed header that stops when it reaches the bottom of my table. which i put into a div with overflow: hidden;. I kind of got everything to work, but not 100% to my liking.
<div class="container">
<table class="tableWithFloatingHeader">
<thead>
<tr>
<th>table1 col header</th>
<th>table1 col header</th>
</tr>
<tr>
<th>table1 col header2</th>
<th>table1 col header2</th>
</tr>
</thead>
<tbody>
.............
</tbody>
</table>
</div>
problem is:
i can't seem to get everything in the <thead> to scroll down too.
only the 1st row does (the first <tr>).
ONLY the <th> visible in the div should be seen when
scrolling down.
How do i position my controllers right beside the div? On a bigger
monitor, it's position is way off (because of this 'left': '20px')
here is a link to my JSFIDDLE
and here is my html for my controllers
<div id="compare-table-controller">
‹
›
</div>
Demo
Changed width: 700px to width: 100% You can change left value like width value (percentage value)