Ag-Grid-React Extending line formatting beyond fields - javascript

So I'm making a web app using react and part of the app is an ag-Grid table. The table is working fine but the problem I'm having is that when the fields end horizontally, the table is a complete blank of white. I want it to continue its line breaks a and formatting past all the fields.
I haven't actually tried anything because it's my first time using react and documentation online is pretty poor for ag-Grid styling and formatting specifics.
Table Image
...This image shows the red (How I want it all styled) and the green (How the dead space is currently styled).

Related

Acrobat Forms - Connecting Fields

Goal: JavaScript code to link fields to auto fill once top field is full. Lines will range from 2 to 5 (have multiple areas with different total number of lines in each.)
Want to be able to have lines visible. Acrobat's current option for multiple lines auto sizes text and line spacing to fit, so visible lines don't work. User currently has to recognize that field is filling (type is auto sizing to fit) then physically move cursor down to next line.
Example (link below): Comments: Would like this area to auto fill across top line then automatically jump to next line to continue comments.
I work with Acrobat a lot but have very little knowledge of writing JavaScript code. Any help will be greatly appreciated.
You have a few options:
Do not care about the writing lines, and use the font size/line
spacing provided by the multiline field.
Use the richText feature of the field.
Work with individual connected fields on the writing lines.
To 3: (I go backwards with these comments): Looking like the simplest solution. However, the crucial property is only available in the Keystroke event, which means it does not work when you fill the fields via script or prefill.
To 2: You can preset the properties of the field for manual filling. For filling via script, you would have to create a richText Object. This is not thaaat difficult, but can be a bit complicated.
To 1: This is the easiest way, and, because filling out on screen or via script does not need writing lines; so, you can make the background of the multiline field white and cover the writing lines.
If ever possible, I would go for option 1.

Calendar and headers go blank when selecting time range

Fullcalendar v4 - when I select a time range in timeGridWeek, the calendar changes appearance. The grid is visible, but the time bar and header disappear, leaving the only feedback as the small time display within the shaded selection range. Everything returns after I release the mouse/touch. Using jQuery 3.5.1 for some Bootstrap v4 elements.
Has anybody encountered this before?
Well, who have believed it? User error! In my css overrides I had given class 'fc-unselectable' a colo(u)r of '#fff' and this was causing not only the headers and time bar, but also any text not within a calendar event to 'disappear'. Naturally I would have tested the effects of this override at the time, so assume that some other change since then had brought about the unwanted behaviour. Now I am wracking my brain to find out why I felt that the white font was necessary in the first place. Must add more detailed comments to my code in future...

Accessibility & Google Charts table hover behavior

I've posted a couple of Google Charts accessibility questions already; here's one more. Thank you in advance for your help.
Google Charts tables are surprisingly easy to make accessible to blind users, but I'm running into a perplexing problem. I'm making a website that uses standard Google category filters to produce a data table. I've added ARIA-live=polite and ARIA-atomic=true attributes to the table to signal screen readers to read out the entire table when it changes. This works perfectly most of the time; when a control is changed, after reading out the control behavior the screen readers will immediately start reading the new table.
Unfortunately, changes in class attributes trigger ARIA-live. For Google Charts tables also tagged with ARIA-atomic, this means that row hover behavior will trigger a reading of the entire table, because hovering over a row changes the row class. And if you move the mouse pointer over more than one row, it'll read out the entire table once for every row over which you pass.
EDIT: see NOTE below to clarify this paragraph. I've tried addressing this by tweaking the table's cssClassNames options, but the results are frankly maddening. Even when changing the tableRow and hoverTableRow options to the same class, the table will only apply that class when hovering, changing the class to " " when not hovering.
I've tried convincing my co-workers that users of screen readers won't be using mice, but I've been asked to find a solution anyway. Guh.
Does anyone understand how this row hover behavior works, exactly? Is the problem as inscrutable as I'm making it out to be, or am I missing something? Does anyone have any ideas for a workaround?
NOTE: Ryan B has a good workaround idea (see comment below), and that's exactly the kind of solution I'll propose if my co-workers insist that the current setup doesn't meet their standards. Thank you Ryan.
Still, in the hope that the problem is with my explanation, I'll clarify: when you hover over a row in a Google charts table, the background color changes. The Google Viz script manages this by listening for hover events over table rows. On hover, the script changes the row class name from something like "tr-goo-viz-table-row" to "tr-goo-viz-table-row-over", both of which are in the Google Viz CSS and only include styles of background colors (white and light grey, respectively).
In the HTML table call one can set the cssClassName option for hoverTableRow to "tr-goo-viz-table-row" (or set both tableRow and hoverTableRow to any class that only sets the background color) and visually, the hover behavior stops. But in an odd quirk, the script insists on differentiating the class names on hover even if you're telling it to keep the class names the same. Depending on the implementation the script will produce a doubled class name ("tr-goo-viz-table-row tr-goo-viz-table-row") for hover rows, or an empty class name ("") for non-hover rows, and either way that'll still trigger ARIA-live even though no style change is implemented and hovering has no visual effect.
Since I don't understand the implementation of this behavior, I'm hoping someone who understands it better than I do might know of a way to stop the hover-triggered class name changes altogether - killing the listener, etc. Something like adding "pointer-events:none" in the row CSS for example...except pointer-events wasn't supported in IE before IE11 and the people using this website will mostly be using IE9.

