Tips for minimizing unnecessary white space in fieldset or form-group areas

I've successfully adjusted my html form to display some fields side-by-side within a form-group in order to reduce the overall height of the form. However, I am struggling to eliminate the excessive white space to the right of the fields. Can someone please advise if the red box displayed below is stemming from the container, the fieldset, or the form-group? I have very limited experience with html and Bootstrap.

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

<!DOCTYPE html>
        <html lang="en">

        ...

I suspect that my issue differs from How to remove or reduce the white space in bootstrap? as I have already attempted using the no-padding class without success.

csshtmltwitter-bootstrap-3

Answer №1

Modified the col-sm-* classes within the form group elements. Additionally, included an ad row and col-sm-7 divs before the fieldset div.

<!DOCTYPE html>
<html lang="en>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="robots" content="noindex,nofollow" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
  <link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="(insert stylesheet link here)">
  <script src="(insert script source here)"></script>

  <title>Search</title>

  <style>
    (CSS styles go here)
  </style>

</head>

<body>

  [JavaScript code for cases where JavaScript is disabled]

  [HTML code structure with modified classes for form groups]

  <div class="modalLoading"></div>

</body>

</html>

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

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

htmlcssflexboxoverflowtrailing-whitespace

Develop a line using botbuilder

Good day. I'm currently working on a vue js component that will function as a botbuilder. The main goal is to manipulate the cards displayed on the screen and establish links between them to define the flow of actions. Here's an image for referen ...

htmlcssvue.js

Looking for Angular 2 material components for dart with CSS styling? Need help centering a glyph on your page?

HTML: <div class="border"> <glyph class="center" [icon]="'star'" ></glyph> <div class="centerText"> This Is Text that is centered. </div> </div> Css: .centerText{ text-align: center ...

htmlcssangulardartangular2-material

Hidden input for Vue form submission

I need to include two Id's with a user's input by adding them in a hidden input field. Since v-model doesn't work with hidden inputs, I have set up my hidden input like this: <input type="hidden" ref="property_id" :nam ...

javascripthtmlvue.js

"Capture live video using the reverse camera with the HTML5-QR Code

Recently, I started utilizing a JavaScript library called html5-qrcode (https://github.com/mebjas/html5-qrcode) for scanning QR Codes directly from my browser. The performance of this library is exceptional - it's fast and seamless! https://i.sstatic ...

javascripthtmlcameraqr-code

Aligning the tooltip element vertically

I've created a unique flexbox calendar layout with CSS tooltips that appear on hover. One challenge I'm facing is vertically aligning these tooltips with the corresponding calendar dates effectively. Although I prefer to achieve this alignment u ...

javascriptjquerycssflexbox

Having issues with my html file's navbar-right functionality

As a beginner in angular, I am trying to create a simple navbar. In my project's .json file, Bootstrap is loaded like this:- "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css ...

htmlbootstrap-4angular9

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

javascriptjqueryhtmlinput

Ways to personalize an image within a table cell using HTML

I need some advice on adjusting the size of an image that I have inserted into a cell of a table on my html page. Can someone please guide me on how to do this? Thank you! ...

phphtmlcsshtml-table

Setting !important to every property's value at once

One interesting approach I am using is applying !important to all of the css properties' values like this: .someclass{ color: #f00 !important; background-color: #ff0 !important; margin: 0 !important; padding: 0 !important; width: 100% ! ...

htmlcss

Using JSON to serialize form data before sending it in HTML

I am in the process of developing a system that requires redirecting a user to a C# application using a form that POSTs data as a serialized JSON string along with the user. The form would be structured like this: <form action="c#methodLocation" metho ...

c#phphtmljsonforms

Unexpected behavior with async pipe - variable becomes undefined upon reassignment

In my development process, I have implemented 2 components. One is responsible for fetching data from an external service, while the other one displays this data. The constructor of the first component is structured as follows: constructor( private dev ...

javascripthtmlangular

Implementing a smooth transition effect on an ajax tab

I have a tab code that uses ajax data attributes to load content. The tabs are loaded with ajax from PHP code based on the data attribute. How can I add a fade in/out effect to the tabs' content? I've attempted it but haven't been successful ...

javascriptphpjqueryhtmlajax

Encountering a problem with Selenium when dealing with tabular data displayed in a DIV format on a website, where each row is encapsulated within its own DIV element

While creating Selenium automation tests for a website with multiple rows contained within a main DIV element, each row represented by a separate DIV. For example, if there are 5 dynamically generated rows, the HTML code structure would look like this: < ...

javascriptjavahtmlcssselenium

What is the best way to connect CSS properties to an image using JavaScript?

I recently used JavaScript to insert an image into a webpage, but I'm unsure of how to make changes to it or position it properly. Is there a way to connect CSS styles to the image, or is there another method to modify it without relying on CSS? < ...

javascripthtmlcss

Utilizing children or CSS attributes in customizing component styles within Chakra UI's configuration settings

Can children props or CSS attributes such as title be passed to the component style configuration in Chakra UI? https://i.sstatic.net/3ksWF.png https://i.sstatic.net/wBeoH.png ...

cssreactjschakra-ui

Setting an Angular Directive on a dynamically generated DOM element using Javascript

One of my directives enables the drag-and-drop functionality for DOM elements with the following JavaScript: JS: angular.module('animationApp').directive('myDraggable', ['$document', function($document){return{link: function ...

javascripthtmlangularjsangularjs-directiveangular2-directives

Adjusting the size and dimensions of a wmv video embedded on a webpage

I am trying to embed a wmv file on my webpage. The issue I'm facing is that I can't adjust the video frame size to fit the object and div dimensions. Here's the code I'm using: <div style="width: 300px; height: 220px;"> ...

htmlembeddingwmv

Enhancing a Vue component by including two dynamically computed class properties within a :class="{{}} {{}}" tag

As a newcomer to the Vue world, I have been experimenting with applying 2 computed properties to a :class attribute. Initially, I tried separating each property by a space like this: :class="{{prop1}} {{prop2}}", but upon reload, all content would disappea ...

cssvue.jsvuejs2computed-properties

Update the positioning of the element to center instead of the default top left origin using jQuery

I am facing an issue with positioning a marker inside a triangle, which is represented by a simple div, as shown in the image below: https://i.stack.imgur.com/0Q7Lm.png The marker needs to be placed exactly at the centroid of the triangle. However, it see ...

javascriptjquerycss