add a prop for setting the style property.

[alexklibisz]

From what I was able to tell, you can set a definite height, but only via the className property.

I have a scenario where the container that the chat box lives will change size dynamically (due to input area growing/shrinking below it and search area shrinking/growing above it). I am detecting the container size changes using the detect-element-resize library (https://github.com/sdecima/javascript-detect-element-resize), so it would be simplest to have a style prop that can be passed separate from the classname prop.

for example:

<ChatView style={{height: this.state.containerHeight}} ....> {items} </ChatView>

Or is there maybe already a way to do this without making any changes?

[dustingetz]

I will add the style prop if you want it. But you can use any browser
layout technique that doesn't require the hard coded height for example
http://stackoverflow.com/questions/17141961/css-layout-with-fixed-top-and-bottom-variable-height-middle.
You shouldn't need to detect element resizes it should just work.

Does this answer your question?

On Friday, January 8, 2016, Alex Klibisz [email protected] wrote:

From what I was able to tell, you can set a definite height, but only via
the className property.

I have a scenario where the container that the chat box lives will change
size dynamically (due to input area growing/shrinking below it and search
area shrinking/growing above it). I am detecting the container size changes
using the detect-element-resize library (
https://github.com/sdecima/javascript-detect-element-resize), so it would
be simplest to have a style prop that can be passed separate from the
classname prop.

for example:

<ChatView style={{height: this.state.containerHeight}} ....> {items}

Or is there maybe already a way to do this without making any changes?

—
Reply to this email directly or view it on GitHub
#6.

[alexklibisz]

@dustingetz Yes I tried to do position: absolute with 0's for top, bottom, left, right. The scroll bar appears to move up correctly and smoothly, but the bottom element of the list still gets covered up, as if you had scrolled up slightly.

Any thoughts on why that might be?

[dustingetz]

Can I see a fiddle? If react-chatview is causing this, it is a bug. Any layout where you can make a regular old div do what you want, you should be able to replace that div with react-chatview and have exactly the same layout. react-chatview has no css dependencies and the only inline styles it sets are related to scrolling.

[alexklibisz]

Do you have a recommendation for how to pull react and your lib into a fiddle? Maybe a little boilerplate? I tried to recreate it with your example repo, but I'm not familiar at all with the react cursor stuff and ended up breaking it in different ways.

[dustingetz]

Oh, sure, sorry. I'll get that sorted tomorrow afternoon.

On Saturday, January 9, 2016, Alex Klibisz [email protected] wrote:

Do you have a recommendation for how to pull react and your lib into a
fiddle? Maybe a little boilerplate? I tried to recreate it with your
example repo, but I'm not familiar at all with the react cursor stuff and
ended up breaking it in different ways.

—
Reply to this email directly or view it on GitHub
#6 (comment)
.

[dustingetz]

Here is a fiddle. https://jsfiddle.net/dustingetz/xvqzw747/

[dustingetz]

@alexklibisz any updates? can I close this?

[alexklibisz]

@dustingetz I'm going to try my best to get to it today. Still using your lib and this has been the only little issue. I just have a stack of other things on deck in this project at the moment.

[alexklibisz]

@dustingetz So I was able to work around the issue that required setting the height/width via style properties.

However the scrolling issue remains and is demonstrated here: https://jsfiddle.net/aklibisz/hnvfuv8a/

Try to add some more lines within the input div at the bottom. You'll see how it grows upwards but covers up the last few messages.

Thanks!

[dustingetz]

Thank you for the fiddle! I understand what you mean now. Yes, this is a bug. You can also trigger it if a message's content resizes (e.g. is edited or an image loads) below the fold. It needs to be fixed, but I haven't put time into fixing it yet. I will probably invest more time in March. Is your workaround sufficient or do you need a fix sooner?

[dustingetz]

And do I need to expose this.props.style - are you using a modified react-chatview?

[alexklibisz]

The work around is good enough for now.

Could you give me the gist of what is going on? Maybe I could give it a try to fix it?

I don't need the props.style exposed for my purposes at the moment. However, maybe you could consider adding {...this.props} to the component so that any arbitrary props can get passed along? I'm not sure if this is possibly a bad practice, but can be convenient/flexible in my experience.

[dustingetz]

It's going to be a hard problem to solve, everything about an infinite scroll component is a shitty problem. The source is only 140 lines though so you're welcome to take a look.

[yloeza]

I have a case where I would like to be able to set style prop overflowY value to auto so the scrollbar only shows up when is needed ... I was able to work around it by setting a css override with an !important rule, but feels so hacky to me.