Arranging all text boxes in a horizontal line: A simple guide

Is there a way to align all text boxes in a single row that works properly in both IE and Chrome browsers?

IE 11 display:

https://i.sstatic.net/wGITo.png

Chrome display: https://i.sstatic.net/jXs0r.png

Textboxes are not aligned properly as shown below: [ | ] OR [ |]

HTML code snippet:

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <form #myform="ngForm" (ngSubmit)="submit(myform)" class="form-form-submit">
      <div class="row">
        <div class="form-group">
          <label for="form_dob" class="control-label font-weight-bold">First Name *</label>
          <input type="text" name="fname">
        </div>
        <div class="form-group">
          <label for="form_ssn" class="control-label font-weight-bold">Last Name *</label>
          <input type="text" name="Lname">
        </div>
        <span>
          <div class="col-md-2 col-sm-4">
            <div class="line">|</div>
            <div>OR</div>
            <div class="line">|</div>
          </div>
        </span>
        <div class="form-group">
          <label for="form_ssn" class="control-label font-weight-bold">Code *</label>
          <input type="text" name="Cname">
        </div>
        <div class="form-group" style="padding-top: 30px;">
          <input type="submit" class="btn btn-primary" value="Submit" [disabled]="saving">
        </div>

      </div>
    </form>
  </div>
</div>

Answer №1

<div class="col-md-2 col-sm-4 text-nowrap">
            <div class="line">|</div>
            <div>OR</div>
            <div class="line">|</div>
            </div>

Make sure to add the "text-nowrap" class to the main div and test it out.

Answer №2

Chrome seems to be adding some extra padding, causing this issue to occur in Chrome but not in IE.

If you were to shrink the width of your IE window, you would likely see the same issue there as well.

The problem lies in the design not being responsive enough for smaller screens; when the "Code" element can't fit on the same line as the other elements, it gets pushed down while the "OR" element remains unaffected.

To prevent this from happening, consider structuring your layout like this:

Fname [   ]   Last Number [   ]   

OR 

Code [   ]

You may also want to try this arrangement:

Fname [   ]   Last Number [   ]   

OR  Code [   ]

To achieve this, I recommend wrapping both the "OR" and "Code" elements together so they stay aligned; when one moves, the other will follow.

I've made slight adjustments to your code by adding a wrapper around "OR" and "Code". (using display:flex for vertical alignment)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="jumbotron jumbotron-fluid">
<div class="container">
    <form #myform="ngForm" (ngSubmit)="submit(myform)" class="form-form-submit">
        <div class="row">
            <div class="form-group">
                <label for="form_dob" class="control-label font-weight-bold">Fname *</label>
                <input type="text" name="fname">
            </div>
            <div class="form-group">
                <label for="form_ssn" class="control-label font-weight-bold">Last Number *</label>
                <input type="text" name="Lname">
            </div>
            <div class="form-group" style="display: flex;">
                <div style="display: inline-block;" class="col-md-2 col-sm-4">
                    <div class="line">|</div>
                    <div>OR</div>
                    <div class="line">|</div>
                </div>
                <div style="display: inline-block;">
                    <label for="form_ssn" class="control-label font-weight-bold">Code *</label>
                    <input type="text" name="Cname">
                </div>
            </div>
            <div class="form-group">
              <input type="submit" class="btn btn-primary" value="Submit" [disabled]="saving">
            </div>

        </div>
    </form>
</div>
</div>

Please remember to "open fullscreen" if you run this snippet.

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

How to customize the appearance of an HTML checkbox using custom images for a unique

Does anyone know how to change the default style for: <input type=checkbox...> I want it to use my own styled pictures instead of the default style. Can anyone help? Thank you! ...

AngularJS encountered an unhandled syntax error

My current approach involves utilizing the code below to display data fetched from Parse API into a table using AngularJS and Bootstrap. However, the JavaScript section where I have defined the controller doesn't seem to be running as expected. Below ...

Title menu that can be both dragged and edited

I am currently working on developing an HTML user interface that enables my users to rearrange or organize the menu items or utilities according to their preference, much like the HOME screens on Android or iOS devices. I am seeking advice on how I can s ...

Ways to align text in a table row in a way that it remains positioned at the center of the screen's visible area

