Issues with spacing in navigation bar

I've been searching and experimenting for hours, but I can't seem to make it work.

In my "inline-form," I have a button on the left, an input field in the middle, and a button on the right within a navbar. Everything displays correctly when the navbar is not collapsed.

However, when I collapse the menu, line breaks appear near each button, causing them to not align in a single line as I intended.

Here is how it appears in the navbar

And this is how it looks in the collapsed menu

Edit: I discovered that this issue only arises at the "sm" breakpoint when the "input-group" receives a width of 100%.

This is the code I am using:

<nav class="navbar navbar-expand-md navbar-dark bg-hv-dark-green sticky-top">
  <a class="navbar-brand h1 mb-0 mr-5" href="/">
    <img alt="" class="d-inline-block mr-1" height="35" src="img/brand.svg" />
    <span class="align-bottom">PAGE TITLE</span>
  </a>
  <button class="navbar-toggler" data-target="#navbarContent" data-toggle="collapse" type="button">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarContent">
    <div class="form-inline ml-auto">
      <button class="btn btn-danger mr-2" onclick="clear()" title="clear" type="button">
        <span class="fas fa-user-slash fa-fw"></span>
      </button>

      <div class="input-group my-2">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <span class="fas fa-money-bill-wave"></span>
          </span>
        </div>
        <input class="form-control text-right" id="total" readonly="readonly" type="number" value="0.00" />
        <div class="input-group-append">
          <span class="input-group-text">
            <span class="fas fa-euro-sign"></span>
          </span>
        </div>
      </div>

      <button class="btn btn-warning ml-md-2" onclick="save()" title="save" type="button">
        <span class="fas fa-save fa-fw"></span>
      </button>
    </div>
  </div>
</nav>

Answer №1

Applying flex-nowrap to the form-inline will prevent content from wrapping...

   <div class="collapse navbar-collapse" id="navbarContent">
        <div class="form-inline flex-nowrap ml-auto">
            <button class="btn btn-danger mr-2" onclick="clear()" title="clear" type="button">
                <span class="fas fa-user-slash fa-fw"></span>
            </button>
            <div class="input-group my-2">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <span class="fas fa-money-bill-wave"></span>
                    </span>
                </div>
                <input class="form-control text-right" id="total" readonly="readonly" type="number" value="0.00">
                <div class="input-group-append">
                    <span class="input-group-text">
            <span class="fas fa-euro-sign"></span>
                    </span>
                </div>
            </div>
            <button class="btn btn-warning ml-2" onclick="save()" title="save" type="button">
                <span class="fas fa-save fa-fw"></span>
            </button>
        </div>
    </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

What could be the reason for the recurring presence of duplicate <a> tags in my

I've implemented the bootstrap "pager" feature from the pagination section. Here is how I'm using PHP to generate the HTML code for it: echo "<ul class='pager'>"; echo ($total > $lim) ? "<li class='previous'>" ...

Using setTime in JavaScript allows for customizing and adjusting the

I'm having trouble getting this code to display the time. I thought it would work, but it's not showing the time. Can someone please help me figure out what's going wrong? function startTime() { var currentTime = new Date(); ...

Creating a Vertical Stack of Three Divs in ReactJS

Just Getting Started: As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success. I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to b ...

Struggling with inserting a fresh form into every additional <div> section

During my quest to develop a To-Do list application, I encountered a new challenge. In my current implementation, every time a user clicks on New Category, a new div is supposed to appear with a custom name and a specific number of forms. However, an issu ...

Update the appearance of an element in real-time using VUEJS

I am trying to use VueJS to dynamically change the position of a div. In the data function, I have a variable called x that I want to assign to the top property. However, the code I wrote doesn't seem to be working. Here is what it looks like: <tem ...

"Enhance User Interactions with Angular-ui Tooltips Featuring

I recently integrated bootstrap tooltips into my application. While the "normal" tooltips are working fine, I encountered an issue with tooltip-html-unsafe. It seems to display an empty tooltip. Here is my tooltip code: <a><span tooltip-placeme ...

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

Eliminate the need for pressing the "tab" key on my website

I'm currently working on a horizontal web page layout and I'm looking for a way to disable the "tab" button functionality on my page. The issue arises because I have a contact form with textboxes located in the last div, and when users navigate u ...

Tips for resolving flickering animations in CSS and JavaScript

Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner. In the prov ...

Displaying images with text below on the navigation bar, complemented by a sleek dividing line

I have a design in mind where I want to display 3 images at the top of a navbar, followed by centered text directly underneath each image. The spacing of the images seems to be even, but I'm not sure if this is just a coincidence or if I need to speci ...

What is the best way to incorporate audio playback while browsing files on an HTML5 webpage with TypeScript?

<input type="file" id="soundUrl" (change)="onAudioPlay()" /> <audio id="sound" controls></audio> This is the HTML code I'm working with, and I'm looking to trigger audio playback after a user selects an MP3 file using TypeScrip ...

What could be causing my textarea-filling function to only be successful on the initial attempt?

Programming: function updateText() { $("body").on("click", ".update_text", function(event) { $(this).closest("form").find("textarea").text("updated text"); event.preventDefault(); }); } $(document).ready(function() { updateText(); }); H ...

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

Center the text within the div and have it expand outwards from the middle if there is an abundance of text

I have a div that is in the shape of a square box and I want it to be centered. No matter how much text is inside, I would like it to remain in the middle. I am using JQuery to create my square box and would like to center it using CSS. Here is my code: &l ...

Optimizing Bootstrap Carousel Size

How can I create a carousel using Bootstrap without it taking up the entire window and hiding other div elements? Any suggestions on how to fix this issue would be greatly appreciated. I found this example during my research, but I'm still struggling ...

Newly designed Bootstrap 4 input field with search feature positioned off-center on smaller screens

I have successfully positioned an input text next to a button as shown below: While it displays perfectly on a regular computer screen, the alignment gets skewed when viewed on a phone device: This is the functional code I am using: <!-- Add Filer Fo ...

Angular 8 carousel featuring a dynamic bootstrap 4 design with multiple images and cards displayed on a single slide

I am currently working on a dynamic carousel that should display multiple cards or images in one row. Initially, I faced an issue with the next and previous buttons not functioning properly when trying to display multiple cards in one row. After some onlin ...

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

Can Spring Boot be set up to return JSON instead of HTML for InvalidTokenException when configuring OAuth2?

When testing my Spring Boot application, I realized that querying one of my REST endpoints with an invalid token using Postman resulted in a response content in HTML format instead of JSON. The endpoint correctly responded with 401 InvalidTokenException, b ...

Fixed position of the rotated button placed at a 90-degree angle on the right side of the screen

Recently, I had a project where I had to include a div that was rotated 90 degrees and fixed to the right side of the screen. The challenge was making sure that as you scrolled down, the button moved along with the screen while maintaining responsiveness. ...