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
});
Related
How to fix the size of the container of the tooltip in materialize?
I'd like width 200 always. How to do that?
You can have any specified fixed width for the tooltip containers by simply adding the following to your CSS:
.material-tooltip {
width: 200px;
}
Better use max-width instead of width
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);
}
});
I'm trying to make a clone of jsfiddle. This is a 2x2 layout. I found jQuery-UI Layout which works perfectly... accept it seems to require a "center" pane, which doesn't exist in a 2x2 layout.
How can I disable the "center" pane? Or how can I make a 2x2 panel layout using "jQuery UI-layout" or another plugin?
Simply consider one of your "column" as center pane, and then divide it horizontally in two sub-panes. You have to think it such as a "nested" layout.
I want to increase the font-size of the text in the JQM data-role=header tag without allowing JQM to increase the height of the header bar from its normal (20px?)
JQM seems to be calculating the height for the bar based on the font-size of the child nodes.
This worked for me: http://jsfiddle.net/shanabus/Z2saQ/
Click the button to see that page 2 is different and works per your question.
I just set the .ui-header class of #page2 to a static 41px tall.
Then set the h1 to something larger like 2em.
Creating a button in Titanium it gets a 100% width from the system if width is not defined or
set to auto:
var button = Titanium.UI.createButton({
title: 'Some Title',
width: 'auto'
});
I want to have the button have the exact width of its content without calculating the contents width myself or setting it manually.
In the documentation I can not find any options to achieve that.
Is there an option to have the button width match its contents?
Favo, I'm not sure I understand the question. I believe the answer to your question is setting the width to auto, so why is that not what you are looking for?
Answering my own question to allow me to close it:
Currently a default button can not be sized dynamically to its content in Titanium.