I got a app that shows multiple pages, which are dragable. As the content of those can get very long I want to show only the page-name and limit the height of the page to about 50px on beginDrag() and reset the height to auto on endDrag(). Unfortunately this doesnt work, the styles get just ignored. I think this happends because react-dnd needs to keep the proportion of the elements so it can handle the drop-targets and knows which component is at which position. Is there any other way to accomplish this?
If you use a dragPreview then it will use that instead of the screenshot-ed component, similar to what he does in the tutorial (http://gaearon.github.io/react-dnd/docs-tutorial.html):
componentDidMount: function () {
var connectDragPreview = this.props.connectDragPreview;
var myPlaceholder = <Placeholder /> // A fake component with the height you want
myPlaceholder.onload = function() {
connectDragPreview(myPlaceholder);
}
}
(Note that you'll have to inject the connectDragPreview through the collector like he did as well)
I'm not quite sure I understand the problem but may be connectDragPreview can help you?
Some useful info here
Related
Recently started working on a master detail structure angular ag-grid. The structure has two levels of master-detail nesting. I need to fix the heights of inner - 2 grids such that they occupy all available real estate on the screen. Currently, ag-grid defaults it to 300 px and a lot of whitespace or unused space appears on a 1920x1200 screen resolution monitor. I also need to have fixed headers for all grids.
Any ideas or pointers would be appreciated...
Update: Referring to a forked version of plunker example from ag-grid here - https://next.plnkr.co/edit/yUzo4EqONEmgCmIw This is simple and basic set up for master-detail grid.
Note that: I haven't set any detail row height and have setup just one record to show up in the grid to test for the issue.
If you run the plunker code and view the result in separate window, notice that the inner / child grid doesn't occupy all the space available below it. In other words, it doesn't take as much as space/height available from parent container (master's detail row). The default 300px master detailRowHeight is making height fixed for inner grid. Also, from documentation, detailRowHeight prop doesn't seem to take something similar as 100% or 100vh and only takes fixed pixels number. Added a picture of the example below and the height / unused space I referred
We have different resolutions that users use to view data in grid and the heights of inner grids need to auto-adjust taking max. available space to show most information in the grids.
You could try something like this, I pulled it from the documentation:
In your component.ts file add this method. If it's a detail row it will apply different calculations than the other rows.
public rowHeight(params) {
if (params.node && params.node.detail) {
var offset = 80;
var allDetailRowHeight = params.data.callRecords.length * 28;
return allDetailRowHeight + offset;
} else {
// otherwise return fixed master row height
return 25;
}
};
In your template add the following: [getRowHeight]="rowHeight"
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[masterDetail]="true"
[detailCellRendererParams]="detailCellRendererParams"
[getRowHeight]="rowHeight"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
Hopefully this will get you moving forward. Good Luck!
https://www.ag-grid.com/javascript-grid-master-detail/#detail-row-height
So I don't have a great, full solution for you but as a starting point I would use CSS to override the styles ag-grid is setting - I don't think detailRowHeight is going to help.
Here's my plunk getting close to what you want with some simple CSS I put in index.html. You can use !important to override ag-grid styles, or you could use javascript to set the CSS after ag-grid does. I prefer !important in this case and don't have to worry about timing.
https://next.plnkr.co/edit/mmXBBJE5Wa1JrX7v
The problem I wasn't going to get into is getting it to dynamically fill up available space, depending on the row selected, scroll position, etc. I can't think of any simple way to achieve that - I do this type of thing in grid often and end up writing javascript to calculate the available space, and then set the CSS in javascript.
In ag-grid you have the possibility to set auto height for details.
Set grid property detailRowAutoHeight=true to have the detail grid to dynamically change it's height to fit it's rows.
const gridOptions = {
// dynamically set row height for all detail grids
detailRowAutoHeight: true,
// other grid options ...
}
However if you are providing your own detail component...
detailCellRenderer: 'MyOwnDetailsComponent',
then, it might not work and you will still need to provide an grid options height detail content through...
detailRowHeight: 560,
Please see the ag-grid documentation here
How do I locate the element with the following html, I have 4 Start buttons each in different color. I tried using css by class and is not working. There are no unique ids as well. Pls help
Start
As Ben Mohorc points out, you really need to give us a bit more to go on. But if you are saying there are multiple start buttons, but only one of each color, it ought to look like this. For now I assume all they say is "Start". If that is only part of what they say, use partial buttontext.If it is background color that differs, you may need to adapt that, too.
var coloredButton = element.all(by.buttonText('Start')).filter(function(elem) {
return elem.getCssValue('color').then(function(color) {
return (color == '#00ff00')//fill in the desired color here, in this format
})
});
Then do your stuff on coloredButton.first(), which will be the only one, according to what you are saying.
For more on the format to expect from the color, see http://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.getCssValue
I'm trying to use the AG-Grid for my project and I've been trying to play around with it for a while now, but one problem I came across with this grid is that I can't easily make the columns to auto resize whenever the div or browser resizes like a fluid layout.
I know there is the .api.sizeColumnsToFit() function to use which will do it once it's called, but this would mean I will to manually add a listener or some sort to the window to check if it has been resize and call it if it has?? Is there a better way to achieve this??
Thanks
Try calling sizeColumnsToFit whenever the grid onGridSizeChanged event fires. The following will run when the grid first loads/ or data adjusts (onModelUpdated) and when the grids size changes.
i.e
this.gridOptions = <GridOptions>{
onModelUpdated: () => {
this.gridOptions.api.sizeColumnsToFit();
},
onGridSizeChanged: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
Using the jQuery Fancybox plugin with Isotope, I'm trying to figure out how to update the Fancybox gallery order in lightbox view after I change the Isotope sort by options.
When I re-sort the images I need to be able to tell Fancybox what the new order is, so that when I navigate between images in lightbox view it goes to the next image in the newly sorted order. Right now the next/previous buttons take you to the next/previous image in the original sort order.
Any help is much appreciated.
With reference to this page, the relevant part looks something like this...
$('.option-set').change(function() {
var $this = $(this);
var delay = 1100; // approx 1 second delay after last input
clearTimeout($this.data('timer'));
$this.data('timer', setTimeout(function(){
$this.removeData('timer');
$('a[rel^="lightbox"]').each(function() {
var opacity = $(this).parent().css("opacity");
$(this).attr('rel','lightbox['+opacity+']');
});
Shadowbox.clearCache();
Shadowbox.setup();
}, delay));
});
It's a hack of course. Whenever one of the checkboxes is changed, this routine waits a bit to let isotope do its thing and then updates all 'rels' to correspond to the opacity of their respective parents. So there will actually be two sets of rels (lightbox[0] and lightbox[1]). But because there is no visible thumbnail for lightbox[0], those images are in effect removed from the lightbox/shadowbox.
I came across the same problem and looked around to find a solution and stumbled upon this as well. As I couldn't find a solution, I thought I'd try it myself and the solution was simple. Not sure if this has an affect on performance of the browser, but simple DOM manipulation will give you the required behavior. I'm using isotope V2 and events in this version is a bit different to that in V1. Fancybox version shouldn't matter.
First you have to make sure you have set isInitLayout: false when initializing isotope.
var $container = $("#isotopeContainer");
$container.isotope({
//other options
isInitLayout: false
});
After that, you have to bind to the layoutComplete event on your isotope container.
$container.isotope('on', 'layoutComplete', function(isoInstance, laidOutItems) {
var $firstItem = laidOutItems[0].element;
$($firstItem).prependTo(isoInstance.element);
var $lastMovedItem = $firstItem,$nextItem;
for (var i = 0; i < laidOutItems.length; i++) {
$nextItem = laidOutItems[i].element;
if ($nextItem != $firstItem) {
$($nextItem).insertAfter($lastMovedItem);
$lastMovedItem = $nextItem;
}
}
});
As you set isInitLayout to false while initializing isotope, you have to call the arrange method manually to lay it all out properly.
$container.isotope('arrange');
I'm pretty sure there is room for improvement. But I'm happy with this solution.
Hope someone will find this useful.
Came across the exact same issue tonight!
I suggest re-ordering the order of your griditems in javascript, before you call the isotope function, that way, all your items will already be in the correct order and any lightbox plugin won't get confused :)
(like this for example: jquery sort list based on data attribute value)
Hope I helped someone ;-) Worked like a charm for me :-)
I have a tinyMCE textarea in which I want to limit how large, in pixels, whatever the user enters. Really, I do. I know this is not how most people use tinyMCE, but we are allowing clients to enter and format their own ad text for an ad that is a specific size (407px by 670px). So I want to limit what they can enter to that particular size. I can't limit the number of characters, because that would vary depending on font style/size. I actually want the input to fit within a particular sized box.
I have successfully sized the editor area and turned off the resizing of the editor and the scrollbars (in Firefox anyway), but it will still let the user continue typing past the edges of the box. Is there ANY way to prohibit this?
http://www.retailpromoinc.com/RestaurantAdvertising.php
Thank you for your consideration, I have been wrestling with this for HOURS!
Its a complicated one, as far as i know is there no feature from the TinyMCE Api to do so. What you could try to do is to configure the iFrame that is created by TineMCE.
By:
function iFrameConfig() {
var iFrame = document.getElementById('textareaid_ifr');
iFrame.setAttribute('scrolling', 'no');
iFrame.style.width = '300px';
iFrame.style.height = '600px';
}
Looks like you will have to write an own plugin for this. I will show you the steps necessary for this.
Here is a tutorial on howto write an own plugin, this is not difficult.
You will have to check for the editor content heigth for each of the users actions (keyup, paste, aso.). Use the predefined tinymce event handlers for this.
If the size of 670px is smaller than the real size you will have to undo the last user action automatically using the following line tinymce.get('my_editor_id').undoManager.undo();
I based my solution on Thariama's idea with undo (THX).
setup : function(ed) {
ed.wps = {}; // my namespace container
ed.wps.limitMceContent = function(ed) {
if ((ed.wps.$textcanvas.height() + ed.wps.textcanvasDummyHeight) > ed.wps.iframeHeight) {
ed.undoManager.undo();
}
};
ed.onKeyDown.add(ed.wps.limitMceContent);
ed.onChange.add(ed.wps.limitMceContent); // change is fired after paste too
ed.onInit.add(function(ed) {
// cache selectors and dimensions into namespace container
ed.wps.$iframe = $("textarea.tinymce").next().find("iframe");
ed.wps.iframeHeight = ed.wps.$iframe.height();
ed.wps.$textcanvas = $(ed.wps.$iframe[0].contentDocument.body);
ed.wps.textcanvasDummyHeight = parseInt(ed.wps.$textcanvas.css("marginTop"), 10) + parseInt(ed.wps.$textcanvas.css("marginBottom"), 10);
});
}
Working demo. Works on keyDown and paste. Tested only in FF 12 and Chrome.