Is it possible to switch the orientation of the input fields from vertical to horizontal?

My custom form is displayed below:

<form novalidate class="form-group" ng-hide="tab==1">
    Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /> 
    Min Price: <input type="number" ng-init="minNum=0" class="form-control" min="0" step="1000" ng-model="minNum" />
    Max Price: <input type="number" ng-init="maxNum=0" class="form-control" min="0" step="1000" ng-model="maxNum" />
    <button class="btn btn-primary" ng-click="updateNumArray(revNum, minNum, maxNum)">Filter</button>
</form>

Below is the content of my style.css:

input {
    width: 100px;
}

This is how it appears in my browser:

What modifications should I make to achieve a similar look like this:

Answer №1

Check out these different possibilities..

http://www.example.com/abc123

One option utilizes col-* to display a single row of inputs, but there may be some spacing between each input. For a more compact layout without as much spacing, you could try something like this:

<form novalidate="" class="form-inline" ng-hide="tab==1">
  <div class="form-group">Minimum Reviews:<br><input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum"> </div>
  <div class="form-group">Minimum Price:<br><input type="number" ng-init="minNum=0" class="form-control" min="0" step="1000" ng-model="minNum"> </div>
  <div class="form-group">Maximum Price:<br><input type="number" ng-init="maxNum=0" class="form-control" min="0" step="1000" ng-model="maxNum"> </div>
  <div class="form-group"><br><button class="btn btn-primary" ng-click="updateNumArray(revNum, minNum, maxNum)">Apply Filter</button> </div>
</form>

Answer №2

When using Bootstrap, the default display setting for inputs is block with a width of 100%. If you want to change this behavior, you can override it by applying the following CSS:

 input {
  display: inline-block !important;
  width: 100px !important;
}

See Example

Answer №3

Try applying inline-block, flexbox, or float to the input elements - playing around with these properties can help you understand their effects better and improve your skills!

Answer №4

Bootply - SEE DEMO

In order to improve the styling of your form, it is recommended to enclose your input and text (excluding the button) within a separate span tag and apply the CSS property inline-block;.

HTML:

<form novalidate="" class="form-group" ng-hide="tab==1">
  <span class="form-span">Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum"></span>
  <span class="form-span">Min Price: <input type="number" ng-init="minNum=0" class="form-control" min="0" step="1000" ng-model="minNum"></span>
  <span class="form-span">Max Price: <input type="number" ng-init="maxNum=0" class="form-control" min="0" step="1000" ng-model="maxNum"></span>
  <button class="btn btn-primary" ng-click="updateNumArray(revNum, minNum, maxNum)">Filter</button>
</form>

CSS:

.form-span {
    width: 200px;
    display: inline-block;
}

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

Converting units to rem dynamically in CSS: a comprehensive guide

Hey there, I'm currently trying to dynamically convert units into rem in CSS and facing some issues. I have set the root font-size as 23px The current font-size is 16px The expected result should be 16 / 23 => 0.695rem Question: I am looking for ...

Retrieve data from the MySQL database based on the search input field and dynamically update the options in the

I'm facing a programming challenge that I perceive to be at an advanced level for me. Currently, I have a custom search field in my registration form. However, I am looking to transform it into a dropdown menu that pulls user values from MySQL databas ...

Effortlessly browse through directory with the seamless integration of AngularJS or

Hey there! I'm working on a really cool feature - creating a list with editable inputs. However, I've encountered a bit of an issue. Is there any way to navigate through this list using arrow keys and focus on the desired input? .content ul { ...

What is causing the issue where Multiple file selection does not work when using the multiple attribute

I am having issues with uploading multiple files on my website. I have created an input field with the attribute multiple, but for some reason, I am unable to select multiple files at once. app.html <input type="file" (change)="onChange($event)" req ...

What is the best way to exchange configuration data among Javascript, Python, and CSS within my Django application?

How can I efficiently configure Javascript, Django templates, Python code, and CSS that all rely on the same data? For example, let's say I have a browser-side entry widget written in Javascript that interacts with an embedded Java app. Once the user ...

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...

"Implementing form validation in a React application using Bootstrap displays error messages preemptively

I am facing an issue with the code for form validation in React. The error message is appearing for all fields before hitting the submit button. I want the error message to be displayed only when I click on a particular box, and then the corresponding erro ...

Tips for creating dynamic rope animations with canvas and CSS3 styling

Interested in creating a canvas animation, or possibly using CSS3 for the same purpose. Looking to add an automatic rope animation, similar to it swaying gently. I've searched for scripts and other solutions, but haven't found anything suitable. ...

Expanding a responsive HTML background image using Javascript

I've spent countless hours grappling with this code, attempting to dynamically resize the background of HTML based on the browser window size using JavaScript. Here's what I have so far (I'm using Firefox for this): GM_addStyle('body ...

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

There are numerous dynamically designed websites where divs or images shrink as the browser size decreases. A great example of this is http://en.wikipedia.org/wiki/Main_Page The div containing the text shrinks proportionally to the browser size until it ...

A step-by-step guide to showcasing dates in HTML with Angular

I have set up two datepickers in my HTML file using bootstrap and I am attempting to display a message that shows the period between the first selected date and the second selected date. The typescript class is as follows: export class Datepicker { ...

Unable to establish proper functionality of username variables in Node.js chat application

For my latest project, I am developing a chat application in node.js following a tutorial from socket.io. The main objective of the app is to allow users to input their username along with a message, which will then be displayed as "username: message" in t ...

Designs created using ASCII characters in HTML that are not under my control

Hey there! I've been attempting to incorporate some ASCII art onto a website that I don't have control over. When I input text into their editor, it is then enveloped in <p> tags which makes adding ASCII art quite challenging. Firstly, I ca ...

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

I encountered an issue in Chrome and Explorer while attempting to set a CSS property for a pseudo element :after. (I'm trying to create a styled burger nav icon) The error message I received was: 'Unknown property name' This happened wh ...

Personalize the tooltip feature in highchart

I am looking to enhance the tooltip feature in HighChart. Currently, on hover of my bar chart, only one value is displayed in the tooltip. However, I would like to display three values instead. Here is a snippet of my code: $(function () { $( ...

A guide to placing tooltips dynamically in highcharts column charts

I am encountering an issue with tooltips in Highcharts column charts. The problem arises when the series fill up my chart, causing the tooltip to be hidden below the series and cut off by the end of the div. You can see an example here: https://i.stack.i ...

Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

My goal is to extract the username and / values from a series of gists on Github Gists. The challenge lies in the fact that there are no identifiable classes or IDs for the / value. https://i.stack.imgur.com/9d0kl.png Below is the HTML snippet with a lin ...

I recently encountered an issue where the Google Chrome Element Inspector (Developer Tools) unexpectedly removed an HTML element from

While using WordPress, I noticed a strange issue on the admin side when utilizing Google Chrome v.32 Element Inspector (Developer Tools) - some of the elements in my HTML seem to disappear. However, when I view the page without the Developer Tools, all the ...

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

Extracting data from a JSON format in Flask is a crucial task that can be

Can someone please help me with extracting data from JSON format? I am trying to create a search input in JSON and then retrieve information from MYSQLdb. Here is the data I have: {"result":[[21,"bogdan333","bogdan333",0,"","templates/UPLOAD_FOLDERp7.jpg" ...