I'm using ag-grid react to add rows dynamically to the grid and have a button in one of the columns. However I'm unable to adjust the row height and as such part of the button gets chopped off like so:
I've tried setting the row height explicitly in gridOptions
And tried getRowHeight callback
const [gridOptions,setGridOptions] = useState({
rowHeight: 50,
getRowHeight: (params) => {
return params.data.rowHeight;
},
None work.
What should i do?
Related
An application that I'm working on has a ui-grid on the page. Recently, we added a horizontal scrollbar to the grid and also enabled "pinning" so that some of the columns could be frozen while the grid was scrolled horizontally.
One odd behavior that I've noticed is that the newly added scrollbar overlays the last row in the table. Has anyone else ever experienced this and, if so, figured out how to stop it from happening? I've tried everything I could think of (i.e. changing row height, dynamic sizing of the grid, etc) but nothing is working. I'm hoping someone else has overcome this issue and can tell me how they did it.
Well, I found a way to resolve this, but it's particular to how our grids are created.
All of our grids that have horizontal scrolling have the first three columns pinned. I used the code below to see if the grid in question has the grid option for pinning. If the grid is scrollable, I simply add 15 to the grid's height. This makes the grid bigger so that there's plenty of room for the scrollbar without it overlaying the bottom row.
var scrollbarOffset = 15;
var buffer = 5;
var gridHeight = ((rowCount > 0 ? rowCount : 1) * rowHeight) + footer + header + filter + buffer;
var scrollable= $.grep(element[0].attributes,
function (rn) {
return rn.nodeName === "ui-grid-pinning";
}).length > 0;
if (scrollable) {
gridHeight = gridHeight + scrollbarOffset;
}
I have an example where I want to show the height of the text area based on the content.
I see a gap at the end, where the textarea height is more than the content.
http://jsfiddle.net/Nd6B3/55/
function autoheight(a) {
$(a).height($(a).prop('scrollHeight'));
}
I am working on Table view in Titanium iphone.
I tried to add animation style for each row.
That is, when user click on each row , then row height need to increase, So I able to show hided contents in row. And when user click again then the row height need to decrease.
My code is,
for collapsed view,
var animation = Ti.UI.createAnimation({height: 1, duration: 500});
row.animate(animation);
and for expanded view,
row.animate(Ti.UI.createAnimation({ height:200, duration:300 });
but above both code are not working,
If I set row height without using animation then its working fine.
How to apply animation style for table view row...
can any one please.
you can try this
http://developer.appcelerator.com/question/119198/animating-row-height-changes
TableViewRow cannot be animated. It's documentation bug. You need to make your own animation function (ie, setTimeout).
The height of the row is animated by default (on iOS) when you change it, so :
row.height = '40dp';
If you set the row height directly to a numeric value, it will be animated by default on iOS. The default animation will override any custom animations you might come up with for example using the standard setTimeout javascript function.
The difficulty is to make the row content appear animated as well. Let's say row.details points to a container view that holds the hidden row details to be shown on expansion. It's height would be initialy set to zero. The following piece of code will animate the whole row in a smooth way:
var total_height_increase = 260;
var height_step = 5;
var duration = 200;
var time_step = duration * height_step / total_height_increase;
var num_steps = duration / time_step;
var i=0;
var increase_height = function(){
setTimeout(function(){
row.details.height += height_step;
i += 1;
if (i > num_steps) return;
increase_height();
}, time_step);
};
increase_height();
row.height += total_height_increase;
I've been searching around on how to do this, but I've been unsuccessful.
What I'm trying to accomplish is this: I have a TableView with, say, 5 rows. I want to be able to swipe a row left to expose information "behind" the row. Not sure if this would be done by adding an additional row to the TableView and placing it behind, or what?
At the end of the day, what would be even cooler, would be to be able to swipe the row left OR right, and depending on which direction you swipe, the row behind gets populated with different information.
Any ideas?
From your description, it sounds like you want something similar to what Twitter does when you swipe across a Tweet.
First, make sure the rows in the table don't have vertical/horizontal layouts.
Then create the left and right swipe views you want for each row, like so:
var leftSwipeView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: '#ff0000', //just to make the effect apparent
visible: false
}
var rightSwipeView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: '#00ff00', //just to make the effect apparent
visible: false,
}
row.add(leftSwipeView);
row.add(rightSwipeView);
row.addEventListener('swipe', function(e) {
if (e.direction == 'left'){
leftSwipeView.setVisible(true);
setTimeout(function(){leftSwipeView.setVisible(false);}, 2000);
}
if (e.direction == 'right'){
rightSwipeView.setVisible(true);
setTimeout(function(){rightSwipeView.setVisible(false);}, 2000);
}
});
The snippet I have up there will hide the views again after 2 seconds. Hope that helps.
Found the perfect solution on Github.
https://github.com/rborn/TiSwipeToReveal
I am implementing drag and drop, user can drag few images and drop them in a div, and I dynamically append a p tag as label to each image once user click on a button.
Currently I meet problem when I have 2 images which is very close to each other (one is on top of another). The appended p tag for the top images will be hidden by the bottom image. I tried to alert the z-index for each dropped image, and found out it is 'auto'. I guess I need to assign a new z-index for each div, but I tried in the function which i append the label, and it dint work as expect:
function generateLabel() {
var current = 5000;
$('#rightframe img').each(function () {
var cImgName = $(this).attr('id');
var width = $(this).width();
// To select the respective div
var temp = "div#" + cImgName;
$.ajax({
url: '/kitchen/generatelabel',
type: 'GET',
data: { containerImgName: cImgName },
async: false,
success: function (result) {
$(temp).append(result);
// I guess the each function loop through each div according to the time it is created, so I try to assign a decreasing z-index
$(temp).css('z-index', current);
current -= 100;
// To select the label for the image
temp += " p";
// Set label width based on image width
$(temp).width(width);
}
});
});
However, what I get is, bottom image which dropped later do NOT hide the label of the image above, but if the above image is dropped after than the bottom image, above image's label is hide by the bottom image.
It's a very specific situation and I hope I do make myself clear...
Hope can get some help here... Appreciate any feedback...
I am so glad that I able to work out a solution for this kinda weird problem. I get to one useful plugin, the jquery-overlaps which check 2 dom whether they are overlapped with each other or not. Then i assign a z-index to the label accordingly.
Just to show my solution here, in case anyone jump into this bottleneck :)
// To assign an increasing z-index to the label
var count = 100;
$('#rightdiv p').each(function () {
// If any label overlaps with the image (used overlaps plugin)
if ($(this).overlaps($('#rightdiv img'))) {
// Increase count (the z-index)
count += 10;
// Set the parent div z-index 1st, if not the label z-index do not have effect
$(this).parent().css('z-index', count);
$(this).css('z-index', count);
}
});
Thanks! :D