Form Layout behaving abnormally on firefox

user_14612951 0
Viewed 32

I have designed a form using flexboxes. Form is working fine on chrome and internet explorer but the the section where 3 fields are placed side by side overflows out of the form in firefox but looks well on chrome. Any possible solution. I tried defining width to each field but couldn't find any possible solution yet. Any possible solution

.Row1{
    margin-top:-3px;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    background-image:url(Media/Mask\ Group\ 14.jpg);
    background-position:center bottom;
    background-size:cover;
    padding:6% 15%;
}
.content{
    display:flex;
    flex-direction:column;
    margin:5% 5% 0 5%;
    flex-basis:40%;
}
.content h1{
    font-family:Roboto , Arial , sans-serif;
    font-weight:600;
    font-size:2.0625rem;
    text-align:left;
    color:#ffffff;
    letter-spacing:0.015em;
}
.content p,.content2 p{
    font-family:roboto,arial,sans-serif;
    font-weight:400;
    color:#b4b4b4;
}
.content h2,.content2 h1{
    font-family:Roboto , Arial , sans-serif;
    font-weight:300;
    color:#ffffff;
}
.contactDetails{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    margin:0;
}
.cell, .UAN{
    justify-content:center;
    align-items:center;
    padding:5px;
    display:flex;
    margin-top:-30px;
}
.fa-globe , .fa-phone-alt{
    color:#ffffff;
    font-size:25px;
    text-align:left;
}
.cell p, .UAN p{
    padding:10px;
    color:#ffffff;
    font-size:20px;
    font-family: Roboto, Arial , sans-serif;
    text-align:left;
}
/*Styling of Booking Form */
form{
    width:100%;
}
.bookingForm{
    padding:2%;
    background:#303030;
    flex-basis:45%;
    margin:3% 0 7% 0;
    position:relative;
    max-width:100%;
}

.bookingForm h2{
 color:#000733;
 font-family:Sen, arial, sans-serif;
 font-size:35px;
 font-weight:700;
 line-height:40px;
}
.inputBox{
    display:flex;
    width:calc(100%-10px);
    margin:15px 5px;
    position:relative;
}
label{
    position:absolute;
    top:-15px;
    left:0px;
    font-family: Roboto,Arial,sans-serif;
    font-size:12px;
    color:#b4b4b4;

}
.icon{
    padding:10px;
    color:#b4b4b4;
    border-bottom:1px solid #b4b4b4;
    font-size:16px;
}
.Xchangeholder{
    padding:12px;
    position:relative;
}
.iconXchange{
    border:none;
    transform:rotate(90deg);
    position:absolute;
    right:0px;
  
}
.inputField{
   /* padding:10px;*/
    border:none;
    background:#303030;
    border-bottom:1px solid #b4b4b4;
    outline:none;
    width:100%;
}
input:focus::placeholder{
    color:transparent;
}
.FPL{
 display:flex;   
}
.Fleet{
    /*flex-basis:55%;*/
    /*width:calc(60%-10px);*/
    /*margin:10px 3px 10px 10px;*/
    width:50%;
}
.passngr{/*flex-basis:22%;*/   /*width:calc(20%-10px);*/
    /*margin:10px 3px 10px 0px;*/
    width:25%;

}
.lugg{
    /*flex-basis:22%;*/
   /* width:calc(20%-10px);*/
  /* margin:10px 0px;*/
  width:25%;
}
.dateNtime{
    display:flex;
    margin-bottom:20px;
}
.date , .time{
    width:50%;
}
input[type="time"],input[type="date"]{
    position:relative;
}
input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator {
    color:rgba(0,0,0,0);
    background:none;
    z-index:1;
}
input[type="time"]:before , input[type="date"]:after{
    color: transparent;
    background: none;
    display: block;
    font-family: 'FontAwesome';
    content: '\f107';
    cursor:pointer;
    /* This is the calendar icon in FontAwesome */
    width: 15px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 6px;
    color: #000;
}

/*Styling of toggle button in Forms */
.switchButton{
    position:relative;
}
.switchButton h5{
    position:absolute;
    color:#606060;
    font-family:Roboto,Arial,sans-serif;
    font-size:16px;
    left:0px;
    bottom:-7px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    margin-left: 60px;
  }
  
/*.switch input { 
    opacity: 1;
    width: 0;
    height: 0;
  }*/

  .slider {
    border-radius:34px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background-color:#ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius:50%;
  }
  
  input:checked + .slider {
    background-image: linear-gradient(to right, #f8c212 , #f8c212, #f8be13, #f8b216, #f89f1b, #f89c1c, #f89c1c);
  }
 /* 
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  */
  
  input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
  }
/* End of toggle button styling*/

