I'm currently struggling with resizing panels in Twitter Bootstrap with the jQuery UI resizable. Horizontal resize works fine (sometimes the resize bars get moved though), but vertical resize acts weird. Here's my fiddle: http://jsfiddle.net/9Nyze/
I've tried setting height to 100% in both the .panel and the .panel-body but that just causes the .panel-body to overflow the div.
To solve this, I ended up just tacking a resizable that was on the e side to the .panel and then tacking a resizable that was on the s side to the .panel-body and making the .panel-body have a height: 100%. It works well enough.
Related
I'm using PrimeNG and p-dropdown to show a bunch of filtering options. However, in trying to make things responsive, p-dropdown seems to be fixed to a min-width of content and I can't seem to override it so that it might ellipsis the content or truncate it, etc.
This is the image before making the display narrower:
And this is what it looks like if I resize my browser...
If you notice, the cost center drop down sized to min content, but nothing smaller.
If I replace the dropdown with an input box:
I've tried a few different CSS options to no avail.
[style]="{'minWidth':'20px'}"
I have it working fine going the other way, it sizes to correctly when going wider, just not narrow.
So what did I miss?
Thanks,
Nick
I believe for this to work, you need to set the autoWidth field to be false.
For example:
<p-dropdown
[options]="cities"
[(ngModel)]="selectedCity"
optionLabel="name"
optionValue="code"
autoWidth="false"
[style]="{ minWidth: '50px', width: '50%' }">
</p-dropdown>
This gives me the following:
Stackblitz for reference
I am trying to use jQuery Ui to drag an overflowing child div, this div does drag but further than I like. I only want it to drag the scroll-able amount.
Hopefully this codepen will show you want I mean -
http://codepen.io/seanjacob/pen/RKKEyO
$(".box").draggable({axis: "x"});
All widths will be responsive. It doesn't have to be a jQuery Ui solution.
This is exactly what I was looking for -
http://qnimate.com/javascript-scroll-by-dragging/
github: https://github.com/asvd/dragscroll
It just drags the scrollbar, nothing more or less and is responsive.
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 am using jquery-ui draggable. When I drag my box to beyond the bottom of the screen, the body shifts down. How can I prevent this from occurring?
Tried...
I have tried making the draggable to be containment: "*tag*" where tag is html or body.
Still trying containment, I have tried surrounding the layout with a div, however, this breaks the layout scroll-ability of LHS, RHS and center.
The problem is solved by making the body - position: static !important. This then breaks the layout.
For reference, here is the jquery-ui draggable page.
Css Layout
I have a layout which is header, fixed-height-footer, left and right fixed-width-scrollable, fluid center-scrollable. The header and footer is achievable using a large body border hack. See this question for information on the layout. How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?
Reproduction of the problem.
Here is my Fiddle: http://jsfiddle.net/valamas/LrXCA/
Please click and drag the blue box below the footer to see a black band or a further pink band.
Pass scroll: false to your draggable constructor.
By default the auto-scroll option is set to true, if you don't want it, you have to specify scroll: false when creating the draggable. See scroll option on the jQuery draggable page.
Working jsFiddle
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 :)