I'm trying to render my list of data using the WindowScroller and List from react-virtualized, but for some reason, only a portion of my data is rendering. I've read over the docs and I believe I have all the necessary props...help is appreciated!
Taking my List out of the WindowScroller renders everything correctly, but I'd like to keep the WindowScroller to give scrolling controls to the parent element.
There are 100 items in my data set, but only a portion of them are rendering.
Here is a sandbox with an example: https://codesandbox.io/s/jolly-gagarin-vczki1?file=/src/App.js
UPDATE #1:
I believe I've found the cause of my error! It seems that the height in the List element is the issue; it's not large enough thus cutting off my data. Because my List has no fixed height to begin with (height depends entirely on the number of children), I think I need a way to dynamically calculate the height of the List. I did find a method for List elements called measureAllRows, but I can't get it to work :( (see my sandbox above)
UPDATE #2:
I found a really hacky way to do it; by setting the List element's height prop to Infinity, I can get all of my items to render. This doesn't feel like a good way to solve the problem, but it does fix my issue with a dynamic list height.
UPDATE #3:
The answer below helped when just using AutoSizer, but I was curious... if I were to put my AutoSizer into a WindowScroller like so: https://codesandbox.io/s/ecstatic-sunset-g4k3ly?file=/src/App.js, how could I achieve a similar fix for displaying all of my data?
I can say that the problem lies in one of the parent div for WindowScroller component which is causing this behaviour.
The overflow property cannot be set to auto for WindowScroller to work. If you try executing only the windowScroller part without modal window it works as expected.
https://codesandbox.io/s/elastic-ritchie-k938m0?file=/src/App.js
I was also stuck with similar problem and this worked for me, in your code try removing the autoheight parameter and get the height from the autosizer.
Reference:
https://codesandbox.io/s/recursing-pine-2w2m8f?file=/src/App.js
Related
How do I change the size and position of buttons or other UI elements in a GUI created with the threepenny-gui package?
The documentation of Graphics.UI.Threepenny.Attributes lists some functions which are probably useful, such as coords :: WriteAttr Element String. However, I don't understand how to use them. Specifically, I don't understand what the String argument is supposed to be.
Thanks
I think my misunderstanding that I had was that my problem was not actually related to threepenny-gui but is instead a question about HTML. This link helped my find the answer I was looking for: https://www.geeksforgeeks.org/html-attributes/
Just in case anyone else is struggling with this as well, this line (mostly) solves it:
# set UI.style [("text-align", "center"),("color","red"),("font-size","30px")]
(The UI in UI.style comes from: import qualified Graphics.UI.Threepenny as UI)
Threepenny UI element combinators translate more or less directly to HTML, and so you should think in terms of HTML when doing layout with it:
The attributes from Graphics.UI.Threepenny.Attributes you mention are HTML attributes. Modifying them while defining your initial layout is typically done with set. (By the way, if you need a reference for looking up what things like HTML attributes do, you can't do wrong with MDN.)
For CSS styling, you can use the (#.) combinator.
As for layout, the basic tools are (#+) to nest HTML elements, and grid, row and column to arrange div-based grids.
Does anyone know how to use the TYPO3 focus area in the frontend?
TCA imageManipulation
If I use the crop attribute in the fluid-template
<f:image width="555c" height="312c" src="{article.teaserFile.uid}" treatIdAsReference="1" crop="{article.teaserFile.originalResource.referenceProperties.crop}" />
i get a serialized string in data-focus-area.
<img data-focus-area="{"x":786.1145320197,"y":96.682142857143,"width":271.44177339901,"height":270.05062857143}" src="/fileadmin/_processed_/9/b/csm_testimage_0bfc7bc724.jpg" width="657" height="566" alt="" title="Testimage">
Does the data need to be used by a JS library? Can someone recommend a library here? Because i didn't find a recommendation for a library which can handle focus Area and the attribute data-focus-area.
Or do i have to write a viewhelper giving the attributes e.g. for "jQuery focuspoint" to data-focus-x, data-focus-y, data-image-w, and data-image-h.
No, you don't need to rewrite the ViewHelpers. (It would be nice, if in the future it could be a bit better extendable then now however.)
But you can implement the jQuery Focuspoint. The only thing you need to do, BEFORE you starts the focuspoint plugin, you can transform this array into the needed values with jquery.
An exmaple from the FocusPoint documentation
$('.focuspoint').focusPoint();
So before this line, you can just simply add the values from the array as an own data attribute.
The form is different, but the logic is the same. So you have the x, y, width and height values in the focus-area array.
This would not work with responsify.js for example. It needs bottom, top, left, right values.
So yes... it won't work out of the box.
But NO, you don't need to change the PHP part, because you can solve it on the front end. (You need jQuery plugin anyway, so making some code before using it is easier.)
Changing those ViewHelpers is also a possibility of course, but you really need to rewrite their functionality (also the renderImage function to be concrete) and if you want to update it to a later version it could lead to problems.
I am trying to implement vivagraph. However it always shows the entire graph at the somewhere below right corner. From firebug it looks like the g tag is getting a lot of matrix transformation.
The problem is that I have dynamically increasing/decreasing nodes per view of the page, so I cant override it with 1 single translate. So is there a way to have it done?
Answered here: https://github.com/anvaka/VivaGraphJS/issues/131
The issue was caused by missing CSS selector
Afternoon All,
I'm trying to draw a dynamic "ruler" which can be zoomed (along with the rest of the page) and is annotated, using Raphael.
I've found Raphael's pathBBox() and isBBoxIntersect very useful for determining if a graduation should be printed at a certain point or if it would be too close to another and should thus be skipped.
Now I need to annotate some of the graduations and want to follow a similar method - annotate the largest graduations, working down to the smallest level of detail but skipping drawing the text if it would intersect with some already drawn.
Unfortunately my look through the Raphael docs have only shown me the Paper.print() and Paper.text() methods, both of which add to the paper. This means I would have to add, then find the bbox and test, then remove if bad - which is potentially rather slow.
Is there a way to find the dimensions of some text I want to print without printing it, such that I can manually create a bbox object and test it against my stored bboxes?
As always, thanks very much in advance! :-)
Cheers,
-Oli
You can use .getBBox() on text:
var text = paper.text(...);
if (text.getBBox().width > max) ...;
I didn't see this documented officially, but it works, and apparently cross-browser.
I'm learning how to use Draggable Views for Drupal 6 for the first time, following this tutorial: http://thedesignspace.net/MT2archives/000666.html . I'm encountering a problem though: in part 4, once I set up the draggable table ( http://thedesignspace.net/MT2archives/000708.html ) the entire preview disappears, showing no table. Switching the style to another type, such as table, brings everything back. Directly viewing the page from its path makes no difference. Any ideas of what the problem could be?
Not all of my modules were up to date when I encountered this problem. My mistake. Always update all modules first upon being stumped by incompatibility errors, even if the modules in question do not seem to have anything to do with the error.