Using the render prop registerChild as ref in CellMeasurer seems to be ignored by react-virtualized: warning findDOMNode is deprecated still received.
That comment:
https://github.com/bvaughn/react-virtualized/issues/1353#issuecomment-569814307
makes me think that the fix is 4 month old, and latest version of react-virtualized is published 6 month ago
It is already mentioned in the doc though
https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md#using-registerchild, but erroneously:
{({registerChild}) => (
<div
style={{
...style,
height: 35,
whiteSpace: 'nowrap'
}}
>
{content}
</div>
)}
the div seems to be missing the ref={registerChild} !
Anyway, with or without ref={registerChild} on the div,
warning findDOMNode is deprecated still received
The point of registerChild is to give the cellMeasurer a ref to the child component removing the need to call findDomNode. Currently the registerChild variable isn't being used, you need to add set the ref of the child component to registerChild.
{({registerChild}) => (
<div
ref={registerChild}
style={{
...style,
height: 35,
whiteSpace: 'nowrap'
}}
>
{content}
</div>
)}
Related
I'm trying to pass props to a child component's styled components so that I can dynamically set CSS styling. The below is what I tried, but it always goes false which is 50%. Seems like the props do not get passed down.
components/Col.js
const Col = styled.div`
flex: ${props => (props.size < 6 ? "0 0 100%" : "0 0 50%")};
max-width: ${props => (props.size < 6 ? "100%" : "50%")};
`;
export default ({ children }) => <Col>{children}</Col>;
pages/index.js
export default () => (
<App>
<Header />
<Row>
<Col size={3}>
<Card />
</Col>
</Row>
</App>
);
I put your code in a codesandbox and it functions as expected, there are 2 <Col />s, one which has a size of less than 6 and one greater, and the correct CSS rules are being applied based on props.
https://codesandbox.io/s/epicpoincaresd6ig-sd6ig
Are you sure it's not something in the <Card />'s CSS? Maybe you can post a sandbox link demonstrating your issue.
I was trying to use the combination of the WindowScroller + AutoSizer + List on my web application. The virtualization works well when it is only AutoSizer + List. However, when I put it inside the WindowScroller, the list of rows no longer display properly.
This is how it looks when WindowScroller is applied.
list result
I already searched for available solutions here and on the doc. Found similar problem posted here but the answer provided was already been applied on my code. Now, I can't figure out what exactly hinders the display of the rows.
return (
<React.Fragment>
<WindowScroller>
{({height, isScrolling, onChildScroll, scrollTop}) => (
<AutoSizer disableHeight>
{({width}) => (
<List
autoHeight
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={rows.length}
rowHeight={30}
rowRenderer={({ index, style }) => <div style={style}>Row {index}</div>}
scrollTop={scrollTop}
width={width}
>
</List>
)}
</AutoSizer>
)}
</WindowScroller>
</React.Fragment>
);
It appears this is an implementation issue. The overflow style of the container element which I was using for the reference of the WindowScroller is not set properly.
You were right that I was not passing the props in correctly. Now I have it set up as such:
Container.jsx
<div className='container' ref={(ref) => {this.foo = ref;}}>
this.renderContainer()
</div>
<Section scrollContainer={this.foo}/>
Section.jsx (just passing down props)
<Panel scrollContainer={this.props.scrollContainer}/>
Section.propTypes = { scrollContainer: PropTypes.object.isRequired }
Panel.jsx (Passing down props)
<RenderedTable scrollContainer={this.props.scrollContainer} />
RenderedTable.jsx
return (
<div className='padding-top-20 font-smoothing'>
<WindowScroller scrollElement={this.props.scrollContainer}>
{({ height, isScrolling, scrollTop, onChildScroll }) => (
<AutoSizer disableHeight>
{({ width }) => (
<Table
Unfortunately the windowScroller still does not resize. I also dont get any warnings or errors. Do you use css tricks to get the scroller to resize? I see that in the example https://bvaughn.github.io/react-virtualized/#/components/WindowScroller
you change the flex and overflow properties when changing the scrollElement from window to scrollingBody.
I know you are very busy and greatly appreciate your help!
In your example, you've assigned the scroll ref to this.tabsContainer but you're trying to access it as this.props.tabContainer. Either this is your mistake, or the example is incomplete and more context is needed. :) Can you provide a Plnkr?
When I go to the page /bla in my NodeJS app, the console prints out
GET /bla - - ms - -
In words (for easier Google searches), dash dash ms dash dash.
What does this mean?
This is the output from morgan, a HTTP request logger middleware for node.js.
It logs all requests, by default, to the console. Depending on your configurations it will display different data from the request.
If you are using the default format (dev), the data displayed is:
:method :url :status :response-time ms - :res[content-length]
According to this thread:
The log line GET / - - ms - - is the dev format saying you never sent a response before Node.js killed the TCP connection for idling too long.
So the problem is a request that wasn't responded by the server - in other words, some middleware along the route never called next(), res.send(), res.end() or any other means to respond.
I realized that this can also occur if the server doesn't handle the client aborting the request (can be easily tested by e.g making the request through a browser and clicking on the X button in the address bar before it's done).
According to the docs, the way to handle that would probably be something like (wasn't tested):
req.on('abort', function (err) {
if (err)
console.error(error.message);
// your code here
});
Maybe its a front issue, try postman see if you have the same issue
I had the same issue , but I observed that if I use my POSTMAN, the issue never pops up, but my react app at times returns correct request but most other times there was no response and POST /story/create - - ms - - was the express log. When I looked at the code, the form submission was very weird in the front rend
<Form onSubmit={() => formTest()}>
<div
style={{ display: "flex", justifyContent: "center" }}
key={`inline-switch`}
className="mb-3"
>
{checkboxes.map((name, index) => (
<div key={index.toString()} className="mb-3">
<Form.Check
onChange={() => handleOnChange(index)}
label={name}
name="group1"
type="switch"
id={`inline-switch-${index}`}
/>
</div>
))}
</div>
<div style={{ display: "grid", placeItems: "center" }}>
<BootstrapButton
style={{ backgroundColor: "Blue", width: "48%" }}
type="submit"
>
Submit
</BootstrapButton>
and when I cleaned it up
<Form >
<div
style={{ display: "flex", justifyContent: "center" }}
key={`inline-switch`}
className="mb-3"
>
{checkboxes.map((name, index) => (
<div key={index.toString()} className="mb-3">
<Form.Check
onChange={() => handleOnChange(index)}
label={name}
name="group1"
type="switch"
id={`inline-switch-${index}`}
/>
</div>
))}
</div>
<div style={{ display: "grid", placeItems: "center" }}>
<BootstrapButton
style={{ backgroundColor: "Blue", width: "48%" }}
onClick= {() => formTest()}
>
Submit
</BootstrapButton>
The error no longer popped up. I don't know the reason nor I guarantee that this the real issue, but I suggest try to recreate by using CURL or postman or even other code like other react component's fetches. Maybe you can fix the issue
I have created a DisplayWithIdFor using the following code and it works showing the information I wish it to.
public static class DisplayWithIDHelper
{
public static MvcHtmlString DisplayWithIdForApplication<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, string wrapperTag = "div")
{
var id = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));
return MvcHtmlString.Create(string.Format("<{0} style=\"color: #003F51; margin-left: 87px;\" class=\"{1}\">{2}</{0}>", wrapperTag, id, helper.DisplayFor(expression)));
}
}
My problem is simple, when I use the custom helper I end up with the label saying Application and the displayfor holding the name of the application showing with no space between them. see below.
Lastly here is the code for the image above:
<form>
<fieldset>
<p>
#Html.LabelFor(model => model.changeStatus.usersName)
#Html.DisplayFor(model => model.changeStatus.usersName)
#Html.HiddenFor(model => model.changeStatus.usersName)
#Html.ValidationMessageFor(model => model.changeStatus.usersName)
</p>
<p style="display: inline; float: left">
#Html.LabelFor(model => model.changeStatus.application)
#Html.DisplayWithIdForApplication(model => model.changeStatus.application)
#Html.HiddenFor(model => model.changeStatus.application)
#Html.ValidationMessageFor(model => model.changeStatus.application)
</p>
<p>
#Html.LabelFor(model => model.changeStatus.reasons)
#Html.TextAreaFor(model => model.changeStatus.reasons, new { #cols = "80", #rows = "4", #class = "k-textbox" })
<span style="color: red;"> #Html.ValidationMessageFor(model => model.changeStatus.reasons)</span>
</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
Can anyone explain how to add the spacing between the two Html Helpers?
any additional code can be supplied like the Jquery popup code.
Thank you.
Edit:
Just to make things a little clearer I have to get the application name from the row of a kendo grid that is selected and set the name in the jquery using the following code:
$("div[class='changeStatus_application']").html(applicationName);
To simplify and ensure everything is acting the same, remove the:
style="display: inline; float: left"
from the second paragraph tag and use an element like a span instead of a div (block level element) in your helper.
You may then want to alter the margin left on your DisplayWithIDHelper.
Also try using classes instead of style attributes. You can then change the look of your site through your style sheet without having to recompile plus styles are centralised; easier to maintain.