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 :)
Related
I have a vaadin layout that works fine on a larger screen. As soon as the screen size (and the resolution) drop, all the contents get cut off and no scrollbar appears.
I tried using a Panel to remedy the issue, but the panel likewise gets cut off.
Panel panel = new Panel();
panel.setContent(horizontalSplit);
panel.setSizeFull();
panel.getContent().setSizeUndefined();
I also tried using
Responsive.makeResponsive(horizontalSplit)
but it still cuts off
Any suggestions?
If you set
panel.setSizeFull();
and
panel.getContent().setSizeUndefined();
then it is normally to content be cutt of on small screens.
Solution is to setSizeFull() on panel content too.
Add the following style in your styles.scss file
.overflow-auto{
overflow : auto;
}
Then set StyleName to your panel
panel.setStyleName("overflow-auto");
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.
I'm trying to have an image inside a div of same width to be draggable in the limit of the div. It's difficult to explain but one side of the image (top or bottom) can leave the div but you cannot have a gap between the edge of the image and the border of the div.
To resume the image has the same width of the parent div but its height is bigger so a part of the image is hidden.
Well here is what I want to do:
http://jsfiddle.net/maxwell2022/DerNa/165/
It's working perfectly... because there is nothing above the div. If there is a gap between the document and the div, it's not working anymore. I think Draggable is taking the document as reference for the top of the image. As soon as you start dragging the image, the image move and stuck its top edge to the top of the document:
http://jsfiddle.net/maxwell2022/DerNa/164/
I don't know how I can achieve this with the containment option.
Cheers,
Maxime
UPDATE
Another attempt with relative positioning but no luck: http://jsfiddle.net/maxwell2022/DerNa/166/
I found a solution to fix it getting the top position of the parent div using offset() and add it to the containment boundary. I'm not sure it's the best solution but it looks like it's working.
I just have a difference of 1% in the offset at the top which is quite annoying: if you drag the image and make it stick to the top as much as possible it returns 99% offset instead of 100% (see the result in the console).
The bottom one is correct (0%). I think it's due to rounding the size but I'm not sure.
Here is the jsfiddle: http://jsfiddle.net/maxwell2022/DerNa/167/
If you have a better idea please, please, let me know.
Thanks, Maxime
I have an image in this jsfiddle - http://jsfiddle.net/stevea/5S5NW/4/ - that I've made resizable and then I've made it draggable by applying draggable() to the ui-wrapper that resizable put around the image:
$(function(){
$('img#pelican').resizable({aspectRatio : true});
$('img#pelican').closest('.ui-wrapper').draggable();
});
After resizable() and draggable() have first been applied the ui-wrapper has a position:relative style, as you can see with Firebug. And this remains as you drag the image around. But as soon as you start to resize the image the ui-wrapper style changes to position:absolute. Why does this happen?
If I force the position back to relative with the button, it just goes back to absolute as soon as I resize it again. If I leave out the draggable() line, so the image is just resizable, it works ok, i.e., stays position:relative after a resize.
Does anyone know what's going on here? How can I create a resizable, draggable image that stays position:relative?
Thanks
I updated the fiddle: http://jsfiddle.net/5S5NW/5/
You can find the resize event in this docu: http://api.jqueryui.com/resizable/#event-resize
What I do is simple. While resizing I add css the css property position relative:
resize: function(){
$(this).css('position', 'relative');
}
Keep in mind that theres a reason why jquery setting its position to absolute. Check the browsers and necessary functions if everything is orking as expected.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives