Im having this issue in Extjs grid editing. When I tab from a dropdown editor to a textarea editor, the textarea editor jumps down the screen, away from the cell I should be editing:
I have no idea how to fix this. It only happens 1/2 of the time, so I believe there is some race condition, but Im not sure. Ive spent a lot of time debugging and stepping through the editing code and the textarea starts out in the grid cell, but some event fires or something and it then moves.
I found the problem, but I don't think there is a good solution to it. When I complete the edit by clicking tab, new value is put in the grid cell.
The grid row height might change, which will cause the grid viewport size to change (since i am not using a scroll bar.. the grid height grows and shrinks dynamically).
The grid is in an iframe, and i attached a listener to the grid resize event to change the iframe height to be the size of the grid height, this in turn caused floating elements (such as a cell editor) to be repositioned.
So my problem is that i want the iframe to grow with the grid, which grows and shrinks (by a few pixels) as cells get edited. But this causes the floating element to jump.
Related
https://drive.google.com/file/d/1IBjUVy5U_q-O5beMtb7gKVmSwcsDKfad/view?usp=sharingHere, When too many items are opened at once the sidebar misbehaves. I have added a horizontal scrollbar and scrollbar is working fine I guess. But the row content gets clipped after a specific row and even scrollbar does not move after that. I have a guess here that the item width here(which are present above horizontal scrollbar) needed to be made dynamic as it would grow according to the total width of sidebar and decrease after a limit has been reached in decreasing but still should be completely present and visible completely and scrollbar should move till the end and whole content gets visible.
Stack used:
Javascript
react
html
CSS/sass
Any good Suggestions or approach for this?
There is a third party's page with textboxes that break lines when texts are too long and automatically resize themselves vertically when that happens.
And I created a Chrome Extension that resizes existing textareas horizontally, making them smaller.
Normally, these textareas get resized automatically as one types, but when my code resizes them horizontally, their text might break line, and when that happens they don't resize vertically.
Nevertheless, if I start typing, they will resize normally.
How do I make them resize automatically after my own horizontal resize without having to change their text?
Javascript or Jquery answers are welcome :)
I have a table, inside a div with a fixed width.
The table is added dynamically via JavaScript and each row is added based on user input.
The table width and cell widths are all set and fine, and adding information works, but when I get too many rows, the table just continues building...
How to I make the div area scrollable so that as the table grows and the user can scroll in that div area to see the other fields in the table?
In other words, how do I put some buttons to scroll the table left and right on overflow of div width.
I want something similar to what is in Notepad++ and Firefox where you get left and right buttons to scroll through the opened tabs.
Please help me out to do this...
Just created a page with up and down button without showing any scroll.
Watch that Fiddle and let me know if it is helpful.
When I put my chart inside of Bootstrap's .table-responsive the chart doesn't fill the entire td. Here's a jsFiddle of the problem. As you might see I've set the width to 100%, and this worked in the grid.
There seems to be a strange bug aswell, when I open the chrome console with "Inspect element" the problem is solved (happens in the jsFiddle aswell).
How can I make the chart fill the entire <td> by default?
You'll have to set the width setting of chart after initialization. After initialization, Highcharts only adapts on a resize event (try it out, if you resize the window it will change width), so you might want to trigger an resize event.
Here is a jsFiddle (ab)using a resize event: http://jsfiddle.net/b9DMn/1/
Highcharts does automatically gets the width of its container when its creating its chart, but if you put a breakpoint there you'll see that the table cells are still divided equally at that point in time. In fact, it is the chart that triggers the table to grow the right cell. If you can fixate the cell width, that would probably help too.
Here is a jsFiddle fixating the width of the cells, so they don't grow and shrink when content gets added: http://jsfiddle.net/b9DMn/2/
I want to lock (put semitransparent grey div on top of grid) grid until the last "asyncPostRender" is working out.
I have "asyncPostRender" that creates a complex markup in a grid cell. Markup creates one by onether from top to bottom cells. I want to block any interactions with not rendered cells until all is rendered.
How to do it? Or how to restate the problem?
Don't hack around the intended use of this functionality.
The "async post renderers" in SlickGrid are a mechanism to add optional background decoration to cells so that the core performance and responsiveness of the grid/UI is not affected. Think of it as stuff that is "nice to have". Keep in mind that every time you scroll the rows are being removed from the DOM and recreated as the leave or enter the viewport. By doing what you are describing you would block the UI every time the user scrolls.