Div containing elements positioned side by side

<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

I have a grouped element containing various input types like text fields, datepickers, and dropdown lists. These elements are stacked vertically, but I want them to be displayed horizontally. Can I use the 'row' class for each element to achieve this layout?

<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
htmlcssbootstrap-4

Answer №1

For better organization, wrap each element in a div with the class "col". Here's an example:

      <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>

Alternatively, you can refer to https://getbootstrap.com/docs/4.0/components/forms/#inline-forms for Bootstrap's form-inline component.

Answer №2

If you want to, you have the option to convert .form-group.row into a 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Bootstrap 4 Navbar featuring multiple split navigation bars remains expanded at all times

In this particular version, I am facing an issue where only the first menu item is displayed in the tablet menu. However, when I apply the style display:flex; to #navbarsExampleDefault, it does show the other menu items, but it also prevents me from collap ...

jquerytwitter-bootstrapbootstrap-4navbarhamburger-menu

Getting the most out of fonts with Webpack sass-loader

I recently set up a custom font in my project like this: $font-path: '~@/assets/fonts/'; @font-face { font-family: 'mainFont'; font-weight: 300; font-style: normal; src: url('#{$font-path}mainFont/mainFont.eot&apos ...

cssfontswebpackvue.jssass-loader

How to iterate through a "for" loop in JavaScript using Python-Selenium?

In my current project, I am utilizing Javascript to gather data from an HTML page using Selenium. However, I am facing a challenge where I am unable to execute the multi-line for loop in the Javascript portion on my computer through Selenium with Python (S ...

javascriptpythonhtmlseleniumselenium-webdriver

What is the best way to condense all nested elements within a parent element?

I have a collapse element that contains some nested collapse elements. I am trying to make sure that when the parent collapses, the nested item also collapses. Although it appears to collapse when closed, it does not stay collapsed when I reopen the paren ...

htmlcsstwitter-bootstrapbootstrap-5

Choosing multiple classes using Xpath

<div class="unique"> <a class="nested" href="Another..."><img src="http://..."/></a> <p> different.... </p> <p><img src="http://....." /></p> </div> I have this interesting HTML struc ...

pythonhtmlxpathhtml-parsinglxml

Lining Up Radio Buttons Horizontally Using CSS: Alignment Issues in Mozilla and Chrome

I have recently started learning CSS and am facing an issue with the alignment of radio buttons. They do not align properly in Chrome and Firefox, although they display correctly in Explorer. Any assistance on this matter would be greatly appreciated. Th ...

javascripthtmlcss

Why is the navbar toggle malfunctioning despite having all necessary dependencies in Angular?

Recently, I've been tackling the challenge of implementing a Navbar with collapse menu and dropdown links using Bootstrap 4 and Angular 6. However, I've hit a roadblock as the Navbar is not functioning as expected. Although the elements seem to r ...

angularbootstrap-4

Connecting JavaScript and jQuery scripts

Help needed! I am a beginner in the world of jQuery and JS. Unfortunately, my JS/jQuery code is not running and I can't figure out why. Can someone please take a look at my HTML and guide me on what might be causing the issue? Do I need to add some ad ...

javascriptjqueryhtmlcss

Using Swift Mailer to add a subject to an email by including the 'mailto:' HTML tag

I am currently using Swift_mailer in PHP to send out automated emails. Recently, I have been tasked with enhancing the email messages by including contact information. To enable users to provide feedback, I want to utilize the html 'mailto' funct ...

phphtmlswiftmailer

What steps should I take to successfully implement a div ID selector in an HTML document?

<div id="nofries"> <h1 class="restaurant mt-5 ms-3">CRAZY GREEKS</h1> <h3 class="ms-5">GREEK FOOD, SUBS &amp; PIZZA</h3> </div> I'm having trouble with my div ID "nofries" not ...

htmlcssbootstrap-4

Is there a CSS Grid that supports IE6+ with percentage-based layouts?

Seeking a sleek CSS grid system that is percentage-based with 12 columns and works well on IE6+ as well as all modern browsers. Support for nested columns would be a bonus but not mandatory. Many grids out there lack compatibility with IE6 or are based sol ...

cssinternet-explorer-6percentagegrid-layout

When submitting the form, a new browser tab opens displaying a blank PHP script

Currently revamping my website using a template and editing the content with notepad++. Struggling to display a success message on the contact me page after form submission. The issue arises when I submit information in the text boxes and click submit, it ...

javascriptphpajaxhtml

How can I change :hover to a clickable element instead?

I attempted to create a full-width accordion with the following code: .page { margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } .content { -webkit- ...

javascriptjqueryhtmlcss

Steering your pop up to the top with CSS

Seeking advice on how to position my pop-up at the top of the page and resize it to better fit the screen. Here is where you can find my landing page: yogavoga.com/2weekdiet Grateful for any assistance provided. .modal-content { margin: 5px auto; bac ...

htmlcsspopup

personalized styles based on user preferences

My website features a gaming section where users can view quick status updates of their stats using colors like blue, red, and green. I am looking to generate something similar for each user. Here is what I have so far: <style> .box2 { height: ...

phpcss

The jQuery plugin functions smoothly when running on localhost, but it causes issues with the background image when deployed on the web

I created a compact plugin to show a cookie message. While testing it on my local machine, everything functioned smoothly without affecting any web pages. However, once I transferred the files to the server, I encountered issues such as: A background ima ...

javascriptjqueryhtmlcss

Sticky positioning and visible overflow restrictions

When position sticky is used within a container with overflow:hidden, it does not work as expected. However, the overflow hidden property is necessary in this case. <div class="lg:col-start-7 lg:col-end-13" style="overflow:hidden"&g ...

htmlcssimageoverflowsticky

Troubleshooting issues with Bootstrap's responsiveness configuration

I've been working on creating a responsive user login page using Angular 5. It looks great on full-screen display. https://i.sstatic.net/YQrL5.png However, when I resize the browser window, the responsiveness seems to break. https://i.sstatic.net/4 ...

htmlcssangulartwitter-bootstrapbootstrap-4

Discover the method for invoking a Javascript function within a Leaflet popup using HTML

Upon clicking on a marker on the leaflet map, I aim to trigger a popup box that contains five elements: Title Description Image Button (Next Image) Button (Previous Image) To achieve this, I attempted to include a custom popup for each feature ...

javascripthtmlvue.jsleaflet

Functionality of JavaScript limited within a form

Here is some HTML code I am working with: <div class = "login"> <form> <input type="text" id="username" name="username" placeholder="Username" style="text-align:center"> <br> <br> <input type="pa ...

javascripthtml