/*Forms buttons styling*/
.buttons{
    display:flex;
    justify-content: space-evenly;
    margin-bottom:40px;
    
}
.loginButton , .qouteButton{
    padding:15px 45px;
    border:none;
    width:50%;
    color:white;
    font-family:Roboto,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    outline:none;
}
.loginButton{
    background:#000733;
    margin-right:20px;
}
.qouteButton{
    background-image: linear-gradient(to left, #f8c212 , #f8c212, #f8be13, #f8b216, #f89f1b, #f89c1c, #f89c1c);
}
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Airport Taxi Service</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width , initial-scale=1.0">
        <link rel="stylesheet" href="ATS.css">
        <script src="https://kit.fontawesome.com/5631a5be5b.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
    </head>
    <body>       
        <div class=" Row Row1">
            <div class="content">
                <h1>AirportTaxi Service</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra maximus auctor. Nullam dignissim pretium leo quis vulputate. Ut non gravida ligula. Duis quis condimentum eros. Aenean enim urna, ultricies in lacus in, bibendum gravida elit. Nam tempor, neque a vulputate consectetur, est sem tempor diam, eget rhoncus elit nulla.</p>
                <h2>ONWARD TRAVEL SOLUTIONS</h2>
                <div class="contactDetails">
                    <div class="cell"><i class="fas fa-phone-alt"></i> <p>0300 *******</p></div>
                    <div class="UAN"><i class="fas fa-globe"></i><p>+1 2026 334</p></div>
                </div>
            </div>
            <div class="bookingForm">

                <form>
                    <h2>Book Now</h2>
                    <div class="inputBox pickup">
                        <i class="icon fa fa-map-marker" aria-hidden="true"></i>
                        <label for="fromLoc">PickUp:</label>
                        <input type="text" class="inputField" id="fromLoc" name="fromLoc" placeholder="PickUp point">
                    </div>
                    <div class="inputBox Xchangeholder">
                        <i class="fa fa-exchange icon iconXchange" aria-hidden="true"></i>
                    </div>
                  
                    <div class="inputBox dropOff">
                        <i class="icon fa fa-map-marker" aria-hidden="true"></i>
                        <label for="toLoc">Destination:</label>
                        <input type="text" class="inputField" id="toLoc" name="toLoc" placeholder="Destination point">
                    </div>
                    <div class="FPL">
                        <div class="inputBox Fleet">
                            <i class="fa fa-car icon" aria-hidden="true"></i>
                            <label for="fleet">Fleet:</label>
                            <select class="inputField" name="fleet" id="carFleet">
                            <option value="Economy">Economy</option>
                            <option value="Average">Average</option>
                            <option value="Luxury">Luxury</option>
                            </select>
                        </div>
                        <div class="inputBox passngr">
                            <i class="fa fa-user icon" aria-hidden="true"></i>
                            <label for="passenger">Passengers:</label>
                            <input class="inputField" type="number"placeholder="0" id="Passngr"name="passenger" min="1" max="5">
                        </div>
                        <div class="inputBox lugg">
                            <i class="fa fa-suitcase icon" aria-hidden="true"></i>
                            <label for="luggage">Luggage:</label>
                            <input class="inputField" placeholder="0" type="number" id="Luggage" name="luggage" min="1" max="30">
                        </div>
                    </div>
                    <div class="dateNtime">
                        <div class="inputBox date">
                            <i class="fa fa-calendar icon" aria-hidden="true"></i>
                            <label for="date">Date:</label>
                            <input class="inputField" type="date" name="date" value="2020-10-31" min="2020-10-31" max="2090-12-31">
                        </div>
                        <div class="inputBox time">
                            <i class="fa fa-clock-o icon" aria-hidden="true"></i>
                            <label for="time">Time:</label>
                            <input class="inputField" type="time" name="time" value="12:00">
                        </div>
                    </div>
                    <div class="inputBox switchButton">
                        <h5>Return:</h5>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                          </label>
                    </div>
                    <div class="dateNtime">
                        <div class="inputBox date">
                            <i class="fa fa-calendar icon" aria-hidden="true"></i>
                            <label for="date">Date:</label>
                            <input class="inputField" type="date" name="date" value="2020-10-31" min="2020-10-31" max="2090-12-31">
                        </div>
                        <div class="inputBox time">
                            <i class="fa fa-clock-o icon" aria-hidden="true"></i>
                            <label for="time">Time:</label>
                            <input class="inputField" type="time" name="time" value="12:00">
                        </div>
                    </div>
                    <div class="inputBox buttons">
                        <input class="loginButton" type="submit" value="Login">
                        <input class="qouteButton" type="submit" value="Quote">
                    </div>
                </form>
            </div>
        </div>

    </body>
</html>

forms css
1 Answers

The problem seems to be that the input elements related to the number of passengers and the number of pieces of luggage are picking up the default width. Although the spec seems to say this should be 20 characters it seems a bit different between browsers.

I think your safest bet is not to rely on what the browser sets as default width but set it yourself. You could do that either with say setting width: 2em for the input elements or by giving them each a size attribute which will make them wide enough for the number of characters you specify. So size="1" would be enough for the passengers and size="2" would be enough for the luggage.

Incidentally both FF and Chrome complained about the calcs in your CSS. They need spaces around the minus sign. I don't think this made a material difference to the problem you stated in the question but you may like to check them in case they disturb something else. For example in .inputBox use width:calc(100% - 10px);

user_108674540
Related