html - How to position inputs in equal height with Flexbox? -
i build this menu, , can't set left side's inputs in same height right ones... solution i'm thinking of set equal height to input's divs , use flex-grow - , set field 7 double of it's height... i've tried , it's not working - perhaps better way it? i've tried bootstrap - run same problem.
html :
<div class="container"> <div class="tab-pane active" id="mes_informations"> <div class="row"> <div class="col-md-10"> <div class="row"> <div class="col-md-6 mes_informations_left_cont"> <div class="inputs_grp"> <p>field 1</p> <div class="switch_div_info"> <div class="switch" style="border-radius:25px;"> <input type="radio" class="switch-input" name="view" value="" id="week" checked=""> <label for="week" class="switch-label switch-label-off male"> <i class="fa fa-mars" aria-hidden="true"></i> <label> homme </label> </label> <input type="radio" class="switch-input" name="view" value="" id="month"> <label for="month" class="switch-label switch-label-on female"> <label> femme </label> <i class="fa fa-venus" aria-hidden="true"></i></label> <span class="switch-selection"></span> </div> </div> </div> <div class="inputs_grp"> <p>field 2</p> <input class="form-control" id="societe" type="text"> </div> <div class="inputs_grp"> <p>field 3</p> <input class="form-control" id="siren" type="text"> </div> <div class="inputs_grp"> <p>field 3</p> <input class="form-control" id="nom_contact" type="text"> </div> <div class="inputs_grp"> <p>field 4</p> <input class="form-control" id="prenom_contact" type="text"> </div> </div> <div class="col-md-6 mes_informations_right_cont"> <div class="inputs_grp"> <p>field 5</p> <input class="form-control" id="service" type="text"> </div> <div class="inputs_grp"> <p>field 6</p> <input class="form-control" id="address" type="text"> </div> <div class="inputs_grp input_double"> <p>field 7</p> <input class="form-control" id="address_fac" type="text"> <div class="address_input_grp"> <input class="form-control pull-left" id="vile" type="text"> <input class="form-control pull-right" id="code_postal" type="text"> </div> </div> <div class="inputs_grp"> <p>field 8</p> <input class="form-control" id="nom_contact_fac" type="text"> </div> </div> </div> </div> </div> </div> </div> css :
.container { padding: 15px; height: 800px; width: 800px; background-color: #e9e9e9; } .switch_div_info .switch { float: left; position: relative; height: 32px; width: 140px; /*margin: 20px auto;*/ background: white; border-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); } .switch_div_info .switch-label { position: relative; z-index: 2; float: left; width: 58px; line-height: 26px; font-size: 11px; color: rgba(255, 255, 255, 0.35); text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); cursor: pointer; } .switch_div_info .switch-label label { font-family: 'montserrat', sans-serif; color: #2b2b2b; display: none; font-size: 12px; position: relative; display: none; font-weight: 100; } .switch_div_info .switch-label:active { font-weight: bold; } .switch_div_info .switch-label-off { padding-left: 2px; } .switch_div_info .switch-label-on { padding-right: 2px; } .switch_div_info .switch-input { display: none; } .switch_div_info .switch-input:checked + .switch-label { font-weight: bold; color: rgba(0, 0, 0, 0.65); text-shadow: 0 1px rgba(255, 255, 255, 0.25); -webkit-transition: 0.15s ease-out; -moz-transition: 0.15s ease-out; -ms-transition: 0.15s ease-out; -o-transition: 0.15s ease-out; transition: 0.15s ease-out; -webkit-transition-property: color, text-shadow; -moz-transition-property: color, text-shadow; -ms-transition-property: color, text-shadow; -o-transition-property: color, text-shadow; transition-property: color, text-shadow; } .switch_div_info .switch-input:checked + .switch-label label { display: block; } .switch_div_info .switch-input:checked + .switch-label-on ~ .switch-selection { left: 45px; /* note: left: 50%; doesn't transition in webkit */ } .switch_div_info .switch-selection { position: absolute; z-index: 1; top: -1px; left: 0px; display: block; width: 105px; height: 36px; border-radius: 3px; background-color: white; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); -webkit-transition: left 0.15s ease-out; -moz-transition: left 0.15s ease-out; -ms-transition: left 0.15s ease-out; -o-transition: left 0.15s ease-out; transition: left 0.15s ease-out; border-radius: 25px; } .switch_div_info .switch .switch-label .fa { font-size: 20px; margin-top: 6px; } .switch_div_info .switch .switch-label.male { float: left; } .switch_div_info .switch .switch-label.female { float: right; } .switch_div_info .switch .switch-label.male .fa { float: left; margin-left: 5px; } .switch_div_info .switch .switch-label.female .fa { float: right; margin-right: 5px; } .switch_div_info .switch .switch-label.male label { left: 31px; top: -23px; } .switch_div_info .switch .switch-label.female label { right: 26px; top: 3px; } .switch_div_info .switch-input:checked + .switch-label.female .fa { position: relative; top: -30px; } .switch_div_info .switch-input:checked + .switch-label .fa { color: rgb(73, 200, 193); } #mes_informations .cont { display: flex; } #mes_informations p { font-family: 'montserrat', sans-serif; font-size: 0.8vw; color: #2b2b2b; } .mes_informations_left_cont { min-height: 400px; display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; align-items: stretch; } .mes_informations_right_cont { min-height: 400px; display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; align-items: stretch; } #mes_informations .cont .left_cont > .inputs_grp, #mes_informations .cont .right_cont > .inputs_grp {} /*.left_cont > .inputs_grp, .right_cont > .inputs_grp {*/ /*min-height: 60px;*/ /*margin-top: 17px;*/ /*margin-bottom: 15px;*/ /*}*/ /*.address_grp{ min-height: 136px!important; }*/ /*.address_input_grp{*/ /*padding-top: 15px;*/ /*}*/ .address_input_grp > input { width: 48%; } #save_info:hover { background-color: #40afa9; outline: none; } #save_info { background-color: #49c8c1; border: 1px solid white; border-radius: 5px; font-size: 0.8vw; padding: 5px 15px 5px 15px; color: #fff; outline: none; } .inputs_grp > .form-control { border-radius: 5px!important; } .inputs_grp { flex-grow: 1; }
fixed change inputs inline flexbox.
html
<div class="wrapper"> <div class="grp_wrap"> <div class="inputs_grp"> <p>civilitÉ</p> <div class="switch_div_info"> <div class="switch" style="border-radius:25px;"> <input type="radio" class="switch-input" name="view" value="" id="week" checked=""> <label for="week" class="switch-label switch-label-off male"> <i class="fa fa-mars" aria-hidden="true"></i> <label> homme </label> </label> <input type="radio" class="switch-input" name="view" value="" id="month"> <label for="month" class="switch-label switch-label-on female"> <label> femme </label> <i class="fa fa-venus" aria-hidden="true"></i></label> <span class="switch-selection"></span> </div> </div> </div> <div class="inputs_grp"> <p>service À facturer</p> <input class="form-control" id="service" type="text"> </div> </div> <div class="grp_wrap"> <div class="inputs_grp"> <p>sociÉtÉ</p> <input class="form-control" id="societe" type="text"> </div> <div class="inputs_grp"> <p>adresse de facturation</p> <input class="form-control" id="address" type="text"> </div> </div> <div class="grp_wrap"> <div class="inputs_grp"> <p>siret/siren</p> <input class="form-control" id="siren" type="text"> </div> <div class="inputs_grp"> <p>adresse</p> <input class="form-control" id="address_fac" type="text"> </div> </div> <div class="grp_wrap"> <div class="inputs_grp"> <p>prÉnom du contact principal</p> <input class="form-control" id="prenom_contact" type="text"> </div> <div class="inputs_grp address_input_grp"> <input class="form-control pull-left" id="vile" type="text"> <input class="form-control pull-right" id="code_postal" type="text"> </div> </div> <div class="grp_wrap"> <div class="inputs_grp"> <p>prÉnom du contact principal</p> <input class="form-control" id="prenom_contact" type="text"> </div> <div class="inputs_grp"> <p>nom de contact de facturation</p> <input class="form-control" id="nom_contact_fac" type="text"> </div> </div> </div> css :
.wrapper{ width:80%; } .inputs_grp{ width:48%; margin-bottom:15px; } .grp_wrap{ display:flex; } .switch_div_info .switch { float: left; position: relative; height: 32px; width: 140px; /*margin: 20px auto;*/ background: white; border-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); } .switch_div_info .switch-label { position: relative; z-index: 2; float: left; width: 58px; line-height: 26px; font-size: 11px; color: rgba(255, 255, 255, 0.35); text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); cursor: pointer; } .switch_div_info .switch-label label { font-family: 'montserrat', sans-serif; color: #2b2b2b; display: none; font-size: 12px; position: relative; display: none; font-weight: 100; } .switch_div_info .switch-label:active { font-weight: bold; } .switch_div_info .switch-label-off { padding-left: 2px; } .switch_div_info .switch-label-on { padding-right: 2px; } .switch_div_info .switch-input { display: none; } .switch_div_info .switch-input:checked + .switch-label { font-weight: bold; color: rgba(0, 0, 0, 0.65); text-shadow: 0 1px rgba(255, 255, 255, 0.25); -webkit-transition: 0.15s ease-out; -moz-transition: 0.15s ease-out; -ms-transition: 0.15s ease-out; -o-transition: 0.15s ease-out; transition: 0.15s ease-out; -webkit-transition-property: color, text-shadow; -moz-transition-property: color, text-shadow; -ms-transition-property: color, text-shadow; -o-transition-property: color, text-shadow; transition-property: color, text-shadow; } .switch_div_info .switch-input:checked + .switch-label label { display: block; } .switch_div_info .switch-input:checked + .switch-label-on ~ .switch-selection { left: 45px; /* note: left: 50%; doesn't transition in webkit */ } .switch_div_info .switch-selection { position: absolute; z-index: 1; top: -1px; left: 0px; display: block; width: 105px; height: 36px; border-radius: 3px; background-color: white; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); -webkit-transition: left 0.15s ease-out; -moz-transition: left 0.15s ease-out; -ms-transition: left 0.15s ease-out; -o-transition: left 0.15s ease-out; transition: left 0.15s ease-out; border-radius: 25px; } .switch_div_info .switch .switch-label .fa { font-size: 20px; margin-top: 6px; } .switch_div_info .switch .switch-label.male { float: left; } .switch_div_info .switch .switch-label.female { float: right; } .switch_div_info .switch .switch-label.male .fa { float: left; margin-left: 5px; } .switch_div_info .switch .switch-label.female .fa { float: right; margin-right: 5px; } .switch_div_info .switch .switch-label.male label { left: 31px; top: -23px; } .switch_div_info .switch .switch-label.female label { right: 26px; top: 3px; } .switch_div_info .switch-input:checked + .switch-label.female .fa { position: relative; top: -30px; } .switch_div_info .switch-input:checked + .switch-label .fa { color: rgb(73, 200, 193); }
Comments
Post a Comment