Filling the void with Bootstrap when the input is concealed

I am new to bootstrap and recently encountered a situation similar to the scenario depicted in the image below:

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

In the first image, the input field labeled "manipuleo" is visible, but in the second image, it is hidden. I would like to dynamically fill the empty space left by hiding "manipuleo" with the next input field (in this case, "Impuesto Producto"). Is this achievable using Bootstrap and jQuery?

Below is the code structure I am working with:

@ControlGAS.Office.Resources.Resources.ControlGAS.ComplementaryData 

    <div id="SectionCommonInputs">

        <div class="form-group form-material floating row">

            <div id="OptHazardousCLSId" style="display:none" class="col-md-4">


            </div>

            <div id="OptWasteMgmtCLSId" style="display:none" class="col-md-4">

            </div>



            <div id="OptHandlingSpecialSCLSId" style="display:none" class="col-md-4">


        </div>

    </div>

    <div class="form-group form-material floating row">

        <div class="col-md-4">


        </div>

        <div class="col-md-4">

        </div>


        <div class="col-md-4">

        </div>

    </div>

 </div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here is a suggested structure for your form:


<form action="">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_id_1"></label>
                <select name="" id="select_id_1"></select>
                <select name="" id=""></select>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_id_2"></label>
                <select name="" id="select_id_2"></select>
                <select name="" id=""></select>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="select_id_3"></label>
                <select class="d-none" name="" id="select_id_3"></select>
                <select name="" id=""></select>
            </div>
        </div>
    </div>
</form>

To improve accessibility, consider adding labels for each input field like this:


<div class="form-group">
    <label for="select_id_1_a"></label>
    <select name="" id="select_id_1_a"></select>
    <label for="select_id_1_b"></label>
    <select name="" id="select_id_1_b"></select>
</div>

If you need to hide certain inputs, you can use the 'd-none' class (Bootstrap 4+) on both the input and its label.

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

Enhance Vaadin with custom validation and content mode options

Validation is needed for certain fields. The captions of the fields contain various formatting elements such as ", ", etc, with the option captionAsHtml="true". However, when using someField.addValidator(..., errorString), the error message displays both ...

htmlvalidationvaadinvaadin7contentmode

Bootstrap 2.0.3: Accordion Collapse feature no longer functioning

Previously, my accordion functioned perfectly with Bootstrap 2.0.2, utilizing data-toggle="collapse" and data-parent="#selector". However, after upgrading to version 2.0.3, the accordion stopped working as expected. While it still opens and closes the des ...

javascripttwitter-bootstraphtml-tableaccordion

Having issues with the Jquery tablesorter plugin when attempting to prevent headers from being sorted

Can anyone help me with a sorting issue I am having with a table on my website? I am using the jQuery plugin tablersorter to sort the table, but I have two headers that I do not want to be sortable. I tried to disable them using the example provided on the ...

javascriptphpjqueryhtmltablesorter

Step-by-step guide on invoking a custom directive from an Angular controller

My directive relies on certain input parameters. I need to trigger that directive from an Angular controller whenever those input parameters change. Here is my directive code: var app = angular.module('App', ['ui.bootstrap']); ap ...

htmlangularjs

Implementing Angular JS to Fill a Drop-down Menu with JSON Data

Here is my HTML code: <body ng-app="mainApp"> <div ng-controller="myController"> <select> <option ng-repeat="person in persons">{{ person.data }}</option> </select> </div> </body> This is my JavaScript ...

htmlangularjsjson

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

javascripthtmlangulartypescriptionic4

Is it possible for the .find() method to extract values from <a> tags?

I'm currently working on retrieving values from an anchor tag using jQuery instead of a button in my HTML. I want to style it with images because a button doesn't match the look of my website. Here's what I've been trying: var mssg_i ...

javascripthtmljqueryajax

AngularJS - ng-style fails to dynamically update the CSS background property

