I am trying to add a css property in div. How can i pass margin-left: 2px in following div?
(<div style={{width: `${widthValue}%`}} key = {i}>
<progress
{...customProps}
style={{ color: group.color }}
className={classes}
max={100}
value={100}
aria-valuemax={100}
aria-valuemin={0}
aria-valuenow={widthValue}
tabIndex="-1"
/>
</div>);
Use inline styles and camelCase.
style={{ marginLeft: 2 }}
Note: Default unit is px.
Related
My input takes the whole width, which is excepted behavior.
<Input placeholder='Filter' style={{ marginBottom: 50}}/>
Now I need to add a button behind this input. I decided to use the Space component, but then the input shrank. How can I have an input filling the whole space in a Space component ?
<Space>
<Input placeholder='Filter'/>
<Button type='primary'>Filter</Button>
</Space>
You're better off just using a div. My personal experience with AntD is that it's really hard to "customize" layouts/spacing using their components, even when attempting to style them with the style attribute.
// Works
<div style={{ display: "flex", gap: "8px" }}>
<Input placeholder='Filter'/>
<Button type='primary'>Filter</Button>
</div>
// Doesn't work
<Space style={{ display: "flex" }}>
<Input placeholder='Filter' style={{ flex: "auto" }} />
<Button type='primary'>Filter</Button>
</Space>
I'm using the #artsy/fresnel npm package to build a responsive React application.
Here's my code
<Media greaterThanOrEqual='computer'>
<div style={{ padding: '20px 50px' }}>
Some Content Goes Here
</div>
</Media>
<Media lessThan='computer'>
<div style={{ padding: '50px 100px' }}>
Exact Same Content Goes Here
</div>
</Media>
I've searched through the documentation, but could not find a way to set the padding of my div depending on the Media tag rendered. I want to achieve something like this
<div style={{ padding: (MediaIsGreaterThanComputer ? '20px 50px' : '50px 100px') }}>
Some Content Goes Here
</div>
Is this doable with the #artsy/fresnel framework?
You can do this, but you’ll need to take control over the wrapper div that gets emitted by the Media component (see the note about “render-props”). So something like:
<Media greaterThanOrEqual='computer'>
{(mediaClassNames, renderChildren) => {
return (
<div style={{ padding: '20px 50px' }}>
{renderChildren ? "Some Content Goes Here" : null}
</div>
)
}}
</Media>
I've connected to a websocket and pull real-time data from the server once the page is loaded. However, I want it to load from the bottom-up and not from the top-down of the div. I'm hoping I can keep it scrolled to the bottom of the div unless the user scrolls up in this case.
Here's what I'm currently working with
(I'm planning to also pull more data from their REST API and preload the div with 100-50 messages prior so the user doesn't see nothing upon the initial page load. Though, I'm sure that'll be another question 😂)
I've tried using
display: 'flex', flexDirection: 'column-reverse'
but that alone doesn't seem to be the solution in this case. overflow? I'm not sure
Here is the parent .js file that the component is within:
<Layout style={{ minHeight: '100vh' }}>
<div style={{width: '100%', height: '100%'}}>
<Header id="header">
</Header>
<Content style={{ padding: '24px 50px 0px 50px' }}>
<div style={{ borderRadius: '6px', border: '1px solid rgb(235, 237, 240)', background: '#fff'}}>
<Tbox/>
</div>
</Content>
<Footer/>
</div>
</Layout>
And then here is the component itself:
render() {
const chatBox =
<List
dataSource={this.state.data}
renderItem={item => (
<List.Item >
<List.Item.Meta
avatar={<Avatar size="large" icon="user" />}
title={<div>{item.user} {item.date}</div>}
description={item.message}
/>
</List.Item>
)}
/>;
return (
<div>
<div style={{ height: 400 }}>
<Scrollbars style={{ height: 400 }}>
<section style={{display: 'flex !important', flexDirection: 'columnReverse !important' }}>
<div>
{chatBox}
</div>
</section>
</Scrollbars>
</div>
<div style={{ width: '100%', padding: 0 }}>
...
</div>
</div>
);
}
As mentioned before by Daan, if you can post the result page, it would help since after that the CSS rule can be applied to the result list. Take look at this
how-to-display-a-reverse-ordered-list-in-html
Hope this could help
I want to implement a navbar like component in reactjs. but pesudo-classes(:hover) for css seem not to be supported by react(css-in-js). I try the another way out to solve the problem using li and state control.
Another problem for this solution is that i can't ripped off the unordered bullet list using display:inline-block or list-style:none because it make the sub-menu items to be disappear when moving my pointer down to them.I am using material-ui/core as UI libraryAn example of my code:
showMenu = () =>{
this.setState({showMenu: true});
}
hideMenu = () =>{
this.setState({showMenu: false});
}
html, css
dropdownMenu:{
position: "absolute",
fontSize: "0.9rem",
marginTop: 0,
right: 15,
left: "auto",
top: "63px",
backgroundColor:"white",
border:"1px solid #D9E4E3",
boxShadow: "0px 3px 21px 0px rgba(0, 0, 0, 0.2)",
animationDuration: "0.25s",
animationFillMode: "both",
},
<div>
<li onMouseLeave={this.hideMenu}>
<div className={classes.sectionDesktop} onMouseEnter={this.showMenu}>
<Avatar style={{backgroundColor: "transparent"}}><Icon>account_circle</Icon></Avatar>
<span style={{fontWeight: 500, margin: "0px .5rem", lineHeight: "40px"}}>Louis Barnett</span>
</div>
{this.state.showMenu &&
<div className={classes.dropdownMenu} >
<SideMenuItem label="My Profile" icon={this.renderIcon('person')} onClick={() => this.handleMenuClick("/me")}/>
<SideMenuItem label="Settings" icon={this.renderIcon('settings')} />
<SideMenuItem label="Logout" icon={this.renderIcon('exit_to_app')} onClick={this.handleSignoutClick}/>
</div>
}
</li>
</div>
SideMenuItem Component
render() {
const selected = this.props.location.pathname === this.props.path;
return(
<ListItem button dense selected={selected} onClick={this.handleOnClick}>
<ListItemIcon>
{this.props.open || !this.props.label ? this.props.icon : <Tooltip title={this.props.label}>{this.props.icon}</Tooltip>}
</ListItemIcon>
<ListItemText primary={this.props.label}/>
</ListItem>
);
}
Hello mate the :hover styling should work in this case. Just try specifying it in a style-sheet instead of inline style.
Sample code
yourCssFile.css
.my-button {
background-color: yellow;
}
In your component
import './path_to_css/yourCssFile.css';
In the button
<button class="my-button">Click me</button>
This will apply your styles for your button. Similarly you can try out hover.Check out the reference!
When try assign a style to element, I recive the next error.
Error: Objects are not valid as a React child (found: object with keys {border, padding, whiteSpace, textOverflow, overflow, position, float, height, width}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Gridnamic`.
I tried use Object.assign, set the array inline style={{width: "45px"}} and doesnt work.
My array style is:
var styles = {
columns: {
border: "1px solid #ddd",
padding: "5px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow:"hidden",
position: "relative",
float: "left",
height: "45px",
width: "200px"
},
columnSelect: {
border: "1px solid #ddd",
padding: "5px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow:"hidden",
position: "relative",
float: "left",
height: "45px",
width: "50px"
}
};
And my render method is:
return <div>
<p>{this.state.selected.length} seleccionados</p>
<div className="table-responsive">
<div style={styles.row}>
<div style={styles.rowContent}>
<div style={styles.columnSelect}><input type="checkbox" onClick={this.selectElement.bind(this)} className="selectAll"/></div>
{this.state.columns.map(column =>
<div style={styles.columns} key={column.name}>{column.title}</div>
)}
</div>
</div>
<div style={styles.row}>
<div style={styles.rowContent}>
<div> style={styles.columnSelect}</div>
{this.state.columns.map(column =>
<div style={styles.columns} key={column.name}>
<input placeholder="Buscar" className="form-control" ref={'filter-'+column.name} name={column.name} onChange={this.filter.bind(this)} />
</div>
)}
</div>
</div>
</div>
<p>{this.state.rows.length} registros.</p>
</div>;
Thanks developers.
Chill
The issue is here: <div> style={styles.columnSelect}</div>. Probably meant to do <div style={styles.columnSelect}></div> .