Bernard Polman
Reputation: 855
Elements next to each other in div
<div class="card-body" data-bind="if :showParam() || editParameters() ">
<form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData">
<div id="input-holder" data-bind="foreach:mainData">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div style="padding-left:5px;padding-right:5px;" class="form-group row">
<label class="control-label" data-bind="text: DisplayText, attr : {'for' : Name}"></label>
<!-- ko if: DisplayMode() == 'Input' -->
<input style="width:100%" type="text" data-bind="value: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Checkbox' -->
<input type="checkbox" data-bind="checked: Value" class="checkbox input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Dropdown' && !MultiValue() -->
<select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', value: Value, validationElement: Value" class="form-control input-sm"></select>
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Dropdown' && MultiValue() -->
<select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', selectedOptions: Value, validationElement: Value" multiple style="height:150px !important;" class="form-control input-sm"></select>
<!-- /ko -->
<!-- ko if: DisplayMode() == 'AutoComplete' -->
<input type="text" data-bind="validationElement: Value, attr : {'id':'autocomplete_' + Name()}" placeholder="@SharedResources.Index.AutocompleteMessage" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'DatePicker' -->
<input type="text" data-bind="datePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'DateTimePicker' -->
<input type="text" data-bind="dateTimePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'TimePicker' -->
<input type="text" data-bind="timePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
</div>
</div>
</div>
<button type="submit" style="margin:20px !important;" class="btn pull-right" id="generateReport"><em class="fa fa-repeat"></em> @SharedResources.Index.ShowReport</button>
</form>
</div>I have a div that contains input elements like text fields, datepickers, dropdown lists, etc. It's all located inside one div that has 'row' class. However, all the elements are shown below each other and I want them to be next to each other. How could I achieve this? Do I need to wrap each element inside a separate div and give it 'row' class?
<div class="card-body" data-bind="if :showParam() || editParameters() ">
<form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData">
<div id="input-holder" data-bind="foreach:mainData">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div style="padding-left:5px;padding-right:5px;" class="form-group row">
<label class="control-label" data-bind="text: DisplayText, attr : {'for' : Name}"></label>
<!-- ko if: DisplayMode() == 'Input' -->
<input style="width:100%" type="text" data-bind="value: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Checkbox' -->
<input type="checkbox" data-bind="checked: Value" class="checkbox input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Dropdown' && !MultiValue() -->
<select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', value: Value, validationElement: Value" class="form-control input-sm"></select>
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Dropdown' && MultiValue() -->
<select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', selectedOptions: Value, validationElement: Value" multiple style="height:150px !important;" class="form-control input-sm"></select>
<!-- /ko -->
<!-- ko if: DisplayMode() == 'AutoComplete' -->
<input type="text" data-bind="validationElement: Value, attr : {'id':'autocomplete_' + Name()}" placeholder="@SharedResources.Index.AutocompleteMessage" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'DatePicker' -->
<input type="text" data-bind="datePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'DateTimePicker' -->
<input type="text" data-bind="dateTimePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'TimePicker' -->
<input type="text" data-bind="timePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
</div>
</div>
</div>
<button type="submit" style="margin:20px !important;" class="btn pull-right" id="generateReport"><em class="fa fa-repeat"></em> @SharedResources.Index.ShowReport</button>
</form>
</div>
Pic of problem:
Upvotes: 1
Views: 71
Answers (2)
Gerard
Reputation: 15786
You can optionally make .form-group.rowa flexbox.
.form-group.row {
display: flex;
}<div class="card-body" data-bind="if :showParam() || editParameters() ">
<form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData">
<div id="input-holder" data-bind="foreach:mainData">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div style="padding-left:5px;padding-right:5px;" class="form-group row">
<label class="control-label" data-bind="text: DisplayText, attr : {'for' : Name}"></label>
<!-- ko if: DisplayMode() == 'Input' -->
<input style="width:100%" type="text" data-bind="value: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Checkbox' -->
<input type="checkbox" data-bind="checked: Value" class="checkbox input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Dropdown' && !MultiValue() -->
<select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', value: Value, validationElement: Value" class="form-control input-sm"></select>
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Dropdown' && MultiValue() -->
<select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', selectedOptions: Value, validationElement: Value" multiple style="height:150px !important;" class="form-control input-sm"></select>
<!-- /ko -->
<!-- ko if: DisplayMode() == 'AutoComplete' -->
<input type="text" data-bind="validationElement: Value, attr : {'id':'autocomplete_' + Name()}" placeholder="@SharedResources.Index.AutocompleteMessage" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'DatePicker' -->
<input type="text" data-bind="datePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'DateTimePicker' -->
<input type="text" data-bind="dateTimePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'TimePicker' -->
<input type="text" data-bind="timePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm">
<!-- /ko -->
</div>
</div>
</div>
<button type="submit" style="margin:20px !important;" class="btn pull-right" id="generateReport"><em class="fa fa-repeat"></em> @SharedResources.Index.ShowReport</button>
</form>
</div>Upvotes: 0
K K
Reputation: 18099
You should wrap each element inside a div and give that div class "col". See below:
<div class="card-body" data-bind="if :showParam() || editParameters() ">
<form class="col-lg-12 col-md-12 col-sm-12 form-horizontal" data-bind="submit: submitReportData">
<div id="input-holder" data-bind="foreach:mainData">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="form-group row">
<label class="col control-label" data-bind="text: DisplayText, attr : {'for' : Name}"></label>
<!-- ko if: DisplayMode() == 'Input' -->
<input type="text" data-bind="value: Value" class="col form-control input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Checkbox' -->
<input type="checkbox" data-bind="checked: Value" class="col checkbox input-sm">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Dropdown' && !MultiValue() -->
<select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', value: Value, validationElement: Value" class="form-control input-sm col"></select>
<!-- /ko -->
<!-- ko if: DisplayMode() == 'Dropdown' && MultiValue() -->
<select data-bind="options: ParameterOptions, optionsValue: 'value', optionsText: 'label', selectedOptions: Value, validationElement: Value" multiple style="height:150px !important;" class="col form-control input-sm"></select>
<!-- /ko -->
<!-- ko if: DisplayMode() == 'AutoComplete' -->
<input type="text" data-bind="validationElement: Value, attr : {'id':'autocomplete_' + Name()}" placeholder="@SharedResources.Index.AutocompleteMessage" class="form-control input-sm col">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'DatePicker' -->
<input type="text" data-bind="datePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm col">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'DateTimePicker' -->
<input type="text" data-bind="dateTimePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm col">
<!-- /ko -->
<!-- ko if: DisplayMode() == 'TimePicker' -->
<input type="text" data-bind="timePicker: Value, attr:{'id': Name() }, validationElement: Value" class="form-control input-sm col">
<!-- /ko -->
</div>
</div>
</div>
<button type="submit" style="margin:20px !important;" class="btn pull-right" id="generateReport"><em class="fa fa-repeat"></em> @SharedResources.Index.ShowReport</button>
</form>
</div>
Or modify the html as per https://getbootstrap.com/docs/4.0/components/forms/#inline-forms . Bootstrap has form-inline component too.
Upvotes: 2
Related Questions
- Bootstrap positioning elements
- How do I place sections next to each other in Bootstrap?
- Bootstrap 4 columns going under each other
- CSS Bootstrap: How to line up items?
- How do I align elements horizontally?
- Bootstrap Placing Elements one under another
- Bootstrap columns aren't displayed next to each other
- element side by side in a row
- Putting Elements side by side
- Putting Divs Next to each other using bootstrap