What is the method for aligning elements in a single row?

I have integrated bootstrap into my project.

The width of the section is set to 350px.

Below are the HTML elements I am working with:

<form class="form-inline">
    <div class="input-group input-group-sm col-xs-5" >
        <input type="text" class="form-control" placeholder="search">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>

    <div class="input-group input-group-sm">
            <select class="form-control" ng-model="" ng-options="">
                <option value="">- authority-</option>
            </select>
    </div>
</form>

You can view the code on plunker.

I'm looking for a way to align the search box and dropdown list side by side.

cssangularjstwitter-bootstrap

Answer №1

Forget about using css to solve this problem; leverage the power of bootstrap styles instead.

All you need to do is wrap your form in a container that spans 12 columns (col-lg-12), and then wrap each input field in a container that spans 6 columns (col-lg-6). This simple setup ensures proper alignment across different screen sizes, as demonstrated below:

<div class="col-lg-12">
   <!-- start form -->
   <div class="col-lg-6">
      <!-- input field -->
   </div>
   <div class="col-lg-6">
      <!-- input field -->
   </div>
   <!-- end form -->
</div>

By following this structure, bootstrap will automatically divide the screen into two equal parts (12 / 2 = 6) to accommodate your input fields.

To incorporate this layout into your existing code, refer to this fiddle.

Please note: I included col-lg, col-md, col-sm, and col-xs classes to ensure consistent alignment regardless of the screen size.

Additionally, if you want to enclose everything in another panel, use the following structure:

<div class="panel panel-default">
  <div class="panel-body">
     <!-- form row goes here -->
  </div>
</div>

For a functional demonstration, check out the working fiddle link: http://jsfiddle.net/92z54z04/596/

Answer №2

.input-group is displayed as a table, therefore:

.input-group {
  display: inline-table;
}

This solution should address your issue.

JSFiddle link

Answer №3

<form class="form-inline">
    <div class="form-group" >
    <input type="text" placeholder="search"/>

            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>

    </div>

    <select class="form-group"    ng-model="builderStep1.inspectionArchiveData.DomainId"  ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                <option value="">- authority-</option>
    </select>

</form>

Answer №4

If you want to use Bootstrap for this task, simply utilize the col-xs-6 property.

Check out the functional code below:

<form class="form-inline">
    <div class="col-xs-6">
        <div class="input-group input-group-sm" >
            <input type="text" class="form-control" placeholder="search">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
    </div>

    <div class="col-xs-6">
        <div class="input-group input-group-sm">
            <select class="form-control" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                <option value="">- authority-</option>
            </select>
        </div>
    </div>

</form>

Answer №5

If you want to enhance the functionality of bootstrap, one option is to incorporate a select element within your input group. This approach may add a visually appealing aspect to your design and is worth considering based on your specific needs. By leveraging some of bootstrap's styles, you can seamlessly integrate the select element into an input group. For those who have access to the sass or less files, there is an opportunity to refine this process even further.

.input-group-select:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.input-group-select {
  position: relative;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
}

.input-group-select>select {
  border-color: #ccc;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 0;
  border-left-width: 0;
}

.input-group-btn:not(:first-child):not(:last-child)>.btn {
  border-radius: 0;
  border-left-width: 0;
}

.input-group-select:last-child>select {
  border-radius: 0 3px 3px 0;
}

