The scroll of the list is going crazy when I scroll and it keeps jittering afterwards even if I don't do anything) as you can see here: https://imgur.com/SdgMf7f (sorry embedding that gif doesn't work here)
I made a minimal example where it happens in:
https://codesandbox.io/s/4r2q3omv1w
I did pass the style to the rows.
Also, if you change the height and width of the list to get the values from Autosizer, then the list doesn't appear, even though this looks exactly like in the example.
Any ideas how to fix these two problems?
EDIT: it seems that it works a little better in Firefox, still a little jumpy in my own code though and the codesandbox's scroll still isn't perfect. (it's super jumpy in chrome, even in incognito).
It seems the problem was related to 2 issues:
Not delegating height and width from <AutoSizer> to the <List>
Row height was defined as 50 but the actual rendered height was more -
From the docs: Note that it is very important that rows do not have vertical overflow. It would make scrolling the list difficult (as individual items will intercept the scroll events)
Here's a working example: https://codesandbox.io/s/jppm1mmo83
Related
If I set my table to use the layout "fitDataTable" I get the following
This is what I expect and find.
However, if I set the layout to "fitDataStretch" keeping everything else the same I get the following
Its good that it now fits the width how I want, however notice the big gap at the bottom and the way it's not showing all the rows.
Stranger still if I try setting the table height I get the following (redraw() seems to do nothing)
Notice still it still doesnt show all the data but also the header seems to have stretched
Since the containing element is exactly the same, all I am changing is the layout when creating the table, im struggling to find out why the layout looks broken, I can only assume that when Tabulator creates the table it doesnt like something on the containing element, but if you have any pointers between the differences in how the two layouts work I would apriciate it.
Certain layouts in Tabulator don't seem to play nice if the containing element has CSS display: grid -it was possible for me to change to display: block and everything worked as expected. Also, see the comment from #oli Folkerd
Has anybody ever had any issues with transitioning the opacity of an SVG text element? I'm using both the fill-opacity style and the stroke-opacity style to fade the text elements into and out of existence. It works fine on most browsers, but doesn't transition at all in Chrome on Mac -- the text just pops in and out all at once.
I tried setting the "opacity" attribute in addition to fill-opacity and stroke-opacity and that does seem to make it work, although now I see a weird flicker effect just before and after the transition runs. It's like it's setting it to opacity=1 for a split second before it sets it to 0 and then transitions to 1.
Another interesting thing is that other shapes (circle, rect) fade in and out just fine with nearly identical code to what I'm using with text.
This does seem to be weirdness with a specific browser, but I'm wondering about other people's experiences with opacity on text elements. Are there tricks to get it to behave consistently?
What version of Chrome are you using? I noticed a bug in Chrome dev some time ago when working on the word cloud but it appears to have been fixed as of 19.0.1077.3 dev. Perhaps the fix hasn't made it into your particular version yet?
In my case, using opacity fixed the problem temporarily. The flicker effect could be due to exponent notation not being parsed for very small numbers; you can try using 1e-6 instead of 0 to get around this.
For an animation I made some months ago I toggled the style and used webkit-transition, in combination with visibility: hidden. This seems to work well. If that doesn't work, you could try transitioning to an opacity near zero.
this is my first question on stackoverflow after doing a lot of research without the appropriate success :-(.
I'm struggling with the task to do a three-column-layout with various amount of content and thereby differing height for each columns content. But the columns should be of same height, so that their background-color reaches down to the bottom. So, I found examples like this
How to make rounded corners on equal height columns
and of course this one
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
But they don't do the trick, as they use overflow:hidden and do a fake height pretty much longer than the page would ever be. So of course, the background-color of each column goes down to the bottom and further. That's fine, but not enough, as I do have to shape the content element's background with rounded corners. It should look like the image on following adress:
http://www.addorange.de/uploads/3columns_rounded_corners.jpg (sorry, I'm not allowed to post images yet :-()
Maybe anybody of you encountered a similar challenge to fix this by pure css.
Thank you,
Christian
Two solutions:
You can use display: table-cell for your three columns
Resize them with javascript
I'm trying to make a page with two overlapping div's, one aligned to the left with the float:left attribute, and the other next to it, but overlapping by means of a negative margin.
Despite all this, I just get text as my output when I preview in browser from Dreamweaver. Problem is, it looks exactly how I want it in DW's preview pane.
Here is the jsFiddle, and how it looks in Dreamweaver.
Try swapping positions of the #img div, and the #titlebar div; AND make sure both are set to 'float:left'.
(#img div first, then #titlebar div in the HTML)
I'm using LaTeX and I would like to have vertical rule along left side of page, topmargin to bottommargin, 0.5in from the left edge of the page. I want this on every page, so I assume that means it must somehow be tied to the header or the footer?
I've made no progress at all, so I need help with (1) making the full-length rule itself and (2) making it happen automatically on every page of the document.
Can someone tell me how to do that?
I got a working answer to my question on the Latex Community forum: http://www.latex-community.org/forum/viewtopic.php?f=5&t=9072&p=34877#p34877
The answer I got uses the 'Background' package and this code:
\documentclass{article}
\usepackage{background}
\usepackage{lipsum}% just to generate filler text for the example
\SetBgScale{1}
\SetBgAngle{0}
\SetBgColor{black}
\SetBgContents{\rule{.4pt}{\paperheight}}
\SetBgHshift{-9cm}
\begin{document}
\lipsum[1-90]
\end{document}
Works great and was easy to adjust to put one vrule in left margin area and one in the right margin area.
There could be a LaTeX package to do this for you, but I'm more of a TeX person, so I tried to come up with a TeX solution (not always the best idea to mix plain TeX with LaTeX but I think I have it working).
Try this. Box 255 is the box register that TeX places the page contents into before the page is output. What I've done is taken the existing output routine, and changed it to insert into box 255: a 0-height, 0-width infinitely shrinkable-but-overflowing set of boxes containing a rule that is the height of the page, 0.4pt thick and with any luck, half an inch away into the left. The existing contents of box 255 is then added after this rule. Then I call the previous output routine which outputs the page (which now includes a rule), and also the headers and footers.
\newtoks\oldoutput
\oldoutput=\expandafter{\the\output}%
\output{%
\setbox255\vbox to 0pt{%
\hbox to 0pt{%
\vsize\ht255%
\vbox to \ht255{%
\vss
\hbox to -0.5in{%
\hss
\vrule height \ht255 width 0.4pt%
}%
}\hss
}\vss
\box255%
}%
\the\oldoutput
}%
Put it before your \begin{document} command. This might not solve your problem completely, but hopefully it should get you started. Here's a great page for learning about TeX primitives and built-in things.
Have a look at the eso-pic package. From memory, what you want would look like this:
\AddToShipoutPicture{%
\setlength\unitlength{1in}%
\AtPageUpperLeft{%
\put(0.5,\topmargin){\vrule width .5pt height \textheight}%
}%
}
It's not clear in your question if you want the line to span the text area or the whole paper height. Depending on the case, you have to replace \topmargin and \textheight by the correct values, either 0pt or whatever your top margin is, or by \paperheight. See the geometry package if you don't already use it for how to control those dimensions.