I try to fix button location when image is added.
I want the button location to be always horizontal.
front : React
css framework : semantic-ui-react
render() {
return (
<Container text style={{marginTop: '3em'}}>
<Header as="h1">{this.state.article.title}</Header>
<this.Paragraph />
{(this.state.article.imageNames || []).map(function(articleData, i) {
return (
<img
src={`https://article-s3-jpskgc.s3-ap-northeast-1.amazonaws.com/media/${
articleData.name
}`}
alt="new"
/>
);
})}
{/* TODO fix button location when image exists */}
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
{this.renderRedirect()}
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
);
}
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx
At particular image size, button location is like this:
I want the button location to be always horizontal like this:
I expect the button location is always horizontal.
But the actual is not always according to image size.
As #Arup suggested, This issue is resolved by flexbox.
<Container style={{display: 'flex'}}>
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
Related
RenderByTenantFunc({
wp: () => (
<Tooltip id="tooltip-fab" title="Home">
<Button className="home-button">
<a
href={
GAIN_ENV.toLowerCase() === 'staging'
? 'link1'
: 'link2'
}
rel="noopener noreferrer"
>
<div aria-label={translate('home')}>
<img
className="icon"
style={{
width: '22px',
height: '20px',
marginBottom: '-10px',
}}
src={SourceWpIcon}
alt={translate('home')}
/>
<span className="home-button-text">Home</span>
</div>
</a>
</Button>
</Tooltip>
),
})
If you are clicking on the Home button a new browser tab opens. This is very confusing to customers as they think they're being taken somewhere else. It should direct to the navigation selection in the same browser tab. I tried by removing target="_blank", but still navigating to a new browser, I was stuck here, please help me, guys.
the default value of target is _blank try with changing it to _self
Is it possible to show some custom HTML markup in react bootstrap tooltip component
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={
<Tooltip id='Description__tooltip'>
{record.desc}
</Tooltip>
}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>
The value displayed in the tooltip (record.desc) is having some html code which I want to add to this tooltip.
Can you try with dangerouslySetInnerHTML?
<Tooltip id='Description__tooltip'>
<div dangerouslySetInnerHTML={{ __html: record.desc}} />
</Tooltip>
you can try with dangerouslySetInnerHTML
const tooltip = (
<Tooltip id="Description__tooltip">
<div dangerouslySetInnerHTML={{ __html: record.desc}} />
</Tooltip>
);
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={tooltip}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>
from in your problem, if you want to insert DOM Element in children, we must do function to wrapper the props which DOM element contains. we can use dangerouslySetInnerHTML. example code like this below.
<OverlayTrigger
placement='top'
trigger={['click', 'hover', 'focus']}
overlay={
<Tooltip id='Description__tooltip'>
<div dangerouslySetInnerHTML={{__html:record.desc}} />
</Tooltip>
}
>
<i className='fa fa-info-circle fa-sm' aria-hidden='true'></i>
</OverlayTrigger>
I would like to show map function's info (taken from a json file) in an expansion panel (react hook), clickng on a button:
<div>
<div>
{item.peapoleInfo.map((info, i) => {
return (
<img src={info.img} />
<h1> {info.name} </>
<button onClick={() => setExpand(!expand)}> CLICK HERE </>
);
})}
</div>
{ expand && <div>
show same info clicking on button
<div>
}
</div>
How can I do it?
I have a list of to-do task. I want to display one task per screen and when the user clicks the next button he should be able to see the next. I want to achieve it with slide animation. I came across react-transition-group package which can be used to for animation. But the slide animation is not working properly.
https://codesandbox.io/s/transitiongroup-component-zjzep
<CSSTransition
in={currentPage === 1}
key={1}
timeout={500}
classNames="item"
>
<ListGroup.Item>
<Button
className="remove-btn"
variant="danger"
size="sm"
onClick={() => {}}
>
×
</Button>
{'a'}
</ListGroup.Item>
</CSSTransition>
<CSSTransition
in={currentPage === 2}
key={2}
timeout={500}
classNames="item"
>
<ListGroup.Item>
<Button
className="remove-btn"
variant="danger"
size="sm"
onClick={() => {}}
>
×
</Button>
{'b'}
</ListGroup.Item>
</CSSTransition>
Finally, I manage to achieve it. Earlier I was using float to keep all the elements in one line. I change it with position absolute.
https://codesandbox.io/s/transitiongroup-component-zjzep
I'm having troubles with creating a simple gallery allowing to print pictures. I constructed the interface. When I click on the print button, I'm not able to propagate event to a function. Funny enough, it always works for just a couple of items in the gallery so that console logs foo. Could you please point me where is the problem? I am using material-ui, tileData is a json with image url etc...
Many thanks!
class Galery extends React.Component {
state = {
tileData: tileData
};
printThis = tile => {
console.log("printing tile... " + tile.target.value);
};
render() {
const classes = this.props;
return (
<div className={classes.root}>
<ButtonAppBar />
<div style={{ marginBottom: 20 }} />
<Grid container spacing={8}>
<Grid item xs={10}>
<GridList
cellHeight={250}
cellWidth={250}
cols={5}
spacing={4}
className={classes.gridList}
>
{tileData.map(tile => (
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
subtitle={<span>by: {tile.author}</span>}
actionIcon={
<IconButton
className={classes.icon}
value="foo"
onClick={this.printThis}
>
<i className="material-icons md-24 md-light">print</i>
</IconButton>
}
secondActionIcon={
<IconButton className={classes.icon}>
<i className="material-icons md-24 md-light">delete</i>
</IconButton>
}
/>
</GridListTile>
))}
</GridList>
</Grid>
<Grid item xs={2}>
<div className={classes.stats}>
<StatsTable />
</div>
</Grid>
</Grid>
</div>
);
}
}
It works for me to access the object id through event.currentTarget as per github answer here https://github.com/mui-org/material-ui/issues/7974#issuecomment-329250974
`
So my implementation is:
printThis = (event) => {
console.log('printing tile... '+ event.currentTarget.id);
};
<IconButton className={classes.icon} id = {tile.img} onClick={this.printThis}>
<i className="material-icons md-24 md-light" >
print
</i>
</IconButton>