.input-group-sm>.input-group-select>select {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-inline">
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-select">
      <select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                      <option value="">- authority-</option>
              </select>
    </div>
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-select">
      <select ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                      <option value="">- authority-</option>
              </select>
    </div>
  </div>
  <div class="input-group input-group-sm col-xs-5">
    <input type="text" class="form-control" placeholder="search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
    <div class="input-group-select">
      <select class="select" ng-model="builderStep1.inspectionArchiveData.DomainId" ng-options="item.Id as item.Description for item in builderStep1.lookups.domain">
                      <option value="">- authority-</option>
              </select>
    </div>
  </div>
</form>

Answer №6

To implement the style within a div, simply include the following code:

 display:inline-table;

View Demo Here

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

Is it possible to create a CSS1 sprite animation triggered by a mouse hover

Is there a way to create sequential image loading on mouse hover for a CSS1 Sprite, similar to an animation? Please refrain from suggesting CSS3 solutions as not all browsers fully support CSS3 animations. Thank you. ...

cssanimationhovermousesprite

Enhancing Angular 2 functionality: Utilizing component input/output for service property updates

Currently learning Angular 2 and trying to grasp the concept of when to utilize a component's input/output versus updating a service property (potentially coupled with an EventEmitter for required updates). Imagine I have a collection of tasks, each ...

angularjs

Is the navigation taking priority over all other content and adapting responsively alongside it?

My current project involves a responsive navigation, which is functioning properly. However, I am facing an issue with the content not aligning correctly under the navigation bar. I am struggling to find a solution to this problem. If you would like to rev ...

javascripthtmlcss

What steps should I take to eliminate the black border around my input fields?

I recently noticed that there are black boxes around the input area on the form I am creating. Is there a way to remove them? I am using bootstrap, so I'm not sure if that is causing the issue. Any suggestions would be greatly appreciated! https://i.s ...

htmlcssbootstrap-4

Struggling to vertically center input within Bootstrap 4 column

I'm attempting to design some form elements and align the inputs vertically within the columns. I've experimented with vertical-align:middle; and margin:auto 0;, however, neither of these solutions seem to be effective. input { vertical-alig ...

cssbootstrap-4

The onclick attribute on a button in HTML is not functioning properly following the inclusion of an Ajax load

I am facing an issue with a button that is being dynamically loaded from PHP code using Ajax. The button has an onclick attribute that calls a function named viewImage. The Ajax request is triggered every 5 seconds inside the loadImages function. Snippet ...

javascriptphpjqueryajaxtwitter-bootstrap

Error: The object does not have a method called 'to top scroller' and it is causing an uncaught type error

A plugin was obtained from the following link: http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i and the code was attached below in the index.html file. Several jQuery plugins were attempted, but none work ...

javascriptjqueryhtmlcss

SetBootstrapTooltip at the location of the mouse pointer

Is it feasible to implement a bootstrap tooltip that follows the mouse cursor in AngularJS? If not, what other options are available for achieving this functionality? ...

javascriptangularjstwitter-bootstrap-tooltip

Implementing uniform column width in a Material-UI Grid

Looking for a way to create a single column layout with items of equal width using the Material-UI Grid system? Check out this sample code: <Grid container align="center" direction="column"> <Grid item className={classes.item}> < ...

cssreactjsflexboxmaterial-ui

How to attach onclick events to newly created div elements using JavaScript

Having some trouble adding click events to multiple dynamically created div elements. After creating divs with ids a0 through an, I want to assign them click events using a for loop. The problem is that when the click event occurs, I can't identify w ...

javascriptjqueryhtmlcssdom

Using the contents of a text file as text in an HTML document

I've come up with a clever time-saving trick for my website template project. I want to streamline the process of changing large text files by having a separate plain text document that will automatically transfer its contents to a designated paragrap ...

javascriptjqueryhtmlcsstext

Is there a way to ensure that the 'pointermove' event continues to trigger even after the dialog element has been closed?

I am working on a project that involves allowing users to drag elements from a modal dialog and drop them onto the page. I have implemented a feature where dialog.close() is called once the user starts dragging. This functionality works perfectly on deskto ...

javascripthtmlcss

What are alternative methods to customize an AngularJS Bootstrap dropdown / select without relying on jQuery?

I recently came across a great example of an AngularJS Bootstrap-style Select directive that I found intriguing: http://jsfiddle.net/cojahmetov/3DS49/ While this example mostly fits my requirements, it relies on jQuery which is not part of our library st ...

angularjsangular-ui-bootstrap

Scope-specific dynamic variable name

When attempting to create a dynamic variable name within an AngularJS foreach loop, I encountered the following issue: angular.forEach($scope.posts, function (item) { // counter increment counter++; var idPage = 'feed' + counter; ...

javascriptangularjssyntax

Animated Content Sliding out Smoothly from Right to Left Using jQuery

I am attempting to implement a slideout function from the right side using jQuery. I have tried modifying the code for "From Left to Right" but it doesn't seem to be working correctly. Can you please provide me with guidance on how to make the necessa ...

javascriptjqueryhtmlcss

What is the best way to display an entire HTML page within a modal popup?

I recently started learning angularjs and am currently delving into the mean stack. I am using the following code to open an html page and retrieve the id of the user that was clicked on. <a href="/edit/{{ person._id }}"> <button type="button" ng ...

angularjsmean-stack

"Clicking on the radio button does not activate when placed within an <a> tag

Why is it that when the text is clicked, the radio button is checked, and when the little green patch is clicked, the frame is working, but they both don't work at the same time? Any assistance in resolving this issue would be greatly appreciated. ...

htmlcssradio-buttonanchor

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

javascripthtmlioscssxhtml

Display or conceal image description upon mouseover

Attempting to create a portfolio page with images and implementing jquery to display and animate the captions on hover. However, when I attempted to do so, it didn't work with the code I have. The code snippet is provided below for reference. Snippet ...

javascriptjqueryhtmlcss

Angular ng-repeat encounters difficulty in parsing Arabic object

As I create a JSON object that contains Arabic content shown below $scope.arabicContent = ["ردهة","قاعة الاجتماعات","مبرمجين الجوال","المدراء","المحاسبة","المحاسبة","المبرمجين‎","مطبخ‎ ...

javascriptangularjsangularjs-ng-repeat