score:0
another way to solve this is create a constant that takes the height size of the dom and set the constant to the height of options.
const myheight = math.round(parseint(window.innerheight) * 0.7) + 'px';
const options = {
autoresize: true,
height: myheight
};
thus, it is possible to control the percentage.
score:1
i suggest the reason that set option width and height 100% not working is that the network is attaching on a div which height and width is not defined, so you could try the code below:
const options = {
autoresize: ture,
height: '100%',
width: '100%'
};
// initialize your network!
class visnetwork extends component {
constructor() {
super();
this.network = {};
this.appref = createref();
}
componentdidmount() {
this.network = new network(this.appref.current, data, options);
}
render() {
let containerstyle = { //define container width and height.
width:"500px",
height:"500px",
}
return (
<div style={containerstyle} ref={this.appref} />
);
}
}
export default visnetwork;
if code above doesn't work , i would suggest use this.network.setsize(width, height)
to force the canvas to change.
Source: stackoverflow.com
Related Query
- Problems integrating the Vis network with React
- How to test a className with the Jest and React testing library
- What is the best way to deal with a fetch error in react redux?
- React with Redux? What about the 'context' issue?
- Rendering React components with promises inside the render method
- Hiding the status bar with React Native
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- How to fetch the new data in response to React Router change with Redux?
- How to mock history.push with the new React Router Hooks using Jest
- How to override the width of a TextField component with react MUI?
- React with Typescript - Type { } is missing the following properties from type
- How to upgrade a React project built with create-react-app to the next create-react-app version?
- yarn is having troubles with the network connection
- Change the cursor position in a textarea with React
- How to detect the device on React SSR App with Next.js?
- Updating a React Input text field with the value on onBlur event
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- React Warning: flattenChildren(...): Encountered two children with the same key
- How do I use the Firebase onAuthStateChange with the new React Hooks?
- Two children with the same key in React
- Why can I omit the return statement with parenthesis in React
- Re-render component when navigating the stack with React Navigation
- 'A valid React element (or null) must be returned' error with one of the component in ReactJS
- How should the new context api work with React Native navigator?
- React Intl FormattedNumber with the currency symbol before, not after
- General problems with Google Optimize in React / Next.js
- Passing a function with React Context API to child component nested deep in the tree
- Removing an item causes React to remove the last DOM node instead of the one associated with that item
- How do I use local state along with redux store state in the same react component?
More Query from same tag
- Issues changing state using buttons with React.js
- Function passed to video.addEventListener("play") event is undefined
- Bitbucket pipeline is failing and not letting me create the react build
- ReactJS Timer delay on change state
- Hide/Show content using ReactJS
- Integrating modal component onto page on load React JS
- Display a different default value after selected an option
- Update loop matter.js (IIFE) no access to class component's props?
- how you know which item is an image or button
- React BrowserRouter - how to programmatically navigate to different routes?
- react-select border color on select box
- When pressing the signup button the register form re-renders for a split second
- Deactivate Console.log and Logger or the Redux store in ReactJs production Mode
- Changed HashRouter to BrowserRouter - Navbar no longer works, but links do
- How do I add to an object that I made in state?
- Posting formatted string on postman
- If I render text that includes HTML tags in my React app, is there a way to display the HTML?
- Having difficulty iterating through an Object of Arrays and generating dynamic React elements in JSX from within the Redux Store
- Dynamic React Router and component not possible?
- How can I delete Multiple array items
- Mocking a HttpClient with Jest
- How to get last row in json file using reactjs
- React webkit controlled-component textarea loses focus on keystroke render
- how to change hover for all elements ( border, text and arrow ) in react-select?
- Components do not re-render after calling store.writeQuery()
- React update state from a form
- React button component with switch statement
- Adding a class to a certain element in ReactJS
- loop through mapbox getDirections to populate a route array
- Using `dynamic import` to fetch script from another host?