I'm trying to use JQuery UI Resizable in order to add resize handles to 4 Td tags in a Table.
My intention is for all td's to react to the resize and to be constrained in the table width, height. (pretty much what the resize handles used on JS Fiddle are doing)
Currently, the td's are not constrained to the table and although the handles work, if I use the handle on one side of the table, then use the second half of the handle, the second half of the handle will never go above the height (or width) I stopped at with the first half (this happens vertically and horizontally).
Here's my fiddle: http://jsfiddle.net/fdLkqv2L/
$("td").resizable({ handles: 's, e' });
Heres the fix man:
http://jsfiddle.net/fdLkqv2L/1/
The problem is the other cells height are not updated while resizing, and the <tr> height is the same as the highest height of its <td>s:
With this code you also resize all the siblings (all other <td>s in current <tr>):
$("td").resizable({
handles: 's, e',
resize: function (event, ui) {
$(this).siblings().height(ui.size.height);
}
});
Related
I am trying to make my take up all vertical space even if there are no rows in the table yet. Is clr-datagrid customizable to do so? It seems like I have to manually override flexbox properties of .datagrid-host and .datagrid-overlay-wrapper in order to make it grow in column direction.
I tried even that but the datagrid don't seem to be growing vertically.
The Clarity datagrid supports any fixed height you want on the datagrid element itself. If the height is too large for the number of displayed rows, the body will expand with empty space. If the height is too small for the number of displayed rows, the body will scroll while the header and footer remain in place.
So in your case, it's as simple as putting height: 100% for the datagrid in your CSS. That's all you need to do. See https://plnkr.co/edit/eZqaic8CS6CFHVcGxAnH?p=preview for a working example.
I have a problem with jquery ui resizable, I face this problem many times, It make me confuse, the problem is: The right side of the div moves when resizing. Why?
The problem occurs when I set min-width for the div.
This is the fiddle of my problem: My fiddle
stackoverflow asked me to accompanied by code also it's not necessary but here it is:
$('div').resizable({
handles: 'e, w'
});
I found the answer here.
I should set the minWidth in resizable initialization so instead of min-width property in css. I should do this:
$('div').resizable({
handles: 'e, w',
minWidth: 50
});
In my app. I am using iScrollview.js,to achieve smooth scrolling on touch screen devices.
iScrollview.js calculates height of iscroll-wrapper by this way :
$wrapper.height()+$pullDown.outerHeight()+$pullUp.outerHeight
In one view there is an accordion structure. When the accordion is expanded, I am unable to scroll properly due to the load-time height calculation of iscroll-wrapper.
I think this is due to the height of whole page being less than that of the accordion structure.
Can you please advise how to manage the height of iscroll-wrapper dynamically?
I have a jQuery UI dialog to which I applied a padding, and inside the dialog I have a long table. I then configure the dialog to be of limited height in order to have a scrollbar.
It seems that whenever a nowrap is applied to the table cells, the padding to the right of the table is covered by the scrollbar. If I remove the nowrap, it works fine.
Here is an editable example:
http://jsbin.com/okolap/4/edit
It seems that it only happens when you set the dialog's width to auto.
One workaround is to set the table's width to 100% and reset the dialog's width to a fixed length. The length needs to add a padding equal or larger than the width of the scroll bar. For example:
var newWidth = $('.Dialog').width() + 50;
$('.Dialog').width(newWidth);
See this in action: http://jsbin.com/okolap/10/.
Using CSS3 columns to take a somewhat large text document and make it scroll horizontally. I want each column to be close to the size of the iPad screen, as I am displaying the content in a UIWebView.
If I make the -webkit-column-width: property a relatively small number, everything works great. The text stops at the max-height set for the containing and columns out horizontally.
If I make -webkit-column-width anything larger than about 300px, though, this css seems to get completely ignored. The text displays vertically as it would without styling. Any fixes?
Display when -webkit-column-width is 325px. The view scrolls to the right normally:
Display when -webkit-column-width is 500px. Text appears as one column and the view scrolls downward to the end of the document, ignoring max-height:
You are trying to divide, let's say, 600px wide container into X 500px wide columns. Browser renders only one column because it can't put 2 (or more) 500px wide columns in 600px wide container. First of all - by default, the browser will stretch your content vertically, to make it stretch it horizontally you have to specify fixed height for the container and width needs to be set to auto (which is default). Of course you need to adjust this values so columns will fit iPads viewport.
Here is demo of code, that should work properly - http://jsfiddle.net/wojtiku/bFKpa/
#container {
height: 300px;
-webkit-column-width: 150px;
-webkit-column-gap: 20px;
}
NOTE: I don't have iPad, tested on desktop.