I am new to jqGrid. I'm using a grid with datatype as function. When I edit a row, its height is increased so that the controls fit. If I restore the row height is reset, but if I save the data do not, so when I go back to edit, the row height increases again.
I don't have a specific example in front of me at the moment, but I have used jqGrid extensively and found that between using the height parameter and some custom CSS I've been able to fix problems that sound similar to yours.
For example,
jQuery("#examplegrid").jqGrid({
url:'/your/jsonapiurl',
datatype: "json",
colNames:['ID','First Column', 'Second Column'],
colModel:[
{name:'id',index:'id', width:55},
{name:'firstcolumn',index:'firstcolumn', width:90},
{name:'secondcolumn',index:'secondcolumn', width:100}
],
rowNum:10,
rowList:[10,20,30],
pager: '#examplepager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
width: 500,
height: "100%",
caption: "Example"
});
Note the height parameter - I'm guessing you've already tried chaing the height parameter from 100% to something appropriate, but if the height is still misbehaving, you can try CSS like so:
#examplegrid .jqgrow {
height: 25px;
max-height: 25px;
}
And you may want to make that specific to the type of controls that you have in your rows by modifying the css selector or just generalize it, remove the id to hit all grids on the same page if you have more than one grid on a page, etc.
If you've already tried those things and for some reason CSS isn't working to keep the row height correct, I'd take a look at the order of the CSS. Pop it open in Chrome say for example and take a look at whether or not your CSS for height is being overridden someplace. Hope that helps!
Related
I am looking for data-table html structure with fixed header, horizontal and vertical scrolling. I am working on a already developed datatable widget . I found this example https://datatables.net/examples/basic_init/scroll_xy.html where html structure is similar to what I have in my widget. I want to ask in the above example how header scrolls even though the scroll is on body of table .If it is being done by JavaScript still none of the header css properties change when we scroll it horizontally.
Add this script to call your table id
$(document).ready(function () {
$('#tableid').DataTable({
"scrollX": true,
"scrollY": 300,
"paging": false,
});
$('.dataTables_length').addClass('bs-select');
});
for more information: https://mdbootstrap.com/docs/jquery/tables/scroll/
My experience is if you use the example above exactly as it is, ie the same table class, it should work but the moment you introduce other bootstrap classes, maybe you want to add data export to excel feature to the table, things get complicated. A 'one fits all' solution is hard to find, your solution depends on the additional classes/CSS.
I have a table with clickable rows using this js:
jQuery(document).ready(function ($) {
$(".clickableRow").click(function () {
window.document.location = $(this).attr("href");
});
but, I have ajax search for data in table and when is table displayed by ajax, js doesn't work any more. So I wrap every content of every with in that ajax table. So it is looks like: http://jsfiddle.net/fo1tvdyf/4/
Width works fine, but height isn't 100% :( Any one have some idea? Sorry for my english.
You need to give your a display:inline-block so it can correctly assume any given dimensions
Assuming your a has the class clickableRow:
.clickableRow{
display:inline-block;
}
Though note that percentage values are calculated relative to the parent container- as such, you may also need to give the encapsulating element a height value.
After upgrading to ExtJS 5 from 4.2.1 I discovered a grid cell width calculation issue or what appears to be an issue.
Here is an example of the columns
columns: [
{ header: 'One', dataIndex: 'one', flex: 2 },
{ header: 'Two', dataIndex: 'two', flex: 2 },
{ header: 'Three', dataIndex: 'three', flex: 3 }
]
The headers fill the grid width as expected but grid cell widths are not equal to the headers in amounts of -5px / -5px / -12 px respectively.
The appearance is as if there is room for a scroll bar but the grid has only one row.
Grids that have enough data to have a scroll bar do not appear to have this issue.
Resizing the grid column puts things back in a proper alignment until new data is loaded and rendered again with the width calculations off. It re-sizes soon after a new data load.
I thought that maybe css was to blame but changing themes did not fix it nor did using ext-all.css rather than the debug css.
Is this a bug or have I missed a new config that will correct the width calculations?
If this is a bug ... any suggestions for a work around?
Help much appreciated.
UPDATE 1:
I used Sencha Cmd to generate a basic app and created a grid view with the columns and a features.
So far it looks like having a grouping feature seems to be the culprit.
However, I do see the behavior on grids without a grouping feature.
Those grids are in a border layout so I'll investigate that next.
It looks like bug, however I discovered that wrapping grid with container with auto layout make fixes that issue (at least in my case).
Example: http://jsfiddle.net/nj4nk/3/
In example you can see 2 grids:
first inside panel with fit layout - rows are narrower
second inside panel with auto layout - rows are same as header
Using layout:'auto' leaves scrolling broken.
It appears that space is being reserved for the scrollbar, but setting reserveScrollbar:false doesn't help.
When embedding JavaFX in javascript, is there a way to base the height and width on the size of the JavaFX stage? So if I were to update the dimensions of my stage, I wouldn't have to edit the javascript as well.
Conversely, is there a way to bind the dimensions of my stage to the dimensions of the user's browser?
In the JavaScript options is one named show_html. When setted to true, the script will show you the HTML. Once you have it, you can apply CSS styles to it and use the HTML instead of the JS.
The solution I came to was to set the applet up like so:
javafx(
{
archive: "myapp.jar",
width: "100%",
height: "100%",
code: "my.app.myapp",
id: "app"
}
);
which worked just fine for filling the screen.
I am using mootools 1.2 in a simple page. There's a div that displays a form (call it formdiv) that gets submitted via JS/ajax. The ajax request returns some data "confirmation message".
However, the formdiv div starts out maybe 500px high to accomodate the form elements. When the ajax request returns a variable-length return data ("confirmed for submission!") the div stays 500px high, leaving a lot of extra space.
My question is, is there a way to snap the div back to fit the new content after updating the content using innerHTML?
Thanks
EDITED: to add that the data returned by the Ajax call could be variable length-- so I can't assume it'll be a certain height and then reset the div to that height.
If your div starts off with predefined height using CSS then all you should do is set its height to auto or clearing styles altogether when they were set inline.
Check this JSFiddle (it works with jQuery here, but that doesn't matter when it comes to browser rendering div in question)
Okay I realize that this is like a year late but I came across this question while attempting to find a script to do just this. This was a great starting point but I felt like I should share the method I choose to use:
Get the current actual height of $('element').
h.before = $('element').getSize().y;
Fx.Morph can't handle setting the height to 'auto' so first you must set height: 'auto' on $('element') (in case it hasn't been already) and then set the html to the new content. This will allow you to get the new content's height.
$('element').setStyle('height', 'auto');
$('element').set('html', "Some other content.<br/>Very short.");
h.after = $('element').getSize().y;
Reset the height and then start the Fx.Morph with h.after.
$('element').setStyle('height', h.before);
var myEffect = new Fx.Morph('element', {
onComplete: function() {
$('test').setStyle('height', 'auto');
}
});
myEffect.start({'height': h.after});
You can check out the full code here: http://jsfiddle.net/cd4R9/
Please understand this is method is very basic and a lot would have to be done to make this site-ready. For example if your $('element') has padding, you will have to account for it or use the CSS property box-sizing: border-box;. Hope this helps.