I need to show Action buttons to the left on row hover. The below reference have the solution I need but that has the action buttons to the right. I tried changing css but still it doesn't work.
Is there any way I can achieve this thru CSS. Thanks in advance
Reference: ag-Grid - show buttons on row hover like in Gmail
Reference Plunker: https://plnkr.co/edit/X4hCimLy6aL3j4eh?preview
This is the css I used
.ag-pinned-left-header,
.ag-horizontal-left-spacer {
width: 0 !important;
min-width: 0 !important;
}
/* Add absolute position so that action buttons column will appear on top of other columns. pointer-events: none to pass on mousemove event to behind columns */
.ag-pinned-left-cols-container {
position: absolute !important;
left: 0;
pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-left-cols-container * {
pointer-events: initial;
}
/* Hide border of left-cols-container */
.ag-pinned-left-cols-container .ag-cell {
border: none !important;
}
/* Show action buttons only for row that is being hovered. For rows which are not being hovered, hide them by setting their width and padding to 0.*/
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
width: 0 !important;
padding: 0 !important;
}
I've had a look through the plnkr and the reason pinning it to left doesn't work, is that the "pinned" property is affecting the className, not actually pinning it to the left, but rather giving it the className of ag-pinned-left-cols-container which is not helpful.
An easy fix is to change the right property to left instead in the css file as shown below. This is line 23-27 in the plnkr. Make sure you're changing the actual css property, and not the right inside the className
Edit:
After a lot of debugging I found the issue with the code.
The reason why it's not working with the pinned: left is because it's being rendered as the left-most column, and everything rendering after it will be above it in the stack. So in practice, when setting it's position to position: absolute !important it was still there, just behind the other columns. Changing it's z-index will resolve the issue. You could tweak the value of the z-index to a smaller one if you want.
After changing the z-index I was able to display both the left and right action buttons. You have to change the z-index in ag-pinned-left-cols-container
.ag-pinned-left-cols-container {
position: absolute !important;
left: 0;
z-index: 10000000;
pointer-events: none;
}
Related
I have 20 columns in the grid. I want the grid to be split in half, where in the left half I can scroll through the first 10 columns, and in the right half I can scroll through the last 10 columns. In other words, I want there to be two horizontal scrolls in the same Grid. Is it possible?
The functionality you're trying to implement doesn't natively exist in ag-Grid. One solution would be to use pinned columns where you pin 10 columns to the left. The problem would be that you cannot scroll pinned columns, therefore you'll have the add some extra css in order to modify the grid to your needs.
NB. this is VERY hacky solution:
Add the following to your css in order for the pinned columns to be scrollable (change the width from 200px do your desired width):
.ag-pinned-left-cols-container {
min-width: 200px !important;
width: 200px !important;
overflow: auto !important;
}
.ag-horizontal-left-spacer {
width: 200px !important;
max-width: 200px !important;
min-width: 200px !important;
}
.ag-pinned-left-header{
width: 200px !important;
max-width: 200px !important;
min-width: 200px !important;
overflow: hidden !important;
}
You'll also need to make sure the pinned column headers scroll along with the pinned columns. For this, you can use an event listener:
document.getElementsByClassName('ag-pinned-left-cols-container')[0].addEventListener("scroll", this.runOnScroll, {passive: true});
runOnScroll = function(evt) {
document.getElementsByClassName('ag-pinned-left-header')[0].scrollTo(evt.srcElement.scrollLeft, 0)
Demo.
For those interested in ViqMontana's solution:
In version 28.1.1 they added a new event-listener which resets any scroll inside the header (commit 12552505). It says this would fix bug "AG-7137", which I can't find out what it was.
It's possible to remove this listener after the grid is ready:
const api = this.gridOptions.api;
api?.ctrlsService.leftHeaderRowContainerCtrl.destroyFunctions[6]?.();
api?.ctrlsService.rightHeaderRowContainerCtrl.destroyFunctions[6]?.();
After this the header scrolls correctly.
When using TypeScript, you will need to cast api to any.
I'm using antd radios and checkboxes. I want to give custom colors to them. I found answer about checkbox but found no way to change radio button color.
Is there any way to do so?
You can achive it by overriding following css classes:
.ant-radio-checked .ant-radio-inner{
border-color: red !important ;
}
.ant-radio-checked .ant-radio-inner:after{
background-color: red;
}
.ant-radio:hover .ant-radio-inner {
border-color: red ;
}
First block is responsible for coloring the circle around the dot in radio. You can ignore !important rule but then you have to override :focus selector like:
.ant-radio-checked .ant-radio-inner:focus{
border-color: red;
}
Second block color the dot in the middle of selected radio. The last one color circle on hover. I am not completely sure why ant-radio-inner should be inside radio:hover, but it works for me.
Im trying to create an acordion with react and styled-components.
Im trying changing display: none to display:block and adding a transition, but it changes with no transition, it only works fine if i remove the display property on the styled-component but i can see part of the div if i remove that property.Sorry for my english and thanks
https://codesandbox.io/s/z2nj50z46p?fontsize=14
I think your problem was in this part of the css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
And this change produces this result.
This ensures that your darkgoldenrod tab is 100% of it's containers width. When it is active the dropdown is also 100%.
After further investigation I have found your problem. Some mark up issues, plus browser applies a default margin on certain html elements. In this case paragraph has a default margin being applied. background color is ignored when margin is used.
The below link should be what you want.
https://codesandbox.io/s/nkj7mx73jj
I have a tabbar in ExtJS with many tabs and I get scroll arrows on the left and right side on my tabbar.
When I changing scale of web-page to 90%, right scroll arrow moves down to grid
This bug appears in GoogleChrome, in FireFox is everything ok. What problem may be?
OK, we were able to solve this issue with some workaround css. It's ugly, but it gets the job done:
div.x-box-scroller-right {
position: absolute !important;
right: 0 !important;
left: inherit !important;
top: inherit !important;
}
What I have so far:
JSBIN
Try to double click an item, and It'll show a child item. I want to animate it like that. I set the width to 300px(static) just to show you how it works but, I want it to be width:auto (dynamic) but the animation is not working if I set it to auto.
How can I make it dynamic? for example the child div has more than 2 items inside it or no items at all.
It's a bit of a hack but you can use max-width instead of width and just set an upper bound for the resulting max-width.
http://jsbin.com/mibozupe/1/edit
.slides-child{
display: inline-block;
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
opacity:1;
max-width: 500px;
}
.slides-child.ng-hide{
opacity: 0;
max-width: 0;
}