I use DataTables and would like to reduce the columns a bit.
I use the following code for this.
$('#example').dataTable( {
"columnDefs": [
{ "width": "29px", "targets": 0 }
]
});
When I then check the number of pixels in the developer tools in Chrome, significantly more pixels appear and I still have too much space between the last letter of the column name and the arrow for sorting. See screenshot.
I just want to reduce the space between the last letter of the label and the arrow for sorting the records a bit. Example
I have not tried this solution but maybe it's working. We need to define width of table with this option.
Datatable configutation :
$('#example').dataTable( {
"autoWidth": false
} );
Css :
table {
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed; // ***********add this
word-wrap:break-word; // ***********and this
}
OR
You can try from this link: https://datatables.net/extensions/fixedcolumns/examples/initialisation/size_fixed.html
Related
My site contain a lot of data like 150 records on page, when I press ctrl+p then it will show the first page only, like only the visible part of the page but I want full [ 150] records.
This is what I tried So far:
<style>
##media print
{
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: auto;
}
#header, #menuheader
{
display: none !important;
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
#prctrow
{
text-align:center !important;
}
}
</style>
This css remove the scrollbar from print preview but data is still not showing.
A few steps to possibly fix this as it's a bit difficult to see the complete issue with only your CSS.
Make sure your actual CSS is using one "#" symbol for "#media print {"
"display: inline-block" might need to be set to "display: block;"
Anything floated may have to be cleared and set to not float
Things positioned absolute or fixed should be set to static
Add something at the bottom of the page to test if everything is blank or just the table on the second page
I want to build my minimal CSS framework. I did a grid system in SASS:
$width: 960px;
width: $width;
.grid-12 { width: $width; }
.grid-11 { width: percentage((($width/12)*11)/$width) }
.grid-10 { width: percentage((($width/12)*10)/$width) }
.grid-9 { width: percentage((($width/12)*9)/$width) }
.grid-8 { width: percentage((($width/12)*8)/$width) }
.grid-7 { width: percentage((($width/12)*7)/$width) }
.grid-6 { width: percentage(($width/2)/$width) }
.grid-5 { width: percentage((($width/12)*5)/$width) }
.grid-4 { width: percentage(($width/3)/$width) }
.grid-3 { width: percentage(($width/4)/$width) }
.grid-2 { width: percentage(($width/6)/$width) }
.grid-1 { width: percentage(($width/12)/$width) }
It works great, but sometimes - in some resolutions, eg. at my mobile with landscape view (960x540) some elements are 1px too short. It happens also when I resize browser.
What can I do?
some of the calculations will result in a number that can NOT be divided by 2
sometimes you will get .5px ...
and because of this . you will sometimes have 1 extra pixel
There is no "fix" for this. That's the way it is with all responsive layouts and grid systems. There are techniques like float isolation that can help keep your rounding errors from multiplying. Otherwise, 10 1px errors can turn into a 10px error. I wouldn't use that everywhere, but it's useful if you have a gallery-style layout with a lot of elements, all the same size, floating next to each other.
The real solution, mentioned in a comment above, is to adjust your design so that 1px rounding errors don't matter. If 1px can ruin your layout, responsive design isn't going to work.
You can't eliminate the rounding errors, but you have some control over where the missing pixels should go. By floating things left or right, and nesting in different ways, you can move the rounding errors where they will be least noticeable. Another solution is to apply layout (instead of float/width) to the last element in a row, and it will expand to fill the remaining space. The easiest way to apply layout is with overflow: hidden;, but that has some drawbacks.
I am using the following css to show a large amount of table data while printing.
#toolbar.fixed + .content{
overflow: visible;
position: static;
bottom: 0em;
}
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
The browser I am using is IE 7. The problem I am facing is that the data on the last row of some of the pages is getting split between the current page and the next page. I am trying to figure out if something is wrong with my css above or if I need to introduce additional css to prevent the last row of data (only on some pages) to stop getting split between two pages.
page-break-inside is still unsupported in many major browsers:
http://www.w3schools.com/cssref/pr_print_pagebi.asp
Also note that page breaks are not permitted inside positioned objects.
Using page-break-before: auto; And page-break-after: auto; may fix this, but you can use this page as a guide to create styles you need without using page-break-inside ...
Use below code.....
`function printControl(){
var table = document.getElementById("DataList1");
var count = table.rows.length;
for (var i = 0; i < count; i++) {
if ((i % 4 == 0)&&(i!=0)) {
table.rows[i].style.cssText = "page-break-after:always";
}
}
}`
I'm using jstree to create a multi-level tree, and I want to be able to set a larger line-height than you usually see, so that I can have some large headings. (If I set the font larger, the lines simply overlap.)
I've tried setting the line-height CSS property on the li and a elements, but neither have an effect; jstree seems to be programmatically overriding those values. (I even tried using jQuery to re-set those values after the tree is created, but that didn't help.)
To make things more complicated I would like to have different levels have different spacing, so that the top levels can be larger than the deeper levels.
I've tried the theme plugin but I can't find anything to control line height.
Thanks...
FWIW, this worked nicely for me. It won't give you super-large heading-size, but it increases the size perfectly for my liking.
Setup my tree with variant: large
//jstree config
$("#tree").jstree({
"core" : {
"themes" : {
"variant" : "large"
}
}
// ...
});
and then also change the font-size for all nodes:
/* CSS */
.jstree-node {
font-size: 13pt;
}
Does it help to increase the height of the element?
.jstree-leaf {
font-size: 37px;
height: 50px;
}
.jstree-leaf a.jstree-hovered {
height: 50px;
}
.jstree-leaf a.jstree-clicked {
height: 50px;
}
On its own, MMeah's solution did not work for me. Combining this with the code here and changing the height to auto worked for me. See full answer here.
.jstree-default a {
white-space:normal !important; height: auto;
}
.jstree-anchor {
height: auto !important;
}
.jstree-default li > ins {
vertical-align:top;
}
.jstree-leaf {
height: auto;
}
.jstree-leaf a{
height: auto !important;
}
So my website can resize based on screen size, but when I implemented a Twitter widget, when I tried resizing it, the widget, despite having the attribute width:'auto' did not resize. Here is the code for the widget:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 2,
interval: 30000,
width: 'auto',
height: 100,
theme: {
shell: {
background: '#dbdbdb',
color: '#000000'
},
tweets: {
background: '#dbdbdb',
color: '#000000',
links: '#000000'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('jackstonedev').start();
</script>
And here is the CSS for the widget:
#twittercontainer
{
border:3px solid;
border-radius:20px;
background-color:lightgrey;
opacity:0.7;
max-width:500px;
margin: auto;
}
Annoyingly you can't do this with the new twitter widgets and the old API is due to be binned in march 2013 but I wrote some stuff on how to solve it using the new widgets here using jquery albeit a fairly simplistic approach:
http://tappetyclick.com/blog/2012/12/20/how-dynamically-resize-new-twitter-widget
Try resizing by using % instead of auto.
If the parent div then resizes your widget should aswel, for example if you set your widgets css to
#widget { width: 90%; }
if the parent div is 100 pixels wide, your widget will be 90 pixels wide.
I Hope this works for you.
What might also be a problem is that if the twitter widget is loaded via iFrame / or JS generated, it might assign CSS values aswel, these can override your own set values since they are set when/after the page is loaded. Try inspecting the widget itself in the HTML source and see what is happening to it.
put widget in wrapper and change width to
width: '100%',
it should work as you expect.
I was able to change the width of two widgets to 100% in my Rails application by adding the following code in my stylesheet:
#twitter-widget-0, #twitter-widget-1 {
float: none;
width: 100% !important;
}
I used this:
$('#twitter-widget-0').height($('#ID_SIMILAR HEIGHT').height());