RosS RosS - 4 months ago 19
CSS Question

Align many divs with same size with bootstrap yii2

How I can Align more than 2 elements with same size in a "row" , I make dynamically rows with that "+" and the others rows are okay when I put "display: inline-flex; width: 100%" , but if the "first row" is with inline-flex its going broken , and when I clicked for more rows , it dont go down , it make them on the same row
:

1st line
at the moment

after I generate some rows dynamically
after I generate dynamically rows


<select class=" col-sm-5">
<option> - Select Component - </option>
</select>

<input class="col-sm-2 col-sm-offset-2" type="text" name="mytext[]">

<div class="btn btn-default col-sm-1 col-sm-offset-2 add_field_button"><span class="glyphicon glyphicon-plus"></span></div>


jQuery

$(document).ready(function () {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count

console.log(add_button);

add_button.click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
wrapper.append('<div style="display: inline-flex; width: 100%; " class="input_fields_wrap">\
<select class=" col-md-5">\
<option> - Select Component - </option>\
</select>\
<input class=" col-md-2 col-md-offset-2" type="text" name="mytext[]">\
<button class="btn btn-default col-md-1 col-md-offset-2 remove_field"><span class="glyphicon glyphicon-trash"></span></button>\
</div>'
);
}
});
wrapper.on("click", ".remove_field", function (e) { //user click on remove glyphicon
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});

Answer

Use a 12 columns div and split it on several divs:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="col-md-4 col-sm-4 col-xs-4">
        <select class="form-control">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
        </select>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
        <input type="text" name="" class="form-control">
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
        <button class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button>
    </div>
</div>

Comments