I am wanting to apply the jQuery resizable API to my HTML table, but it does not seem to be working as it should, there is no handle appearing at the top of my table headers to resize the columns.
Here is the fiddle:
http://jsfiddle.net/6434t/3/
$(function() {
$("#data tr th").resizable({ handles: 'e' });
});
A couple of things to note
Your table row tags are not closed.</tr>
Your table head tag is not closed.</thead>
You are not including jquery UI in your file.
Remember to use your browser's debugger. It is there to help you in situations like the missing jquery UI code ref error.
I assumed you wanted the whole table to be re sizable in this example but if not it should still be able to get you started.
My revision
I played around with the CSS line-by-line to see what could have changed that would make jQuery not compatible with the CSS.
Changed the css line from:
#data thead tr {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
to:
#data th tr {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
Related
I am working on jquery data tables, The issue which I get is that bootstrap popover is hiding below the div, What I want is to show the popover above all elements when I click the action button. Attached image has all computed the code+ screenshot. I have already tried to add z-index to some other value but still, it is not working, Please have a look at it what is happening wrong, Thanks.
Here is the computed CSS (also attached in a screenshot)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 0;
Image:
Try to check the "overflow" property of the tag around this table. If it has the value "hidden" that may be your problem.
Use the below code:
$('your element').tooltip({ container: 'body' })
As per #Devesh N's answer, try using your table's id instead:
$('.dropdown-menu').tooltip({ container: '#tableId' });
I am using Datatables on a site with bootstrap and jquery for a large (2000+ entries) table. Some of the (text) values are way too long and at the moment I use something like this:
render: function ( data, type, row ) {
return data.length > 35 ?
data.substr( 0, 35 ) +'…' :
data;
}
in Datatables to cut the strings and display the full value in the html title.
Is there a better way to do this? Like a plugin that automatically cuts but shows all when clicked on or something similar? I was not able to find something.
I saw jquery dotdotdot but it doesnt give me a click to extend.
Modifying strings in javascript in order to make them more viewable or "fitted" to certain DOM elements is a total no-go. Especially when you as here have many strings that is being preprocessed in a callback.
If you force fixed widths to some (or all) columns, example :
table.dataTable td:nth-child(3) {
max-width: 100px;
}
Then you can use simple CSS to ensure that the content of the columns not is wrapped, not go beyond margins and displays a nice ellipsis if it is too large by
table.dataTable td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
demo -> http://jsfiddle.net/ax1gr1og/
I use tablesorter (https://github.com/Mottie/tablesorter), with widget scroller.
You can find examples here : http://mottie.github.io/tablesorter/docs/example-widget-scroller.html
My problem is when tablesorter is contained into other tables like
<table>
<tr>
<td>
table sorter table
</td>
</tr>
</table>
table sorter does not take 100% of the width... And the horizontal scrollbar does not appear automatically.
You can find a example here : http://jsfiddle.net/oqfq47fc/8/
Whereas if table sorter is not contained in other table, its works...
You can find a example here : http://jsfiddle.net/oqfq47fc/9/
Can you help me? I works in portal context and contents portlets are inside table, and it is not possible to remove nested tables.
I think it's just a matter of css, but I know no more...
EDIT
I need that table takes 100% of width like this picture :
And when I resize the browser and that the all table can not display in the available space, a horizontal scrollbar appear at the bottom of the table like this picture :
It works good in my first example.
But in my second example with the outer table, the table look like this picture :
And when I resize the browser, the horizontal scroll bar does not appear on table but on window like this picture :
table{
display: block;
max-width: 100%;
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
}
table.data-table,table#tvar_1{
display: table;
}
html{
overflow-x: hidden;
}
.tablesorter-scroller-table{
width: 100% !important;
}
Fiddle
Adding this set of code is as close as I can get to reproducing what you want with strictly tables. You are using tables for layout and you really shouldn't be doing that. The best way to go is to use the div the way you are in the second iteration where it is correct. It obviously displays the correct and best way. Also, with what I had to do to these tables it is not nice.
Do your best to avoid tables where tables are not needed. This is tabular data so it is needed, but using a table to construct the page is not the right way to go.
now I've been researching for a while about how to code a table so that the thead (or th) parts of a table become fixed when you scroll down on the overflow scrollbar. I haven't been been very successful since I either find something that is not what I'm imagining or uses a plugin which I don't understand how to work. An example of something that I was looking at is like http://mkoryak.github.io/floatThead/ with their overflow option. I just seem to be getting frustrated and lost, so I figured I'd ask you guys. (I'm a beginning web designer so as dumbed down as possible is good. and im fine with working with jQuery and Javascript if that matters)
Here's my code so far: http://codepen.io/PorototypeX/pen/iKJAq
#header_row {
background: #636363;
position: absolute;
width: 1210px;
z-index: 100;
}
The below code will make the tr for thead come out of the srolling area. It's the best I could get with out messing up all the other code.
thead tr{
position: relative;
top: 100px;
}
This works, but you'll have set the sizes on the th for it to make sense.
see an old post below to help you with floating headers
http://linodh.blogspot.com.au/2011/03/gridview-header-floating-using-jquery.html
Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C
I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute
In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out