I have an ag-grid master-detail grid where one master row typically has only 1 or 2 sub-rows in the detail grid (there's always 2 columns for the detail grid). When I write up the code matching the examples on ag-grid's documentation, it always leaves huge whitespace under the detail grid and it auto-expands the detail grid's width to the width of the container.
I would like to get rid of the extra whitespace under the detail grid and also size the detail grid so the columns are only as wide as they need to be to fit the data. (Thus there would be whitespace to the right side of the detail-grid)
I've tried looking through the styles in chrome dev tools but I can't figure out what controls those 2 styling aspects. In addition, setting domLayout = 'autoHeight' in the detail grid options just moves the bottom of the detail grid to the last row, but it doesn't get rid of the extra whitespace in the cases where there's only 1 detail-row.
Plunkr MVPs (includes domLayout = 'autoHeight' in detail-grid's options):
React: https://plnkr.co/edit/K76FssFF4Ex538fn
Angular: https://plnkr.co/edit/0n5EllKejfyq9x4E
The original plunkr samples came from the "Simple Example" plunkr on the ag-grid master-detail documentation.
All you need to do is refer the documentation here, as for the additional things needed.
We need to use this method from the ag-grid documentation.
this.getRowHeight = function(params) {
if (params.node && params.node.detail) {
var offset = 80;
var allDetailRowHeight =
params.data.callRecords.length *
params.api.getSizesForCurrentTheme().rowHeight;
var gridSizes = params.api.getSizesForCurrentTheme();
return allDetailRowHeight + gridSizes.headerHeight + offset;
}
};
Also on the detail panel grid options we need to add this property, which will set the height dynamically.
this.detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{
field: 'duration',
valueFormatter: "x.toLocaleString() + 's'",
}
],
defaultColDef: {
flex: 1,
editable: true,
resizable: true,
},
onGridReady: function(params) {
params.api.setDomLayout('autoHeight');
},
},
getDetailRowData: function(params) {
params.successCallback(params.data.callRecords);
},
};
Below is a working example for your reference
Plunkr example
After combining Naren's answer with some css adjustments, this is the best result I could get. I'm not accepting this answer because it's not what I want, but I can live with it until I (or someone else) can figure out something better.
https://plnkr.co/edit/d9emrRiavR9gCpQl
Basically I added these 2 things to the plunkr:
this.getRowHeight = params => {
const defRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
if(params.node.detail) {
const offset = 80;
const detailRowHeight =
params.data.callRecords.length * defRowHeight;
var gridSizes = params.api.getSizesForCurrentTheme();
return detailRowHeight + gridSizes.headerHeight + offset;
} else {
return defRowHeight;
}
}
styles: ['::ng-deep .ag-details-row { width: 50% }']
An acceptable solution would provide a way to resize the detail grid directly to the width of the actual columns (rather than an arbitrary percentage)
Image:
(You can remove that little extra space under the 1st row of the detail grid by overriding min-height of one of the grid's css classes. It only appears if there's 1 row in the detail grid)
Related
I was trying to use JQuery UI Sortable plugin for multiple tables. The idea was to grab and drop elements in cells of a table, by connecting all <td> tags with this plugin.
It looks like this: https://jsfiddle.net/Lhm3z0bw/3/
By changing zoom with mouse wheel controls, we can actually grab the elements already placed in the table.
However, when the scale is changing, moving them makes a shift on the current grabbed element.
I tried adding some functions from the JQuery UI API for resetting positions for the element or updating the helper, but there's no good results on it.
$(".sortableCards").sortable({
connectWith: ".sortableCards",
containment: "window",
scroll: false,
placeholder: "sortable-placeholder",
items: ".card1",
forcePlaceholderSize: false,
sort: function(evt,ui) {
//////////
// Maybe some fix needed here ?
//////////
}
receive: function(event, ui) {
if ($(ui.sender).hasClass('cards')) {
if ($(this).find('.card1').length > 2) {
$(ui.sender).sortable('cancel');
} else {
ui.item.clone().appendTo($(ui.sender));
}
}
}
});
Here is another linked question with the same issue : How to get JqueryUI Sortable working with Zoom/Scale - mouse movements
I am currently using CanvasJS for pie charts in a project done in ReactJS. When a search for a particular person is done, I render 4 pie charts displaying information. I would like to render the pie charts side-by-side (as the space allows) over multiple rows using Flexbox.
Currently, when the pie charts render, each CanvasJSChart takes up the entire width of the row. In the picture below, you can see that although each pie chart takes up ~1/3 of of the table (the "Trial Version" and "Canvasjs.com" are not fixed in position relative to the pie chart and can move closer to it, depending on the size of the container), the container is the width of the row. I would ideally like each row to contain 2 pie charts (but not fixed to allow the application to work better on small screens).
This is my CSS section.
.container {
display:flex;
flex-wrap: row wrap;
}
When I did not have the flex-wrap: row wrap; line, the charts would individually take up less space and all remain on the same row:
So when I do try to have the charts wrap around, I'm not sure why the size of the container changes to the entire row. Below is my code that renders the charts (in a component named Accuracy when I search a name:
class Contestant extends Component{
constructor(props){
super(props)
}
render(){
var name = this.props.data[0];
var data = this.props.data[1];
let fjText = null
let fj = null
if (data.FJCorrect+data.FJIncorrect>0){
fj = <Accuracy numberCorrect={data.FJCorrect} numberIncorrect={data.FJIncorrect}
overallAccuracy = {data.FJAccuracy}/>
}
let tiebreak = null
let tiebreakText = null
if (data.TiebreakCorrect+data.TiebreakIncorrect>0){
tiebreak = <Accuracy numberCorrect={data.TiebreakCorrect}
numberIncorrect={data.TiebreakIncorrect}overallAccuracy = {data.TiebreakAccuracy} />
}
return(
<div className = "container" >
<Accuracy numberCorrect={data.numberCorrect} numberIncorrect={data.numberIncorrect}
overallAccuracy = {data.overallAccuracy}/>
<Accuracy numberCorrect={data.JCorrect} numberIncorrect={data.JIncorrect}
overallAccuracy = {data.JAccuracy}/>
<Accuracy numberCorrect={data.DJCorrect} numberIncorrect={data.DJIncorrect}
overallAccuracy = {data.DJAccuracy}/>
{fj}
{tiebreak}
</div>
)
}
}
export default Contestant
and below is my code that renders a Contestant component:
class Search extends Component{
constructor(){
super()
this.state = {search: "",
isLoading: true,
result: "",
searchType: null
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleSearch = this.handleSearch.bind(this);
}
handleSearch(searchStr){
//Takes in text and finds data of corresponding person
}
handleChange(event){
//In case someone is searching for a new term, we have to reset search query type
if (this.state.searchType !== null){
this.setState({isLoading: true})
}
this.setState({search: event.target.value});
}
handleSubmit() {
this.setState({isLoading: false, result: this.handleSearch(this.state.search)})
}
render(){
return(
<div>
<input type="text" value={this.state.search} onChange={this.handleChange} placeholder={...} />
<button type="submit" onClick={this.handleSubmit}>Search</button>
{this.state.result.length === 0 ? null: <Contestant data={this.state.result}/>}
</div>
)
}
}
export default Search
My CanvasJS pie chart has the default settings as on the linked website (with only data points changed), so I'm not sure why the size of the charts change depending on whether I wrap my Flexbox cells.
class Accuracy extends Component{
constructor(props){
super(props)
}
render(){
var correctAccuracy = ((this.props.overallAccuracy).toFixed(2)).toString()
var incorrectAccuracy = ((100-this.props.overallAccuracy).toFixed(2)).toString()
var options = {
animationEnabled: false,
animationEnabled: true,
animationDuration: 500,
backgroundColor: "#F0F8FF",
height: 260,
data: [{
type: "pie",
startAngle: 300,
toolTipContent: "{accuracy}%",
indexLabelFontSize: 16,
indexLabel: "{label}:{y}",
dataPoints: [
{ y: this.props.numberCorrect, label: "Correct", accuracy: correctAccuracy },
{ y: this.props.numberIncorrect, label: "Incorrect", accuracy: incorrectAccuracy},
]
}]
}
return (
<CanvasJSChart options = {options}/>
)
}
}
export default Accuracy
Any help would be greatly appreciated! I've been stuck on this for a couple of days
From the first screencap, it seems like your problem is that the width of your pie chart containers is set to 100%. This means that each container will be 100% of its parent--in this case the .container div. Your CSS should look like this:
.container {
display: flex;
flex-wrap: row-wrap;
}
.piechart-container {
width:50%;
}
And of course you need to add the "piechart-container" classname to you piechart container divs. I didn't try this out so let me know if it works. You may have to set the width to be slightly less than 50% or change the max-width property as well. Instead of width:50% you could do flex:0 0 50% which is a flexbox item property meaning "set an initial width of 50% and don't allow any growing or shrinking."
Edit: just now seeing that you want some flexibility. You'd probably be better off setting the container widths in terms of pixels instead of percentages so that when the screen gets small enough they overflow to be one chart per row. I would recommend looking up "media queries" and setting the CSS so that if the screen width goes below a certain number, a different set of attributes takes place (i.e. smaller charts, different wrapping behavior)
I am implementing a simple widget but I am a primer with animations :)
How can I avoid the second "screen" to occupy space while transitioning in?
Here my fiddle: https://codesandbox.io/s/7w4yw5yq4q
As you can see when you click a button on the first "screen" both the first "screen" and the second are in the DOM so the widget doubles its height.
I want that the two occupy the same line so the height of the widget stays the same.
I guess that I need to use absolute positioning but I want to be sure that it is the right way to do this and see an example of the implementation.
Maybe is there a way to do it without losing the height of the parent (that when the children are absolute positioned goes to 0)
Likely a bit late to answer this but may be others looking for the same answer may benefit.
Is this what you were asking to do?
One thing in Mithril is that if you don't want to return an element, you can just return a null. I use that technique a lot like showHeading ? m("h1", "Heading!") : null
The following is the mod of your code and its fiddle to demonstrate. There are other ways of doing it like dynamically changing the class depending on the toggle.
var m = require("mithril");
import "./style.css";
let app = function() {
let toggle = false;
return {
view: vnode => {
return m(".steps", [
m("button", { onclick: () => (toggle = !toggle) }, "toggle"),
m(
".step",
toggle
? null
: [m("h1", "Title 1"), m("p", "jfewlkfjewklfjwelkfjklewjfw")]
),
toggle
? m(".step.slide-in", [
m("h1", "Title 2"),
m("p", "jfewlkfjewklfjwelkfjklewjfw")
])
: "",
m(".step", [m("h1", "Title 3 "), m("p", "jfewlkfjewklfjwelkfjklewjfw")])
]);
}
};
};
m.mount(document.getElementById("app"), app);
I am also trying to positioning a node in a cell in grid layout as below
layout: { name: 'grid',
fit: true, // whether to fit the viewport to the graph
rows:5,
columns:12,
padding: 10, // the padding on fit
position: function( node )
{ console.log("Row : "+node.data('row') + ", COL : "+node.data('col'));
return {row:3, col:node.data('col')};
}
},
But node is always created in the middle of the canvas, even if I hardcode the row as above. Any suggestion, what is going on.
Thank you
If you're manually specifying positions, you shouldn't need to set the overall dimensions. Maybe you've overconstrained it (e.g. row beyond rows)?
Alternatively, you could set the dimensions and a sort function to indicate the ordering.
I've been trying to integrate infinity inside a defined scrolled area.
My UI is a bunch of inline-block thumbnails (not floated). Grid Layout.
Infinity works perfect inside my page when it occupy the whole page width & height, and each element is block level, with simple DOM inside.
But when create a little more advanced UI, with grid interface, and an infinity area to scroll inside a container (ListView's height isn't defined. It's container does), then all gets wrong.
Even more than that. If I give 100% to HTML & Body, infinity fails. it calculates wrong listView`s height.
How to solve this? Grid UI is a desired & common one.
JS Fiddle Demos:
All 1300 elements are block-level - #OK
ListItem (CSS) Width & Height defined - #OK
ListItem as inline-block - #Broken
Code Example (Infinity NG Integration)
var demoApp = angular.module("demo", []);
demoApp.controller("demoCtrl", function($scope) {
$scope.items = [];
for(var i = 0; i < 1300; i++) {
$scope.items.push({ title: "Item " + i });
}
});
demoApp.directive("infinityScroll", function() {
'use strict';
return {
restrict: "A",
transclude: true,
link: function(scope, elm, $attrs) {
scope.listView = new infinity.ListView($(elm));
}
};
});
demoApp.directive("infinityItem", function() {
'use strict';
return {
restrict: "A",
link: function(scope, element, attrs) {
scope.listView.append(element);
}
}
});
PostScript: I noticed in the API Reference, that ListItem has width & Height properties. Same as ListView.
I couldn't find how to implement it, Inside the build code itself, i haven't seen how to pass this properties to the object.
Sorry if its obvious thing, and its possible to do that.
Will appreciate any help.
Thanks.
Actually right now I discovered my problem.
2 elements that messed up with my UI where actually - Overflow:Hidden for my Body,HTML, and Height:100% for a page container.
I have removed Overflow:Hidden, and Height from the page container (not ListView!) and all is fine.
'useElementScroll:true' and .scrollable classname did not assisted me, and prevented me from needing do this actions.
Now my UI is impacted, and I need to see how I`ll solve it.
Edit:
I have opened an issue at airbnb git, and I hope they will pay attention to this. Not been able to set a father and relate only to him, is an issue that adds complexity.
https://github.com/airbnb/infinity/issues/46