I have an ng-grid set up as a matrix with a text column and about 36 number columns. I'm trying to create a hover popup type menu that will allow the user to add a comment to a specific cell value. I've added a hidden div to the cell template for each cell which I can display on hover.
The issue I'm having is with the overflow of the hover menu. The "Edit..." text is clipped off by the edges of the cell so I only see "Ed".
I've tried adding 'overflow: visible' to the cell but this hasn't worked. Do I need to do this with javascript instead?
Yes I had to use JavaScript instead.
Related
I am trying to implement custom tool tip in ag-grid, but the tooltip is partially visible.
For reference, i have source code present in Plunker. There are two ag-arid instances as an example. If you mouse over on first ag-grid on first column of last row, tooltip is partially visible.
is there a way to show full content of tooltip.
link to the code: 'http://plnkr.co/edit/QBfY00iJ8sxkZqym'
Updated Pic
You need to set a height on the :host selector in your custom tooltip component. E.g. set it to 300px, then the tooltip should display above your mouse pointer when on the last row, allowing it be completely visible.
Demo.
I'm trying to figure out which piece of CSS is making the text shrink by a very tiny but noticeable amount in the cells when you select one of them
Here's a code sandbox. Just click on one of the cells to focus it and you'll see what I mean:-
https://codesandbox.io/s/material-ui-table-virtualized-t2xkt
NOTE: when you select a cell, it replaces the plain div with a customised Material UI TextField
Which CSS property do I need to adjust to ensure that the text size and position stays uniform when the cell is focused or not focused?
You were right it was the padding. Solved it by remove a pixel from the padding-top in the div within the table cell when not focused
I have a page that has a grid of 4 columns each column contains a blurb and a below the blurb it contains a toggle. The blurb text content is not the same. My issues is once I have aligned the toggle buttons of each the column. The toggle buttons do not align. How can I set the blurb and Toggles to line up without plenty of spacing ? I have used align-items:flex-end any other methods I could try align.
Share link will be more helpful to understand the problem. Question is still not clear to me. If its happening on Divi Latest version then check if there having div before the button tag by inspecting the button. If you are confused just take row or column and then put button inside that. It should work.
As usual button contain a or button tag which is not block level element but text level so its taking display as inline or flex instead of block and getting element only spacing. So you ned to put text level element inside block level wrap like first div then button tag to make it alignment. Hope it will help you.
Thanks
I understand from your question that the blurb in each column is a different length, so the toggles do not line up horizontally? To line them up in Divi, first you'll need to make sure the columns are equal heights, and add a class to the row:
In the row settings, go to the Design tab, and enable Equalize Column Height.
Also in the row settings, go to the Advanced tab, and add a Custom CSS Class custom_fixed_toggles.
Now add the CSS to Appearance > Divi Theme Options > Custom CSS (which is located at the bottom of the first tab in Theme Options). Something like:
.custom_fixed_toggles .et_pb_toggle {
position: absolute;
bottom: 0;
}
Hi Have a grid implemented third-party library AG-Grid. This grid has editable feature to edit rows.
And while editing I am rendering Bootstrap dropdown to update value of Year column as shown in below example:
Editable Grid - Dropdown Issue
When I click on the dropdown its li elements are not displaying properly as it is hidden behind the grid.
Is there any solution for this ?
This is a bit old, but for anyone else looking:
If you set the isPopup() function on your cell editor to return true you shouldn't have to fight with the CSS of the component. Allows the dropdown to render over the other cells without any CSS edits.
If you want your editor to appear in a popup (such as a dropdown
list), then you can have it appear in a popup. The popup will appear
over the cell, however it will not change the contents of the cell.
Behind the popup the cell will remain intact until after editing is
finished which will result in the cell being refreshed.
My splitButton should not have any text on the button. So when I try to achieve this using by providing blank value for the value attribute, the button shrinks to a very small size. I want it to remain the size of the dropdown button which appears beside it. I don't have an actionListener, therefore I need the button to display no text.
Is there no default size set to the button when it contains no text? Or is it possible to apply a style property to it?
Put the value attribute like this:
value=" "