using datatables only
<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
<div class="dataTables_scrollHeadInner" style="width: 7548px; padding-right: 17px;">
<table class="display dataTable" cellspacing="0" cellpadding="0" border="0" style="margin-left: 0px; width: 7548px;">
After using bootstrap
<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 7565px;">
<div class="dataTables_scrollHeadInner" style="width: 4401px; padding-right: 17px;">
<table class="display dataTable" cellspacing="0" cellpadding="0" border="0" style="margin-left: 0px; width: 4401px;">
So I had to revert back the previous css. I also need bootstrap since there is other css that depends upon it, but bootstrap also changed the datatables' CSS. Temporary solution was
$('.dataTables_scrollHead').css('width','100%');
$('.dataTables_scrollHeadInner').css('widht','7548');
$('.dataTable, .display').css('width','7548');
Is there any solution so that bootstrap won't touch my datatable CSS ?
Thanks !!!
If you're using Bootstrap 3, I have blogged some modifications may help:
http://devblog.rayonnant.net/2013/09/bootstrap-3-datatables-paging.html
My example is based on the Bootstrap 2 modifications on the datatables.net website, just modified to work with Bootstrap 3's CSS and form structure.
Better Solution was given a unique class name to the data table and customize it,
Follow this:
don't use 3000px width or something, use measurement in percentage.so can achieve responsiveness behave.
maximum avoid the inline CSS styling.
Related
I'm currently working on a Chrome Extension and I'm using Semantic UI to build the interface. When the user activates the extension it will show a popup which is actually an iFrame. In this iFrame I have a table and I'd like this table to take the full width of the iFrame. The iFrame width is fixed (500px). The problem is because the iFrame is 600px the table is displayed as the device is 500px (makes sense since it's a responsive framework.
But I'd like to change this behavior and force the table to display as it would be on a desktop screen.
Today this is what I get
Now I'd like to obtain the following result (fake image :)
Here is the code of my iFrame
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="js/ext/jquery-3.3.1.min.js"></script>
<script src="js/ext/semantic-2.4.2.min.js"></script>
<script src="js/popup.js"></script>
</head>
<body>
<div>
<div>
<table class="ui celled padded collapsing table">
<thead>
<tr>
<th class="single line">#</th>
<th>Event mapping</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td class="single line">
<div class="ui right action left icon input mini">
<i class="search icon"></i>
<input type="text" placeholder="Selector">
<div class="ui basic floating dropdown button mini">
<div class="text">Identify</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Page</div>
<div class="item">Track</div>
</div>
</div>
</div>
</td>
<td class="right aligned">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<div class="ui left floated">
<button id="btn-startcapture" class="positive ui button">Start capture</button>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
And the CSS style I apply to the iframe tag on the caller page
iframe.segmentizor-panel-iframe-toggle {
left: calc(100% - 500px) !important;
}
iframe.segmentizor-panel-iframe {
top: 0px;
left: calc(100% + 10px);
display: block;
z-index: 2147483647;
box-shadow: rgba(0, 0, 0, 0.25) 7px 0px 12px 13px;
position: fixed !important;
width: 500px !important;
height: 100% !important;
opacity: 1 !important;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
transition: left 0.4s ease-in-out 0s !important;
}
Sorry if the question looks quite trivial. Still in the learning curve... Thanks for your help.
Have you tried editing the max-width css? Althought you may be setting the width to be 800px, if the max is only 600 it would only get to that.
First, remove the collapsing class
https://semantic-ui.com/collections/table.html#collapsing
Collapsing
A table can be collapsing, taking up only as much space as its rows.
Also, I think you could add some additional style inside the iframe's head section.
After
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
Add some style like you would on any page...
<style>
table{
width: 100%;
}
</style>
Or you could add some classes, or other css styling for your needs.
Thanks for your guidance I managed to do it by:
Adding the following class in my iFrame style
min-width: 800px !important;
Then in my iFrame page I added a new div with the size of the iFrame and used a width of 100% for the table
<div style="max-width: 450px">
<table class="ui celled padded unstackable collapsing table" style="width:100%">
In my application I have to display bootsatarp grid for database records. Since the number of records count are large enough to view without full page scrolling I wrap my table with bootstrap pre-scrollable div and it gave me the functionality to scroll the table. However all the time DIV size is half of the browser windows. I tried almost every stack overflow posts and suggestions and simply they not work for me. I also tried to fix this with support of java script and it also failed.
This is my HTML code
<div class="col-md-9">
<div class="pre-scrollable">
<table class="table table-bordered table-hover header-fixed" id="sometable">
<thead>
<tr>
<th>EMP_No</th>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Type</th>
<th>#Days</th>
<th>Start Date</th>
<th>End Date</th>
<th>Half day</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
<?php //php code for print the table
?>
</div>
</div>
I populate above table with the results of PHP code. I have not idea how to set this DIV's height to fixed value or full value of the browser windows.below are the CSS that are use
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 1px;
}
thead th {
text-align: center;
background-color: #3498db;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
This is the result web page
There is a max-height property set for the .pre-scrollable div in the bootstrap css file.
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
That might be the source of your problem.
For simplicity you can use css viewport dimensions. Something like this:
<div class="pre-scrollable" style="max-height: 75vh">
<table>...</table>
</div>
where "75vh" is 75% of visible height.
Twitter bootstrap - Fixed layout with scrollable sidebar will help... As the example on linked page will show you need to set the height of the div not table.
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Is there a way to fully disable scrolling in JSFiddle.
I've tried:
position: fixed;
and
overflow: hidden;
however I can still scrolldown when I embed the results in my site. I wondered if anyone had any tips on how to fully fix something and have no scrolling abilities.
My current HTML and CSS:
.hidden {
visibility: collapse;
}
html,
body {
height: fit;
background: #e2dede;
margin: 10px;
}
div {
width: fit;
overflow: hidden;
}
td + td {
border-left: 1px solid #eee;
}
th {
border-bottom: 1px solid #fff;
background: #333333;
color: #fff;
padding: 5px 5px;
font-family: "raleway";
font-size: 14px;
}
td {
border-bottom: 1px solid #eee;
background: #e2dede;
color: #000;
padding: 5px 5px;
font-family: "raleway";
font-size: 13px
}
<table class="tablesorter">
<table>
<thead>
<th>Name</th>
<th>Release Date</th>
</thead>
<tbody>
<tr>
<td>Peter Parker</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>John Hood</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>Clark Kent</td>
<td>12/07/2015</td>
</tr>
<tr>
<td>Bruce Almighty</td>
<td>13/07/2015</td>
</tr>
<tr>
<td>Bruce Evans</td>
<td>14/07/2015</td>
</tr>
</tbody>
</table>
When you embed a JSFiddle demo on your site, JSFiddle adds a "Result" bar across the top to add a link to allow editing the demo in JSFiddle. Because of that bar and a nested iframe set to the same height as the outer frame, a scroll bar shows up (demo).
<iframe height="300" width="100%" src="http://jsfiddle.net/5sadgev6/embedded/result,html,css" allowfullscreen="allowfullscreen" frameborder="0">
<div id="wrapper">
<div id="head">
<h1><a title="Edit in JSFiddle" href="/5sadgev6/light/" target="new">Edit in JSFiddle</a></h1>
<div id="actions" class="">
...
</div>
</div>
<div id="tabs" style="height: 298px;">
<div class="tCont result active" id="result">
<iframe style="height: 300px;" src="//fiddle.jshell.net/5sadgev6/show/light/" sandbox="allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
</div>
...
</div>
</div>
</iframe>
Look at the height settings added by JSFiddle in the above HTML.
So essentially, you can't prevent the embedded JSFiddle iframe from scrolling since it's the iframe within the embedded iframe that has a set height.
If you don't like the scroll:
Submit an issue to jsfiddle: https://github.com/jsfiddle/jsfiddle-issues
Don't use an embedded jsFiddle on your site.
Make a Stylish style that sets the iframe embedded within the iframe height to auto - this would only work on your browser, but would apply to the sites you specify.
One more IE8 hangup. Advice appreciated.
So I have the following table. A Javascript function, based on user inputs, populates tbody with dozens of values. Firefox and Chrome both add a scrollbar when that happens; IE, however, does not, and the table simple goes on forever, even breaking out of its div.
How to I make IE8 recognize that an overflow has happened?
<div>
<form>
<table id="myTable" style="display: block; max-height: 300px;">
<thead style="display: block; color: white; font-family: arial, helvetica, sans-serif; width: 796px; " >
<tr id=head> <B>
<th style="width: 170px; text-align: center" >Location</th>
<th style="width: 70px; text-align: center">Year</th>
<th style="width: 520px; text-align: center" >Title</th>
</B>
</tr>
</thead>
<tbody style="display: block; width: 796px; height: 280px; overflow: scroll; text-align: center;" >
</tbody>
</table>
</form>
</div>
Have you tried creating a CSS class for the table with an overflow attribute in it?
.table {overflow: scroll;}
That should work in IE8.
What I'd like to do is produce an HTML/CSS/JS version of the following. The gridlines and other aspects are not important. It's more of a question how to do the background databars.
(source: tech-recipes.com)
Make the bars as background images and position them to show values. eg. with a fixed column width of 100px:
<div style="background: url(bg.gif) -50px 0 no-repeat;">5</div>
<div style="background: url(bg.gif) -20px 0 no-repeat;">8</div>
If your columns have to be flexible size (not fixed, and not known at the time the page is produced), it's a bit trickier:
<style type="text/css">
.cell { position: relative; }
.cell .back { position: absolute; z-index: 1; background: url(bg.gif); }
.cell .value { position: relative; z-index: 2; }
</style>
<div class="cell">
<div class="back" style="width: 50%;"> </div>
<div class="value">5</div>
</div>
<div class="cell">
<div class="back" style="width: 80%;"> </div>
<div class="value">8</div>
</div>
A javascript-based solution like this cross-browser gradient might be a good start.
With some DHTML, you can make a bar with a given length.
I would use either the Grid component from Ext JS library or the DataTable component Yahoo's YUI library. The cross-browser compatibility, etc. work is done for you.