Im using angularjs grid: this component allaways displays only data which fits to page. Suppose I want to have all data displayed at once, even if it takes a few pages (page scrolling is needed to see all data, but without grid scroll).
How to do it?
I played with:
parameter ui.grid.autoResize
trying to overwrite default css
setting.
No result.
Did you tried adding a class to your div. I can see the grid scroll bars if I add a CSS like so. You need to change the below CSS according to your needs.
.grid {
width: 580px;
height: 500px;
}
And here is my ui-grid
<div>
<div class="grid" ui-grid="assetGridData" ui-grid-move-columns ui-grid-resize-columns ui-grid-selection></div>
</div>
Also it will be good if you can have a fiddle for this issue.
One hacky way to make it is to set
gridOptions.minRowsToShow = rows.length + 0.1
0.1 is needed to completely remove the vertical scrollbar of the grid. If 0.1 doesn't work for you, try a higher value like 0.2.
ui-grid-auto-resize worked in my case
Related
I'm using jQuery UI Draggable to drag a <div> whose width is calculated as part of the layout (margin:auto;).
When dragging that element using helper:clone, the clone also gets the margin:auto; style, but is no longer constrained by the original's container.
Result: The cloned <div> may have a different width than the original.
Fiddle: http://jsfiddle.net/ericjohannsen/ajpVS/1/
How can I cause the clone to retain the original's width?
Jon's answer is really good, but it doesn't work properly when you have child elements in the draggable. When that's the case, the event.target can represent your draggable's children, and you'd want to modify the draggable's helper() method something like:
$(".objectDrag").draggable({
helper: function(e) {
var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable");
return original.clone().css({
width: original.width() // or outerWidth*
});
},
...
});
Without this, the helper would represent any child element clicked within the draggable (click the within the light blue region in the "Drag 1" box for example). Adding the additional logic above ensures that the draggable element is used for the helper. Hope that helps for anyone in a similar situation!
* Note: You'll want to use outerWidth if the original element has box-sizing: border-box applied (thanks to #jave.web for raising).
You just need to set the width and the margin on the cloned element based on the draggable object when it is dropped, using $(ui.draggable).clone().css({ ... });
Here's an updated fiddle for you, should be what you're looking for. It will also keep the width for the helper object as well. http://jsfiddle.net/ajpVS/2/
I think I know what the problem is.. where you have:
<div style="width:50px">
it also needs to be included in the objectDrag class:
<div class="objectDrag" style="width:50px;margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
I hope thats what you meant!
EDIT:
Hi took another quick look
http://jsfiddle.net/He2KZ/1/
I used the width:inherit property to inherit the parents width no matter what size it is. Also I noticed removing the border fixed the problem. the dragable clone is 2px out and you have a border of 1px. This is kinda buggy from Jquery-ui IMO they should account for borders at least.
If you really want borders try using "outline" instead of "border". This does not add to the width of the div.
I'm using -webkit-overflow-scrolling:touch for native scrolling capabilities on my iPad. But I've come into quite an odd problem:
I have one div with various children. If these children are big enough to create the need for scrolling, the device properly scrolls correctly, with momentum and all. However, if this div is not big enough to require scrolling, and suddenly has elements inserted into it and now does require scrolling, you will not be able to scroll the element at all.
I hope that wasn't too incredibly confusing, but if someone could shed some light on what to do in this situation, that would be fantastic. There isn't much documentation about this property out there.
EDIT: Tried testing this a lot, and it seems now it's just a generally intermittent problem. Every 1 out of 5 times or so, scrolling just fails for my entire web app, no matter the contents.
I had the same issue and it seems like assigning the CSS class after the new DOM element is added seems to work fine:
// your code to add a div to the DOM
// the div contains a scrollable div with the content class
setTimeout(function(){
// this is using JQuery
div.find(".content").addClass("overflowScroll");
}, 1);
// CSS class
.overflowScroll {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
// The HTML for the div
// I am adding a dynamic list to the content div
// which should use the overflow scroll
<div class="panel">
<div class="header">
</div>
<div class="content"></div>
</div>
All the form examples in the docs for jQuery mobile show each form element on its own line. I would like to have a standard button (which will link to another page), to the right of a search input field. Is that possible with jQuery Mobile?
Thanks
Not natively as an inline unit. However, form elements can be used together with the layout grid system reasonably effectively:
http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html
jQM's UI grids force columns of equal width. In my case, i wanted the submit button to be just the icon to allow the search box more room. i saw <table> mentioned in a couple posts, but discovered that other inputs (notably selectmenu) don't work correctly when they're children of unexpected elements. [1]
So to avoid breakage of the widgets, i managed this:
.ui-grid-a.my-grid-a .ui-block-a.my-block-8515-a {
width: 84.95%;
}
.ui-grid-a.my-grid-a .ui-block-b.my-block-8515-b {
width: 14.95%;
}
It's not bullet-proof, but it can be expanded to additional grid definitions. It uses specificity to get all the grid rules of the existing UI, but then redefine the column widths. No inline styles, no additional tags, and the widgets don't break. And because of specificity, it can be loaded before or after jQM's structure stylesheet.
[1]: https://github.com/jquery/jquery-mobile/issues/6077 jQM Github bug report
With new version you can:
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
The old style solution still works:overwriting the ui-input-search
div.ui-input-search{
width: 55%;
display: inline-block;
}
don't forget to add ui-btn-inline in the class of the a href (if you use the Button markup syntax)
The code works on Chrome and I am trying to get the code to work on ie9. It works properly with the draggable() without containment but messes up the behavior badly when containment is set to parent:
img = $("<img alt='Preview' id='preimg' src='" + data.result.url +"' />")
$('#preimage').append(img);
$('#preimage').resizable({
'aspectRatio':true,
'handles':"all",
'autoHide':true,
containment: "parent"
}).draggable({
containment: "parent"
});
The parent position is set to relative. I am using jquery 1.7.2 and jquery-ui 1.8.20
Is there any workaround?
EDIT
After much testing - I have found that the container size calculation for the div is not working correctly, I was able to get it to work with the resizable enabled but without actually resizing the div. As soon as I resize the draggable containment area reduces in size, resizing multiple times leads to this area becoming smaller until the drag option stops working.
I found that there are several bug reports with the jquery ui library about these issues - http://bugs.jqueryui.com/report/10?P=resizable
I was able to find a work around that I tested extensively and which should work in most situations. The key here is that you need to use a container div that is not floated and has position relative. If you need to use a floated/absolute div just create a div inside it and set the position to relative. For the code in the question the html looks like:
<div class="outer">
<div class="container">
<div id="preimage"></div>
</div>
</div>
and the css would be:
.outer{
position:absolute;
right:0;
}
.container{
position: relative;
}
Since you can't drag an element when you resize and vice-versa, a safer way(to avoid some of the issues) of using the javascript would be:
$('#sqoutline2').resizable({
'handles':"all",
'autoHide':false,
containment: "parent",
start:function(){$('#sqoutline2').draggable('options','disabled','true');},
stop:function(){$('#sqoutline2').draggable('options','disabled','false');}
}).draggable({containment:"parent",
start:function(){$('#sqoutline2').resizable('options','disabled','true');},
stop:function(){$('#sqoutline2').resizable('options','disabled','false');}
});
On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.