Can anyone assist me with this task? I need help centering text within a table row ('Some text here...') so that it always appears in the middle of the screen. The table will have horizontal scrolling. .compare-content { max-width: 480px; ...

overflow with a height of 100%

I want to add vertical scroll bars to my left and right columns without setting the height to 100%. How can I achieve this scrolling effect without specifying height: 100%? html,body{height:100%;} .row > .sidebar-fixed { position: relative; to ...

Determining the total of input values based on identification number

Can anyone help me figure out how to calculate the total sum of the values entered using IDs? I've been struggling with it and can't seem to get it to work. Your assistance would be greatly appreciated. <input type="number" id=&quo ...

Toggling in JS does not alter the DIV element

I attempted to utilize Bootstrap toggle to modify the div HTML content similar to the example shown at with a slight modification, but unfortunately, it did not function as expected due to a discrepancy in my current JavaScript code. I am unsure of what I ...

What is the best way to display the most recent 5 posts with associated images after uploading them from a MySQL database?

The main objective is to display the most recent 5 posts along with their images after they are uploaded to the MySQL database. The project consists of 4 essential files: connection.php - successfully connects to the database new_post.php - allows adding ...

Difficulty in aligning tables with absolute positioning in Internet Explorer compared to Chrome

Encountering an issue with the alignment of elements when using position: absolute; across multiple browsers. In Chrome, everything appears properly aligned within the table. Refer to the following link for a visual: https://i.sstatic.net/qhrAi.jpg Howe ...

Utilizing the overflow feature in conjunction with a specified height

Take a look at this image, the overflow:hidden property is not working as expected and some text is still visible that I want to hide without adjusting the height. How can I achieve this? Focusing on the highlighted area in Red, it is causing irritation. ...

What is causing the Row/Column nested components to exceed the boundaries of the container

As I continue to learn web development, I have encountered an issue that puzzles me. When using a container class at the beginning of my layout and adding a row with two Col-md-6 columns, the content extends beyond the container. The forms inside the two c ...

Issues with concealing the side menu bar in Vue.js

I've been attempting to conceal the side menu bar, with the exception of the hamburger icon when in the "expanded" state. Despite my efforts to modify the CSS code, I am still struggling to hide the small side menu bar. The following images represent ...

What are the steps to implement a horizontal scroll feature on a website when the scroll width is set to 0?

My goal is to enable users to scroll in the web view similar to how they can drag to scroll on mobile devices Check out my sandbox here for reference I have created a sample sandbox with the following code: <!DOCTYPE html> <html lang="en&qu ...

Solutions for missing background in Bootstrap hamburger menu upon clicking

Is there a way to change the background color to white when the hamburger menu is activated in Tablet or Mobile view? I want to customize the appearance by switching the Logo, Title, Nav-links, and Menu button colors to black with a white background inste ...

Fade effect on content in Bootstrap carousel

I am currently making some updates to the website mcelroymotors.com. One issue I have encountered while working on the homepage carousel is that the caption only pops up on the first slide, and does not appear on any of the subsequent slides. I would lik ...

Switching between div elements in ReactJS

I am currently working on a web application built with ReactJS. One feature that I would like to include is similar to the following: https://i.sstatic.net/At1Gw.gif My query is as follows: What is this specific effect called? How can I go about imple ...

Are there ways to implement Vue.js transitions without directly setting the height in the code?

I'm having an issue with a Vue app I created where I need to make an element expand and collapse when a button is clicked. I want the effect to be smooth and animated, but using the <transition> tag alone isn't working as expected. The prob ...

What is the best way to smoothly enlarge a div as new content is introduced?

Is there a way to smoothly expand a div when new content is added? const [render, setRender] = useState(false) const showHide= () => { setRender(!render) } return ( <div className="container"> <h1>TEST ...

Deactivating one div's class upon clicking on another div

Below is the HTML code snippet: <div class="container"> <ul class="navbar"> <li class="nb-link"><a>Home</a></li> <li class="dropdown"> <a>CBSE</a> <ul class="dropdown-menu"&g ...

Creating a Vertical Navbar Dropdown in Bootstrap 3.0 Without Appending to the Last List Item Only

Currently, I'm in the process of creating a panel layout that features an elegant vertical navbar. Although everything seems to be aligned correctly and I've managed to implement a dropdown menu in a vertical layout, it keeps appending to the las ...