Issues with Flex layout in Firefox causing functionality errors

Question

Issues with Flex layout in Firefox causing functionality errors

My two text inputs are not cooperating with flex properties as expected.

They should be positioned like this:

https://i.sstatic.net/ZSumb.png

However, they are currently positioning like this:

https://i.sstatic.net/e430n.png

CSS

.container{
    width: 48.1%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox; 
    display: -webkit-flex;
    display:flex;
    justify-content: space-between;
}

input[type=text] {
    font-size: 18px;
    padding: 8px;
    font-family: 'lato';
    font-weight: 300;
    line-height: 20px;
    transition: all linear .5s;
    display: inline;
    margin-top: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
}

#zip{
    flex: .21;
}

#phone{
    flex: .7; 
}

I am using fractions with the flex property to create a margin between the elements, but it is not working as intended.

HTML

<div class="container">
    <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">
    <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">              
</div>

The layout functions correctly in Chrome and Safari, but encounters issues in Firefox.

html css firefox flexbox

Answer 1

Answer №1

After some investigation, it became clear to me that the problem lies within input elements. The use of flex does not function properly with input elements in Firefox unless you include the following CSS code:

input { min-width: 1px; }

Answer 2

After some investigation, it became clear to me that the problem lies within input elements. The use of flex does not function properly with input elements in Firefox unless you include the following CSS code:

input { min-width: 1px; }

Answer 3

Answer №2

Here is a technique to achieve that:

Include align-items:center (along with some height) in the .container class
Add some margin to the input and apply flex:1 only to #phone, while setting a max-width for #zip

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: red;
  height: 100px
}

input[type=text] {
  font-size: 18px;
  padding: 8px;
  font-family: 'lato';
  font-weight: 300;
  line-height: 20px;
  transition: all linear .5s;
  appearance: none;
  border: 1px solid #ddd;
}

input {
  margin: 0 10px
}

#zip {
  max-width: 70px
}

#phone {
  flex: 1
}

<div class="container">
  <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0"
    required="">
  <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0"
    required="">
</div>

Answer 4

Here is a technique to achieve that:

Include align-items:center (along with some height) in the .container class
Add some margin to the input and apply flex:1 only to #phone, while setting a max-width for #zip

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: red;
  height: 100px
}

input[type=text] {
  font-size: 18px;
  padding: 8px;
  font-family: 'lato';
  font-weight: 300;
  line-height: 20px;
  transition: all linear .5s;
  appearance: none;
  border: 1px solid #ddd;
}

input {
  margin: 0 10px
}

#zip {
  max-width: 70px
}

#phone {
  flex: 1
}

<div class="container">
  <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0"
    required="">
  <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0"
    required="">
</div>

Answer 5

Answer №3

To ensure proper functionality, it is important to use percentage width and apply box-sizing: border-box; to the elements:

.container{
    width: 48.1%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox; 
    display: -webkit-flex;
    display:flex;
    justify-content: space-between;
}

input[type=text] {
    font-size: 18px;
    padding: 8px;
    font-family: 'lato';
    font-weight: 300;
    line-height: 20px;
    transition: all linear .5s;
    display: inline;
    margin-top: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#zip{
    width: 21%;
}

#phone{
    width: 70%;
}

<div class="container">
    <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">
    <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">              
</div>

Answer 6

To ensure proper functionality, it is important to use percentage width and apply box-sizing: border-box; to the elements:

.container{
    width: 48.1%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox; 
    display: -webkit-flex;
    display:flex;
    justify-content: space-between;
}

input[type=text] {
    font-size: 18px;
    padding: 8px;
    font-family: 'lato';
    font-weight: 300;
    line-height: 20px;
    transition: all linear .5s;
    display: inline;
    margin-top: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#zip{
    width: 21%;
}

#phone{
    width: 70%;
}

<div class="container">
    <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">
    <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">              
</div>

Issues with Flex layout in Firefox causing functionality errors

Answer №1

Answer №2

Answer №3

Similar questions

Using a PHP variable to dynamically change the style sheet by connecting to a MySQL database

Activate the button with a tap of the space bar on a webpage

How can content be kept from dropping below a stationary header?

What are some methods to design distinct angular ui bootstrap dialogs?

Aligning the tooltip element vertically

The Gulp task is not being recognized when I open the project in Visual Studio Code

Creating a webpage menu with CSS and HTML

What could be causing my hover effect to function exclusively on Chromium-based browsers and not on Firefox?

Deselect a checkbox by selecting a radio button with just Javascript code

Is there a way to have just the data table automatically update every 2 minutes without affecting the rest of the

Utilizing CSS to print specific columns on a separate page at regular intervals

There seems to be a lack of information appearing on the table

Sometimes, in extremely rare instances, external stylesheets may fail to download or be properly applied

Issue with displaying YouTube videos in HTML causing them to be downloaded instead of playing

Is it possible to make the background of the HTML Embed object transparent instead of grey?

Execute the script when the document is fully loaded

Optimize Your Reactstrap Carousel Images for Responsiveness

"Make your slides smooth and responsive with the unslick option in slick

Enhancing React-Admin with custom Material-UI theme overrides for targeted CSS selectors on a global scale

Bootstrap glyphicon not in sync with input field alignment