Rally App Disappears - Why?

I currently have an app that has five components. On the left I have a radio button field and a grid below it, on the right I have a display field, chart, and another grid [top to bottom]. The radio buttons filter every other component by a certain date, and the left grid [when selected] will filter the right components by the selected object.
Currently the app does what is needed, but when I select a few radio buttons in a row OR select a few objects in the grid, the app will eventually totally disappear. I tried running the app externally and internally with a custom HTML app, but the problem does not go away.
Here is a picture of the app before anything crashes:
Interestingly, when I look through the chrome debugger and look at the Elements tab, I see there are lots of masks that have been created and not destroyed. Here is a picture of a slight piece of the HTML that looks fishy and occurs after I select a few objects from the left grid:
Every time I select a new object, one more mask will be added to the DOM. I don't know if this is what breaks my app, but it seems odd so it may be related?
I didn't include any code because I thought it should be some easy fix - plus, the code does exactly what it should [before it disappears]. Any help on how to fix an app that disappears would be great!
In itself a mask sticking around to be reused after data loaded successfully is not an indication of a problem. I see mask being created and not destroyed in a simpler app:
Perhaps what you experience is an issue of timing when elements load asynchronously.

Automatic multi-page multi-column flowing text with QtWebkit (HTML/CSS/JS -> PDF)

I have some HTML documents that are converted to PDF, using software that renders using QtWebkit (not sure which version).
Currently, the documents have specific tags to split into columns and pages - so whenever the wording changes, it is a manual time-consuming process to move these tags so that the columns and pages fit.
Can anyone provide a way to have text auto-wrapped into the next column/page (as appropriate) when it reaches the bottom of the current container?
Any HTML, CSS or JS supported by QtWebkit is ok (assuming it works in the PDF converter).
(I have tested the webkit-column-* in CSS3 and it appears QtWebkit does not support this.)
To make things more exciting, it also needs to:
- put a header at the top of each page, with page X of Y numbering;
- if an odd number of pages, add a blank page at the end (with no header);
- have the ability to say "don't break inside this block" or "don't break after this header"
I have put some quick example initial markup and target markup to help explain what I'm trying to do.
(The actual documents are far more complicated than that, but I need a simple proof-of-concept before I attack the real ones.)
Any suggestions?
Update:
I've got a partially working solution using Aaron's "filling up" suggestion - I'll post more details in a bit.
Create a document with a single page and all the text in a single column. Use JavaScript to cut the text into parts.
Use pixel coordinates to locate the paragraph/element that doesn't fit anymore. Move it and everything below to the next col. If a "page" already has two "col" divs, start a new page.
After all pages have been created, count and number the pages. Fix even/odd stuff, etc.
Will take some time but it's automatic.
Another approach would be to add all the content to a "source" div and move items to the col div until it's full and repeat with the next col.
Have a look at Prototype or jQuery; they should give you lots of tools to move stuff around in the document.
[EDIT] Instead of only relying on jQuery functions, I suggest to create one or two objects which keep track of the current page and the current column, etc. These give you stable foundations to stand on from which you can fire the helper methods.

Categories

Resources