The button in the flex container is not wide enough due to center alignment

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.

Answer №1

Here is the solution I came up with:

<div class="upload-btn-wrapper center_text_grid flex-item">
  <button class="btn">Select file to translate</button>
  <input type="file" name="fileToUpload" />
</div><br><br>

Originally, the HTML code included two nested divs around the button. I simplified it by using only one div and adding the upload-btn-wrapper class to that single div. Additionally, I adjusted the width property in the .btn class to be 65%.

The only remaining issue is that the text within the button does not highlight when hovered over due to the existing CSS styling:

.btn:hover{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
    box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
    color: rgb(175,222,162);
}

Since this is a specific file selection button, it requires unique treatment compared to regular buttons. I am currently working on finding a solution for this particular problem and will share it once resolved. If anyone else has insights, please do share them with us.

I appreciate the assistance from those who have provided answers so far.

Answer №2

I pasted your code into a jsfiddle and you can view it below. The code is functioning well on both Stack Overflow and jsfiddle. It's possible that the issue lies with your browser not supporting a certain line of code, which could be causing it to malfunction. I recommend updating your browser or trying a different one.

Hopefully this information proves helpful!

.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;
}
<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>

Answer №3

Eliminate the styling for both button and input elements

Enclose them within a div element.

Apply the button CSS styles to the div. For instance, here is an example of button CSS -

.divButton {
  background-color: cyan;
  border: none;
  color: white;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove the outline on a particular input and retain only its border

Even after trying to use "outline: 0", nothing seems to change. #input_field { outline: 0; width: fit-content; margin: auto; margin-top: 20%; border-radius: 30px; border: 2px solid turquoise; padding: 6px; } <div id="input_field"> ...

The content spilling out of a Bootstrap 4 row

UPDATE: Here is the link to the javascript fiddle When the text on the screen becomes too large for the row, it overlaps onto other rows instead of increasing the height of the row. This could be due to setting the row heights as a percentage value in ord ...

How come the CSS for my angular ngx-mat-datetime-picker and mat-datepicker collide when they are both present on the same page?

Within the same form, I have two input fields stacked under each other. One is an ngx-mat-datetime-picker and the other is a mat-datepicker. Individually, they function correctly. However, when I open them for the second time, the one I opened first appear ...

Setting up only two input fields side by side in an Angular Form

I'm fairly new to Angular development and currently working on creating a registration form. I need the form to have two columns in a row, with fields like Firstname and Lastname in one row, followed by Phone, Email, Password, and Confirm Password in ...

Animate the chosen text via specialized effects

I am trying to implement a show/hide feature for specific text using jQuery. The challenge I am facing is having multiple instances of the same text tag with identical ids. I want to trigger the animation on a particular child element when hovering over it ...

The Angular factory function was unable to be initialized

I recently started learning how to integrate Angularjs with ROR using this helpful tutorial While working on adding a new function to retrieve all posts from the database, I encountered a problem. The page no longer loads when I run the code and the HTML ...

Using CSS3 to style the first letter of a text, align it vertically as super, and adjusting

I am trying to create a basic list without any images included. I would like the first letter of the last item in the list to be styled with "vertical-align: super;", however, this is causing an increase in the height of the paragraph. #third::first-let ...

Inquiring about CSS classes for numerous elements

table.rightlist td { text-align:right; } table.rightlist th { text-align:right; } This code snippet is intended to align both the table cells (td) and headers (th) to the right within a table with the "rightlist" class. However, upon testing the ...

How to exclude elements nested inside another element using CSS or XPath techniques

Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...

Creating a button for every individual row within a table using a combination of PHP and HTML

I need assistance with my current PHP and HTML code that generates buttons on each table row: <!DOCTYPE HTML> <h2 class="text-center">Consulta</h2> <br> <table class="table table-striped"> <tr class="in ...

What is the best way to horizontally center an image in Bootstrap 4 while having a fixed-top navbar and preventing vertical scrollbars?

I am struggling to achieve the desired outcome, which is depicted in this image: https://i.sstatic.net/i6X0j.jpg Specific requirements for this project include: The image must be responsive A fixed-top navbar should remain visible No vertical scrolling ...

Code functioning properly on JS Fiddle, experiencing difficulties when running directly in browser

Hey there, I have this vertical jquery tabs example working on JSFiddle, you can check it out here: https://jsfiddle.net/tj_vantoll/nn2Qw/ I've been trying to replicate it in an HTML file but so far I haven't had any luck... Can someone help me ...

Is it possible for the `position: fixed` property to interfere with mix-blend-mode, and if so, are there

Struggling to make box-shadows cooperate with different backgrounds? The traditional method involves using mix-blend-mode and adding a pseudo element behind the main one for the effect. You can see an example of this technique here (click the + icon in th ...

AngularJS Cascading Dropdowns for Enhanced User Experience

There is a merchant with multiple branches. When I select a merchant, I want another dropdown list to display the data from merchant.branches. The following code does not seem to be fixing the issue: <label>Merchant:</label> <select ng-if= ...

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

My current task involves: Fetching input from a form field and adding the data to a div called option-badges Each badge in the div has a X button for removing the item if necessary The issue at hand: I am facing difficulty in removing the newly appended ...

Mini-navigation bar scrolling

I am trying to create a menu where I want to hide elements if the length of either class a or class b is larger than the entire container. I want to achieve a similar effect to what Facebook has. How can I make this happen? I have thought about one approac ...

An issue is being caused by altering the custom.scss.css file in Rails

After following the tutorial by Michael Hartl (), I encountered an issue when trying to modify some CSS functions in the custom.scss.css stylesheet. Every time I make a change, such as adjusting the margin from 10 px to 11 px, I receive this error in my br ...

Can using $.ajax to submit a form be considered contradictory?

Currently, I am engaged in developing an MVC application that heavily relies on jQuery and HTML forms. However, I have started to notice a conflict between the two... For instance, I have had to prevent the default form submission to execute my AJAX call ...

Concerning dilemma with a div element

I am using 2 different partial views in my main view: <div class="col-md-6"> @Html.Action("Chart", "Teams") </div> <div class="col-md-6"> @Html.Action("SeriesWinsChart", "Teams") </div> <div class="next-game"> & ...

Using jQuery to dynamically populate select options based on JSON data

I have been testing and searching for a solution to my issue, but it still doesn't work. Any help would be greatly appreciated. I have three select options implemented in PHP like this: <div class="control-group" id="merkPrinter"> <label cl ...