There's a service I'm using that returns image URLs, and I call it with the following code: angular.forEach(results, function (item) { item.img = "/images/searchItem.jpg"; $http.post("https://my.api.com/?id=" + item.id).success( ...

javascripthtmlcssangularjs

"Encountering an Error in Obtaining Geolocation: KCLError

I have been working on a website that utilizes HTML5 Geolocation. Click here to view the code I am using: The HTML: <button onclick="getLocation()">Try It</button> The Javascript: function getLocation() { if (navigator.geolocation) { ...

javascripthtmlgeolocation

chooses to activate prefers-color-scheme regardless of whether dark mode is also activated

Currently, I have implemented the following CSS to invert an image when in dark mode on my website: @media (prefers-color-scheme: dark) { #main-logo img {filter: invert(1);} } While this does successfully invert the image in dark mode, it also trigg ...

cssdarkmode

Step by step guide to implementing form step validation in a multi-step jQuery form with radio buttons

I have implemented the sample code provided in this link, with the addition of 2 extra form steps: LINK TO SAMPLE FORM My form consists of radio buttons (2 per page) instead of text boxes. How can I ensure that each form page is validated so that the for ...

javascriptjqueryformstwitter-bootstrapcss

The Bootstrap width is spilling over and not conforming to the content of the form

I'm facing an issue with content overflow on multiple forms within a webpage that uses Bootstrap 4. I can't seem to find a solution to make the width of the forms fit the content properly. Take a look at this picture showing one of the simpler fo ...

htmlcssbootstrap-4overflow

What is the best way to eliminate the blank space between div elements on a webpage?

I'm currently working on enhancing my portfolio website, and I'm struggling to eliminate the excessive white space. After inspecting the element, it appears that there is styling related to ul.AMSI, but it's not referenced anywhere in my st ...

htmlcssmarginpadding

Tips for preserving additional information in a form by selecting "add more" option

Recently, I encountered a challenge with a form on my website. Whenever a user fills out a few fields and clicks "Add", the data transitions into an HTML element. Subsequently, the form partially clears for more data input. Now I'm faced with the dil ...

javascriptjqueryhtmlformsserialization

CSS selector targeting the value inside a textbox

I am working in an environment that only supports CSS and Bootstrap 3.2, with no JavaScript functionality. My current task involves creating a list filtering solution using pure CSS selectors and HTML. Imagine I have 2 items within an HTML list element. T ...

javascripthtmlcss

Discover the secret to incorporating concealed text in WordPress with a hidden div through the power of JavaScript

For a while now, I've been trying to implement a functionality where clicking on a text reveals a dropdown menu with more information, similar to a "read more" feature. I have limited experience in Java or jQuery, and I can't figure out if the i ...

javascriptphpjqueryhtmlwordpress

Executing script once the DOM has completed loading

In my project, I'm dynamically generating menu items for a menu bar based on headers from external files that are imported using an XMLHttpRequest(). The menu bar is then updated as I navigate through different pages. Everything works smoothly. Each ...

javascripthtml

The textarea refuses to clear when the button is clicked

My journey into learning JavaScript and HTML has just begun, and I am currently engrossed in developing a pizza delivery program for a project. Once the user places an order by filling out a form and clicking the order button, the details should be display ...

javascripthtmltextarea

CKEditor displays the return value of an object as `[object Object]

After enabling CKEditor for my textarea, I have encountered an issue where instead of displaying the typed text, CKEditor returns [object Object]. Can anyone assist me in troubleshooting this problem? I appreciate any guidance provided. I have utilized th ...

javascriptphphtmlajaxckeditor

Adding an icon to indicate that the last reading date is over 24 hours old - how to do it!

Within my HTML, I have the following code snippet: {{hsParametersLastRead.readingDate | date:'medium'}} In my controller, I am using this code: $http.get(hsParametersLastReadEndpoint).success(function (hsParametersLastRead) { $ ...

javascripthtmlangularjs