Я использую библиотеку response-simple-keyboard для создания виртуальной клавиатуры в своем приложении React. Однако у меня возникли проблемы с растягиванием кнопок по вертикали на всю высоту их контейнера.
Я пробовал различные настройки CSS, кнопки не расширяются должным образом.
import React from 'react';
import Keyboard from 'react-simple-keyboard';
import 'react-simple-keyboard/build/css/index.css';
import './main.css';
function App() {
const handleKeyboardChange = (input) => {
console.log("Input changed", input);
};
return (
);
}
export default App;
.keyboardContainer {
position: fixed;
bottom: 0;
width: 100%;
height: 35vh;
background-color: #fff;
z-index: 1000;
}
.react-simple-keyboard {
width: 100%;
height: 100%;
}
.react-simple-keyboard .hg-row {
display: flex;
justify-content: center;
align-items: stretch;
height: 25%;
}
.react-simple-keyboard .hg-button {
color: #ff6347;
font-size: 3rem;
font-weight: bold;
background-color: #4CAF50;
border: none;
border-radius: 5px;
padding: 10px;
margin: 2px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... rd-styling
