Issue with Bootstrap's form-inline element causing incorrect spacing in btn-group

I'm having an issue with Bootstrap components.

When I try to input numbers, everything works fine as long as I don't use form-inline or a navbar.

Check out my fiddle here: http://fiddle.jshell.net/6Lrhcezb/

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

The first input looks good... But when I focus on the second input, it doesn't resize correctly.

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

Can this be fixed with Bootstrap, or do I need to create my own div control?

Thank you!

--

This issue is happening with Bootstrap version 3.5.5.

I've updated the Fiddle to show you the problem: http://fiddle.jshell.net/6Lrhcezb/4/

Answer №1

Hey everyone, I recently encountered this issue with the 3.5.5 bootstrap version.

I've made some changes in the Fiddle to demonstrate the problem I'm facing...

http://fiddle.jshell.net/9Kwfpnjd/2/

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

Loading a link within a Vue.js component is a seamless process

Looking to incorporate an external URL into my Vue Application while keeping the Toolbar and Sidebar intact within a component. Any suggestions on how I can achieve this? Thanks in advance ...

Retrieve the generated HTML output by executing an EmberJs.Handlebars template in Ember.js

I've been on the lookout for a while now, trying to figure out how to extract HTML when evaluating a template. Handlebars makes this task very simple: var source = $("#entry-template").html(); var template = Handlebars.compile(source); var context ...

In what way does this anchor element close the popup window?

Recently, I followed a tutorial on creating modal windows with HTML5 and CSS3. What caught my attention was how the anchor tag was used to close the popup window. The code snippet below showcases this functionality: <div id="openModal" class="modalDial ...

Resolve issues with vue js checkbox filtering

As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...

How can I dynamically insert new div elements into a webpage with JQuery's .load method?

I want to constantly add new content instead of replacing the existing one in #message_here. How can I achieve this by generating new divs for each message? var last_mess_id = 1; $('#load_mess').click(function(){ $('#message ...

performing asynchronous operations with async functions within the array.map() method in JavaScript

My goal is to loop through an array of elements, check if a theme exists for each element using the "findOne()" function, and if not, create a new theme, save it, and make some changes. If the theme already exists, I just need to apply some changes and the ...

Notes should be added to the Flutter page when it is executed on the emulator

I am working with 2 widgets in my project: ProjectPage and ProjectPageWeb, both of which have similar functionalities in displaying an iframe. The difference lies in the fact that they use different components to achieve this. ProjectPage utilizes the Web ...

How can I invoke a PHP script using AJAX?

I am currently working on implementing a feature that involves multiple tables where users can move table rows between the tables. I want to use ajax to call a php script that will update the database with the new values, specifically assigning a new paren ...

Retrieve information from an HTML input field that does not have an assigned ID or name

I am facing a challenge with an HTML table that contains multiple inputs which do not have any id or name attributes. I need to retrieve data from these inputs but struggling due to the lack of identifiers. Upon inspecting the DOM, I noticed that each inp ...

Guide on implementing the HTML5 fullscreen API for a div's background image

Is it possible to apply HTML 5 fullscreen API to the background image of a div? <div class="bgimg" style="background-image:url('img/home-1.jpg')" /> <img src="img/fullscreen.png" id="fullscreen-btn"> </div> I am trying to m ...

JS Plugin Loading Problem

What combination of libraries/frameworks would work best for optimizing performance in an HTML5/CSS3/JS app with moving elements? I have done some research, but I am venturing into unfamiliar territory when it comes to performance. Are there key principles ...

What is the method for updating the inner html of an image tag in HTML?

Displayed below is the current output: <img width="1080" height="1080" src="/image.jpg" class="post-image" alt="image" /> In order to change it, I must replace src with data: <img width="1080" height="1080" data="/image.jpg" class="post-image" ...

Error message displayed when pressing a button on React Native: "Uncaught Error in Redux - Actions must be plain objects. To handle async actions, use custom middleware."

Recently, I delved into the world of React-Native and Redux. While most of the integration went smoothly, I encountered a roadblock when trying to dispatch actions. Every attempt resulted in the error 'Redux Uncaught Error: Actions must be plain objec ...

What is the best way to connect two buttons in separate divs?

I'm facing a challenge of adding two buttons side by side when they are located in different div elements. I've tried using the float property in the btn-group, but it interferes with the functionality of the dropdown and affects the animation. H ...

The drop-shadow filter is not functioning properly on the dropdown menu in Safari

https://i.sstatic.net/PIWly.png --> image displayed when the "products" Nav item is hovered, showing a dropdown menu https://i.sstatic.net/YHX1g.png --> image of the "products" Nav item after hovering is removed (shadow remains even when the dropdow ...

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

I am seeking a bookmarklet that, upon clicking, will access JSON data and retrieve the "temp" information to display in an alert indicating the weather with just one click. Is there a method to achieve this or do I need to utilize a different API? Here&ap ...

"Implementing a nested drawer and appbar design using Material UI, along with incorporating tabs within

I am currently working on an app that includes tabs for different files, each of which requires its own drawer and appbar. I found a codesandbox example that is similar to what I am trying to implement. Here is the link to the codesandbox One issue I hav ...

Tips for successfully incorporating a jQuery plugin into your React project

I'm attempting to incorporate the Air Datepicker library by t1m0n into my React application, but I'm encountering difficulties. import React from 'react'; import AirDatepicker from 'air-datepicker'; class Datepicker extend ...

Struggling to send an object through a node route for rendering a page?

Currently tackling a node.js project using express.js. I have a route that renders an ejs page and passes along the team object. Strangely, when I try to access <%= team.member.name %>, it returns as undefined despite the information being present. A ...

Click the link to expand the picture

@foreach (var item in Model) { <img src='ShowShowcaseImage/@Html.Encode(item.ProductID)' id='@item.ProductID' /> <b>@Html.DisplayFor(m => item.ProductName)</b> <a href="#" class="enla ...