Attempting to develop an on-screen keyboard for a React application using CSS grid to partition the containing element. Despite setting the necessary display properties and grid template, only 4 buttons are appearing, with most of them hidden below one another in the bottom right corner.
Adjusting the grid template size results in more buttons being displayed, but increasing it causes a reoccurrence of the issue mentioned above.
This is the Component code:
import React from "react";
import "../CSS/Keyboard.css";
const OnScreenKeyboard = () => {
const handleKeyClick = (character) => {
// Placeholder code: Insert the character into the input field
};
return (
<div className="on-screen-keyboard">
{/* Button components */}
</div>
);
};
export default OnScreenKeyboard;
Accompanying this code is the related CSS file where various attempts were made to resolve the button display issue.
/* CSS styles for the on-screen keyboard */
.on-screen-keyboard {
/* Grid layout and other styles */
}
/* Specific button styles */
Despite trying multiple solutions, such as adjusting column and row templates, the problem persists. Is there a limitation on the number of columns that can be used?
Your assistance in resolving this issue would be greatly appreciated. I hope it's something simple that I've overlooked, but I'm struggling to identify the cause.