Understanding the behavior of Bootstrap input-groups when containing hidden sub elements

In a scenario where a button and an input field are enclosed within a div with a bootstrap class named input-group, they expand to occupy the entire width of the enclosing element. However, if the button is hidden, the input field unexpectedly contracts to a default length instead of maintaining the full width. The situation is illustrated as follows:

To examine the code related to this issue, please refer to the following link: http://jsfiddle.net/1gu6qnhk/1/.

In essence, the problem can be demonstrated by the following code snippet:

<head>
<style>
.group {
    display: table;
}
.input {    
    width: 100%;
}
.item {    
    display: table-cell;
    width: 1%;
}
</style>
</head>
<body>
<div class="group">
    <input class="input" />
    <span class="item"></span>
</div>
<div class="group">
    <input class="input" />
    <span class="item">text</span>    
</div>
</body>

The question arises as to why the first div expands to the full width while the second div only occupies a fraction of the available width, given that the sole distinction is the presence of text within the span element in the second div.

For a live demonstration, visit the following Fiddle link: http://jsfiddle.net/Lbyjo79e/1/

Answer №1

Check out this form for a different approach: http://jsfiddle.net/4s32d8ve/

<div class="form-group">
    <input class="form-control" value="The next span contains text" />
<span class="item">
text content here
</span>

</div>
<div class="form-group">
    <input class="form-control" value="The next span is blank" />
<span class="item">

</span>

</div>

Answer №2

The solution to this issue is to set the width of the parent element to 100%. (http://jsfiddle.net/Lbyjo79e/2/)

.group {
    display: table;
    width: 100%;
}
.input {
    width: 100%;
}
.item {
    display: table-cell;
    width: 1%;
}

A similar problem occurs with table elements. For example:

td {
    width:100%;
    border: 1px black solid;
}

<table>
    <td>two cells</td>
    <td></td>
</table>
<table>
    <td>one cell</td>
</table>

In this case, the first table takes up the full width while the second table only takes up a portion. To fix this issue, set the width of the table to 100%. Check out the fiddle at http://jsfiddle.net/bkngop0f/.

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 was the reason for needing to employ `toObject()` in mongoose to determine if an object contains a certain property?

From what I understand, there is no .toObect() function in JavaScript, but it is used in mongoose to convert mongoose documents into objects so that JavaScript built-in functions can be used. I sometimes struggle with when to use it. There are instances w ...

Django RGBField cannot locate jQuery

Working on a project that utilizes an RGBField, the following script is injected into the template (nested deep within django's structure, as its exact location remains elusive): <script type="text/javascript"> (function($){ ...

Why does the onBlur event function in Chrome but fails to work in Safari?

I've encountered a problem with the onBlur event in react-typescript. To replicate the issue, I clicked the upButton repeatedly to increase the number of nights to 9 or more, which is the maximum allowed. Upon further clicking the upButton, an error m ...

Is it possible to change between universal and spa mode based on the query string?

Currently, I am working on a Nuxt.js application set to universal mode and deployed as a static website using nuxt generate. The app is pulling data from a GraphQL API linked to a CMS, and everything is functioning properly. Whenever content is updated in ...

Using AngularJS to apply custom css to a tag within a directive for creating a Bootstrap sticky footer

Currently, I am in the process of developing my very first AngularJS application with Bootstrap as the responsive framework. In order to achieve a sticky footer, I usually utilize jQuery to determine the outerHeight of the footer and then apply that value ...

Sending a multi-level property object to the controller in a post request

I am facing a challenge where I need to transfer an object from the view to the controller, and the model comprises a list of objects, each containing another list of complex objects. Let's consider the following models: public class CourseVm { p ...

Utilize Moment to round a date either up or down

I am using Moment to compare two datetime values. Specifically, I am utilizing Moment.isSameOrBefore function. However, my two date values are slightly different due to milliseconds. I want these two values to be considered the same: var date1 = ' ...

JavaScript for switching between grid layouts

I have organized 3 DIVs using a grid layout. There is a Navigation bar with an on-click event attached to it. When a button on the nav-bar is clicked, I want the JavaScript function to display the corresponding grid associated with that button. Currently, ...

Exploring sections of a GLTF import within the primary rendering loop (apologies for any beginner questions)

As a Unity developer venturing into learning Three.js, I've come across a seemingly simple yet frustrating issue. My goal is to import and animate a 3D logo consisting of four separate meshes (elem1 to elem4) in my Three.js application. After exporti ...

React's UseEffect can cause an endless loop of renders, leading to the error message "Maximum update

My Cart component contains an array of Cards. Whenever a user removes a product from the cart, it is removed from both the local storage and the UI. import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom&a ...

Images not showing in Vue.js

I have been working on setting up a carousel using bootstrap-vue. It is being generated dynamically through an array containing three objects with keys such as id, caption, text, and image path. The issue I am facing now is that while the caption and text ...

Identify the current slide or div within a jQuery slideshow

I am currently facing an issue with my slide show that is composed of divs, each containing a picture and some html controls. The problem arises when clicking on a control in a slide other than the first one - it only updates the first slide. The only thin ...

Counting each item with jQuery and assigning them numbers 02, 03, 04, etc., with the exception of the first item which will display as "Up Next

I'm still learning jQuery and here's the code I've put together after researching on stackoverflow and other platforms: var counter = 1; $('.next-page .nav-item').each(function () { if ($(this, ':gt(0)')) { $(this ...

Circular Dependencies in Singletons within CommonJS Modules

I am pondering the possibility and method of achieving the following: In a CommonJS environment, using modules for both node and browser (with Browserify). I have two (or more) modules that each return a singleton object that needs to be accessed in diff ...

Unique alphanumeric code following the inclusion of a JavaScript file

I'm encountering an issue with a webpage that incorporates two JavaScript files. When inspecting it using firebug, I noticed that every time the page loads, these two files are included with the prefix ?_=someRandomNumber I'm unsure about the or ...

The proper usage of middleware in vue-router

I've set up routes in Vue and added some middleware conditions before each route, but it's not functioning as expected. Below is the content of my router/index.js file: const token = computed(() => useAuthStore().token); // Main Router cons ...

The error message "TypeError: Router.use() expects a middleware function, but received a [type of function]" is a common occurrence in FeathersJS

Struggling to bind a method to my /userAuthenticationInfo route, I've made several adjustments in my code based on other posts related to this issue but still unable to make it work. I am using feathersJS's express implementation, and even with e ...

Utilizing Vue's v-for directive to manipulate data through custom looping

When I loop through my data using v-for, I find myself unsure of how to display the data with a custom looping method, such as using modulus. I aim to display the data in groups of three items, assigning a different class to every 3 items. The desired st ...

What is the process for setting an object's property as a href in an AJAX call?

I've got a quick query. How can I assign an object's property to the href attribute? I've indicated the line with a comment. success: function (listOfTags) { let tagData = ''; $.each(listOfTags, function (i, tag) { ...

How come JavaScript variables are able to persist on JQuery Mobile multi-page templates on desktop browsers, but not on mobile browsers?

My website was created using the jQuery Mobile multi-page template. While testing it on Chrome desktop, I noticed that my JavaScript variables (comics and checkedItems) retain their values when navigating between pages. However, on mobile devices, these ar ...