For my project, I implemented a CSS grid layout consisting of 20 rows and 20 columns (5% of screen for each cell). One particular page includes a button that initially fit within grid columns 5-8 and rows 6-9 without any issues. However, I wanted to center the button within the grid area, so I utilized flexbox for alignment within the CSS grid.
The text on the button reads "Select file to upload", but my problem is that the button's width now only spans the width of a single word instead of all four words. Prior to adding the flex container for centering, the button was as wide as all four words. The flex container seems to have influenced the button's width negatively.
While the flexbox arrangement works flawlessly for other elements on different pages, this specific button encounters the issue in Firefox 64. It might be necessary to create a unique flex-item class specifically for this button, separate from the existing flex-item class provided below.
Listed below are the CSS classes associated with this button:
.center_text_grid {
display: grid;
grid-column: 5 / 12;
grid-row: 6 / 19;
display: block;
overflow: auto;
align-items: center;
justify-items: center;
}
.flex-item {
display: flex;
width: 70%;
flex-direction: row;
align-items: center;
justify-content: center;
}
.upload-btn-wrapper {
display: inline-block;
text-align: center;
border-radius: 15px;
}
.btn {
border: 1px solid rgb(117,163,126);
background-color: black;
width: 75%;
padding: 8px 20px;
border-radius: 15px;
font-size: 20px;
font-weight: bold;
font-family: CamphorW01-Thin, sans-serif;
font-size: 13pt;
color: rgb(117,163,126);
cursor: pointer;
}
Below is the HTML code for the button in question:
<div class="center_text_grid flex-item">
<div class="upload-btn-wrapper">
<button class="btn" style="width: 100%">Select file to upload</button>
<input type="file" name="fileToUpload" />
</div>
</div><br><br>
Although this may not offer a complete reproducible example, since it pertains to button styling specifics, I hope the provided code can assist in finding a solution.
Thank you for any assistance provided.