I need to style a table added dynamically to my page by maybe changing the CSS settings/Styles. Somehow this has not work and I am looking for a way around this please. How do I resize table headers and columns for dynamically created tables?
Check out jquery .css()
http://api.jquery.com/css/
$("th").css( "width", value )
Jquery has some functions to dynamically change css properties. There are also some functions for width
$("th").width( value )
http://api.jquery.com/width/
Invoke these functions after the table is added to the page.
If the tables have id's or classes you can just target them directly in css. If they are being over ridden add an !important tag to them.
table#idhere {width:500px !important}
or
table.clashere {width:500px !important}
This will find the width of the table and then add it as an attribute so it will be set.
var tableWidth = $('#tbl_reportview table.report').width();
$('#tbl_reportview table.report').attr('width',tableWidth + 'px');
Related
I'm creating tables dynamically based on user data, using Handsontable.
Question: How do I tell handsontable to adjust the height of rows and the width of columns based on the data and the available space?
Maybe this can help:
It is also possible just with CSS but probably you will have to override default min-width for td, th.
Check out this fiddle: http://jsfiddle.net/warpech/z9fYC/
or try also this:
I'm not sure if there is build in function to control this, however, there is hack using css width: in style
style: {
width:'800px'
}
A working example is here http://jsfiddle.net/FDpvV/1/
Here a hint: https://docs.handsontable.com/0.35.0/demo-scrolling.html
I'm looking for a way to increase the width of the container so that the text fits, instead of having it be truncated with ...
I can't seem to get the container css attributes working e.g. containerCss. I get the error Uncaught Error: No select2/compat/containerCss.
I'm using select2 via npm
Right click and inspect the html text input and look at its class name. use chrome inpector and experement setting the width css attribute on those generated elements. Find the corresponding css class. Also look at the class names of its container element. Set the css of those elements to find a desired result. Then on the html page with the jquery selector library use the relevant class names and set the width. Alternitevly read the docs on jquery select library on css styling.
i have integrated backgrid.js in my current assignment everything is working fine but i would like to know that how to set height and width for a cell in the backgrid table?
Is it possible to change the width and height of the backgrid table also how to use on mouse over events on the cell?
You can use jquery and CSS for changing cell height and cell width. You should also be able to use the css classes for cells to detect hovers as well.
Take a look at http://backgridjs.com/misc/styling.html. It explains all the classNames used for the different cell types.
Sorry I can't offer you any examples. I'd need a better explanation of your problem for that.
Yes, you can use CSS. You are using Backgrid so you have table with class 'backgrid'. Override existing Backgrid CSS. For example:
table.backgrid td {
//do something
}
Same as above, you can override height and width of backgrid table.
I want to change the dimensions of a set of elements that are not created yet. They will be created by a JavaScript script that I don't have access to. JQuery's css() function would apply the changes only on existing items, while I want the code to work like if I had set CSS properties in a CSS file.
Can anyone help me do it?
One option would be to dynamically create a style element:
$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head")
$("<div/>").addClass("redbold").appendTo("body");
Taken from here: Create a CSS rule / class with jQuery at runtime.
Here's a possible IE alternative (see Creating a CSS class in jQuery):
document.styleSheets[0].addRule('body', 'background: green', -1);
For reference, see the documentation for addRule.
I have a HTML table. Table already contains one row with two columns. Columns width are perfect for me. But afterwards using JS I add new row to the table with input element which I want to fill the cell as content for first cell and columns width changed.
Easier to show rather than describe:
http://dl.dropbox.com/u/15612314/Layout.png
The question it how to keep previous width for columns without explicit setting width for all columns?
Thanks
You can leverage jquery to acheive this, since you are already using javascript. Ading something this will do:
<script type="text/javascript">
$(function() {
$("input:text").css("width", "100%")
})
</script>