On iPad app that I have iScoll is applied on divs and it works perfect.
I have a textarea that contains a long text. On desktop we have scroll bar on long textarea but on iPad we don't.
How can I have scroll on textarea?
I solved the problem by detecting textarea's actual height:
textaraElement.scrollHeight
then assign it to textarea height:
textaraElement.style.height = textaraElement.scrollHeight + "px";
By this way textarea is scrollable inside iscroll divs.
Just notice that you should repeat this and refresh iscroll on ipad orientation change.
If your textarea is editable then on keyup run this line:
textaraElement.style.height = textaraElement.scrollHeight + "px";
and iscroll refresh.
Related
Do you guys know if have a way to do iframe scrollable for iOS devices?
The inside page has scroll events, which if I use a div to wrapper, my code will break then I can’t use a parent div for scrolling.
I am using iscroll-probe.js to implement the pull-to-refresh and infinite load in a Phonegap application using the example given in this link.
I am loading the contents dynamically so iscroll is refreshed after the list items have been added.
Everything works perfectly for me except the situation when the total height of the list items is lesser than the screen height.
This is when the scroller is not required hence is disabled but it also disables the pull-to-refresh. This I think is how iscroll works as the scroller is disabled the moment I call the refresh method.
Does anyone know how to make pull-to-refresh work when the content height is smaller than the screen height.
For anyone still interested, I solved this problem by setting a min-height to the #scroller element.
I did this using jquery (I'm not sure if it can be done by using css only).
$('#scroller').css('min-height',($(window).height()+1)+'px');
That is: the #scroller element min-height is set to the window height + 1px.
This way the scroller is always enabled.
Please note that this instruction has to be executed before instantiating the iScroll element.
The jQuery Mobile popup dimensions are limited to having a 15px margin on the left an right sides, and a 30px margin on the top and bottom. If the content is too large for these constraints, then the popup grows longer (not wider), so that the whole page must be scrolled to view the popup content.
I need to change this behavior such that the popup dimensions never exceed the height of the window, and such that the content scrolls vertically within the popup.
It is possible to limit the size of the popup thusly:
$('#popup').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 30
$('#popup').css('max-height', maxHeight + 'px')
}
})
...but the popup content is the same, passing the bottom of the popup and still forcing the user to scroll the page, rather than the content within the popup.
How do I allow the popup content to scroll vertically within the popup?
You should use:
$('#popup').css('overflow-y', 'scroll');
Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/
Final notes
If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.
I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.
I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?
.Vertical
{
writing-mode:bt-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".
Anyways, adding this wrapper outside of the menu works.
#div1
{
position : relative;
z-index : 1000;
}
More code
z-index = 1 as stated works, but I just want to make sure it covers everything.
Please see http://jsfiddle.net/6XVNr/2/ for a (not very sexy) example of the issue I'm having.
I wish to resize an iframe element which has been given the jQueryUI dialog treatment. The issue I have is that I'm not sure which element I should resize.. I can resize the id of the iframe which was targeted for the .dialog() function, or I can resize the resulting ui-dialog class, which wraps around the iframe.
Resizing the iframe element only affects the height of the dialog, the width is simply hidden by the dialog. Resizing the ui-dialog class almost works perfectly.. the size is fine, but the buttonpane is not sticking to the bottom of the dialog. Which is the correct method and how can I get it fully working?
Please ignore the colours, the scrollbars, the fact it's not centred after resizing etc.. I stripped everything out for the example - also tested with a div instead of iframe and got the same results.
Thanks :)
Well it suddenly occurred to me - why not alter the height by resizing the iframe element, and the width by resizing the ui-dialog class.. seems to work ok so far :)