0
101
ViewsAdd line break between buttons generated in react loop
I a trying to add a line break after a button that is generated in a react loop. I've tried adding elements but that has not worked:
<div className="connect-container">
<div>
{connectors.map((connector) => (
<button className="metamask-button"
disabled={!connector.ready}
key={connector.id}
onClick={() => connect(connector)}
>
{connector.name}
{!connector.ready && ' (unsupported)'}
{isConnecting &&
connector.id === pendingConnector?.id &&
' > > >'}
</button>
)) }
</div>
There should be a space between the buttons. Currently they are stacked without spacing.
·
Juan Pablo Isaza
2 answers
Answer question0
You can do this by using following CSS
.connect-container button {
display: block;
width: 100%;
float: none;
}
Another simple & easy way using flex-box.
.connect-container>div{
display: flex;
flex-direction: column
}
Code example
.connect-container button {
display: block;
width: 100%;
float: none;
}<div class="connect-container">
<div>
<button className="metamask-button" > Button 1 </button>
<button className="metamask-button" > Button 2 </button>
</div>Example 2:
.connect-container>div{
display: flex;
flex-direction: column;
}
<div class="connect-container">
<div>
<button className="metamask-button" > Button 1 </button>
<button className="metamask-button" > Button 2 </button>
</div>
·
Juan Pablo Isaza
Report
0
This approach worked, but only by adding margin-bottom:
.connect-container button {
display: block;
width: 100%;
float: none;
margin-bottom: 10px;
}
·
Juan Pablo Isaza
Report
Answer question