I am facing a challenge in my React application where I have two panels with buttons displayed using flex properties. Below is a simplified version of the HTML/SCSS code that illustrates the setup:
<div class="bottom-panel left">
<button>Action 1</button>
</div>
<div class="bottom-panel center">
<button>Action 2</button>
</div>
.bottom-panel {
position:absolute;
width: 100%;
bottom: 0;
display: flex;
&.left {
justify-content: start;
}
&.center {
justify-content: center;
}
}
You can view the CodePen example here (ensure SCSS is selected if not automatically done by CodePen).
Is there a way to make both buttons clickable without relying on JavaScript? I've experimented with the pointer-events property but haven't achieved the desired outcome.
P.S.
I understand that merging into a single panel could solve this issue, but separating them aligns with the component structure in my React app and keeps the code organized.
In the provided scenario, adjusting the width of
.leftcould work as a temporary fix. However, I prefer a solution that maintains both panels at 100% width for a more sustainable approach.