I am facing an issue with maintaining the button location when an image is added. My goal is to ensure that the button's position remains horizontal consistently.
Front-end: 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 complete source code is available at:
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx
At a specific image size, the button location appears like this:
https://i.sstatic.net/hvr4f.png
My objective is to have the button location consistently horizontal, as shown in this example:
https://i.sstatic.net/Edtvp.png
Although I expect the button location to always be horizontal, it is not always aligned according to the image size in reality.