how do I set the width of the modal of react-responsive-modal?
https://react-responsive-modal.leopradel.com/#props
<div style={{width: '600px'}} >
<Modal open={open} onClose={this.onCloseModal} closeOnOverlayClick={true}>
<CreateSubmenu onFormSubmit={this.onSubmenuFormSubmit} editData={editSubmenuData}/>
</Modal>
</div>
I think it would be the best it by styling class in css
.react-responsive-modal-modal { width: 500px }
You can also use react ref to add style using javascript https://reactjs.org/docs/glossary.html#refs
EDIT:
I created working code example:
In index.html I added styles:
<style>
.react-responsive-modal-modal {
width: 200px;
}
</style>
https://codesandbox.io/s/react-responsive-modal-4tuc1?file=/index.html
Related
I am having a modal with long content. I need to have an internal scroll bar inside the modal but there is no information about that in the documentation
<Modal
title={<Typography style={{color:'#2e186a'}}>FAQ</Typography>}
centered
visible={openFaq}
onOk={() => setopenFaq(false)}
onCancel={() => setopenFaq(false)}
width={1000}
footer={false}
>
{Content}
</Modal>
Any help is welcome.Thanks
A suggestion by using CSS
<Modal
bodyStyle={{overflowX: 'scroll'}}
>
{Content}
</Modal>
You need to provide the maxHeight option inside bodyStyle prop along with
overFlow set to auto
<Modal
bodyStyle={{ overflowY: 'auto', maxHeight: 'calc(100vh - 200px)' }}
>
{content}
</Modal>
You can achieve this as following:
Modify .ant-modal-content class
.ant-modal-content {
height: 100%;
display: flex;
flex-direction: column;
}
Add fixed height and overflowY: scroll to the Modal
<Modal
style={{ height: 'calc(100vh - 200px)' }}
bodyStyle={{ overflowY: 'scroll' }}
>
Your content
</Modal>
I try to make the Gallery.js script appear above the header. I can only make it display next to it, because by default the script takes the whole height. How can I change it?
<div className="App">
<Gallery images={this.state.IMAGES} />
<header className="App-header">
<Link to="/success">
<button variant="outlined">
back
</button>
</Link>
</header>
</div>
.App-header {
min-height: 100vh;
}
.App-header has as min height the full heigth
I have used a contentEditable div inside a webview for some editor functionality in one of my app. The html code seams to work fine and responding to keyboard show and hide action in my android chrome browser but when i tried the same html code with the webview in react-native it won't responds to the keyboard and content hide behind the keyboard.
I have tried scrolling it to the end of the div and auto increase it's height according to content but nothing works.
import React, { Component } from 'react';
import { View, WebView } from 'react-native';
class webviewEditor extends Component{
render() {
return (
<View style={{flex:1}}>
<WebView
source={{
html: `
< head >
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#editor {
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="editor" contenteditable="true">
</div>
</div></body>
`}}
ref={web => { this.webview = web }}
style={{ flex: 1 }}
scalesPageToFit={false}
scrollEnabled={false}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={false}
/>
</View>
);
}
}
I expect the result to be the webview will scroll to the above of the keyboard just like in the browser but it won't in the app inside webview.
So when I'm using an Icon in Ant Design it is always 14 * 14 px.
Is there a way to set the size maually?
Things like
<Icon width={"20px"} type="setting" />
or
<Icon style={{width: '20em'}} type="setting" />
do not work
It should be
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
https://codepen.io/anon/pen/wNgrWX
Can change the size of the icon using fontSize style property.
eg: use of style={{ fontSize: '150%'}}
<PlayCircleFilled style={{ fontSize: '150%'}} />
In the new antd Icon version, you can increase the size of the icon like this:
import { MessageTwoTone } from "#ant-design/icons";
And call it as:
<div style={{ fontSize: "30px" }}>
<MessageTwoTone />
</div>
I tried using it as an attribute of <MessageTwoTone> but attribute no longer works like in the old version mentioned in the answers above.
Edited:-
I was told later that the above will only work while the Icon inherits its font-size from its parent. So we should rather add the style attribute directly to the Icon
<MessageTwoTone style={{ fontSize: "30px" }}/>
Not sure if its just for me, but as of today the accepted answer does not work, I made it work by putting a className inside the Icon Component, and targeting the svg of that class. here's an example
component.js
import { CheckCircleTwoTone } from '#ant-design/icons';
<CheckCircleTwoTone
twoToneColor="#52c41a"
className="reg_icon"
/>
component.scss
.reg_icon {
svg {
font-size: 120px !important;
}
}
Use <Icon style={{ fontSize: '30px'}} type="check-circle" />
Here is a working codepen:
https://codesandbox.io/s/x7r7k7j6xw
If using the icon inside the button like this:
<Button type="text" icon={<GithubOutlined />} />
You can add these classes/styles and it will solve the issue for you (it solved it for me)
<Button type="text"
className={styles.button}
icon={<GithubOutlined className={styles.icon}/>}
/>
.button {
// The wanted size...
font-size: 2.5em;
// Without it, changing the font size will cause problems.
width: fit-content;
height: fit-content;
.icon {
font-size: inherit;
}
}
CodePen Demo
Best way to do it with javascript
Icon.setTwoToneColor("#000");
Currently I'm using react.js and I'm trying to get two div's to be side by side.
Currently I'm trying to
<div id="sidebar" style = "display:inline-block;" >
<script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style="display: inline-block; width: 20%; height: 50%; "></div>
with sidebar.js as the where react is stored. This unfortunately doesnt work however as it just moves map-canvas to the side while sidebar isn't to the left of it; its on top. I've tried many various combinations w/ float as well and none of them seem to work
Another option is to edit the sidebar.js code where I currently have
return <div>
<input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
<ul>
{ libraries.map(function(l){
return <li>{l.name} </li>
}) }
</ul>
</div>;
in which I try doing return <div style ="display: inline-block;">
However, in this case the generated html doesnt show up at all. I'm perplex to what I should try but react seems like it doesnt want to play nice with other div elements.
That's because in React, the style prop takes an object instead of a semicolon-separated string.
<div id="sidebar" style={{display : 'inline-block'}} >
<script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style={{display: 'inline-block', width: '20%', height: '50%'}}>
</div>
Edit:
So this:
return <div style="display: inline-block;">
Would become this:
return <div style={{display: 'inline-block'}}>
const styles = {
container: {
backgroundColor: '#ff9900',
...
...
textAlign: 'center'
}
}
export default class App extends React.Component {
render() {
return(
<div className="container" style={styles.container}>
// your other codes here...
</div>
);
}
}