Excessive size of bootstrap form

I'm currently working on designing a form within a section that has a width of col-sm-8. The form consists of three columns: label, text input, and username check. I've designated the label to have a width of col-sm-2, the username check to have a width of col-sm-1, and the remaining space for the text input. My initial calculation was to give the text input a width of 5, but the result didn't turn out as expected. I even tried setting it manually to col-sm-7, but it still wasn't long enough. Adjusting the width to col-sm-8 caused scroll bars to appear at the bottom of the page. My goal is to: 1. Set the label's width to col-sm-2 on the left. 2. Set the username check's width to col-sm-1 on the right. 3. Allow the text input to take up the entire width in the middle. How can I achieve this? Below is the code snippet from my previous attempt:

<div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;">
  <form name="form_register" id="form_register" method="post" class="form-horizontal">
    <fieldset>
      <legend class="text-center">Enter your details below.</legend>
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">Username *</label>
          <div class="col-sm-7">
            <input type="text" name="username" id="username" class="form-control" maxlength="40" required />
          </div>
          <div class="col-sm-1"><span id="usernameCheck"></span></div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">Password *</label>
          <div class="col-sm-7">
            <input type="password" name="password" id="password" class="form-control" maxlength="20" />
          </div>
        </div>

Although my new code yielded better results, I'm curious if there's a more elegant solution: Change the div of username from

<div class="col-sm-7">

to

<div class="col-sm-7" style="width:75%">

Answer №1

this snippet will assist you

<html>
  <head>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;">
  <form name="form_register" id="form_register" method="post" class="form-horizontal">
    <fieldset>
      <legend class="text-center">Enter your details below.</legend>
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">Username *</label>
          <div class="col-sm-7">
            <input type="text" name="username" id="username" class="form-control" maxlength="40" required />
          </div>
          <div class="col-sm-1"><span id="usernameCheck">User Error Check</span></div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">Password *</label>
          <div class="col-sm-7">
            <input type="password" name="password" id="password" class="form-control" maxlength="20" />
          </div>
        </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

Content not being displayed by Javascript

I'm having trouble displaying content using JavaScript DOM. Every time I try to run my code, the page comes up blank. Here is an example of my HTML file: <!DOCTYPE html> <html> <head> <title>Radiant HQ</titl ...

Import the information into a td tag's data-label property

I have implemented a responsive table design that collapses for smaller screens and displays the table header before each cell. body { font-family: "Open Sans", sans-serif; line-height: 1.25; } table { border: 1px solid #ccc; border-collapse: co ...

What is the method for assigning a class name to a child element within a parent element?

<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...

Replace minor components (SVG) within the primary SVG illustration

I'm interested in transforming SVG elements into the main SVG element. For example, let's say the black square represents the main SVG element. I want to change elements 1, 2, and 3 to different SVG elements using JavaScript code. However, I am u ...

Issue with conditional comment in IE 8 not functioning as expected

Struggling with changing the SRC attribute of my iFrame specifically for users on IE 8 or older. This is the code I have written: <script> var i_am_old_ie = false; <!--[if lte IE 8]> i_am_old_ie = true; <![endif]--> </script> ...

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

unable to connect css file to document

My index.html file is not reading the style.css file for some reason, even though it is linked. I have added the type and checked the path, but still facing issues. Can anyone help troubleshoot this problem? Thank you. https://i.sstatic.net/xxpBV.png htt ...

Creating a Facebook link widget similar to Grooveshark: A Step-by-Step Guide

Recently, I shared a Grooveshark link on Facebook (like http://grooveshark.com/s/Toothpaste+Kisses/3gGocy?src=5) and to my surprise, the link appeared to be normal at first. However, once clicked, it magically transformed into a Flash widget like this. The ...

Difficulty Uploading Files

I'm facing an issue when trying to upload multiple files. When I select more than 1 djz_file, no information is obtained from $_POST and $_FILES. However, if it's a single file, everything works as expected. <fieldset> ...

IE Browser Exposes Flawed Design in JSP Coding

I have a pair of JSP files. The first one features a table, while the second one contains rows (<tr>) that are meant to be added to the table. Within the second JSP file, I initialize the same action, followed by the <tr> element that should b ...

Is it possible to remove the parent element using CSS?

Is there a method to remove the parent element while retaining the current element? Take a look at my example here: <div id="parent"> <div id="child"> <span>some text</span> </div> </div> div { ...

Iterating through an array with ngFor to display each item based on its index

I'm working with an ngFor loop that iterates through a list of objects known as configs and displays data for each object. In addition to the configs list, I have an array in my TypeScript file that I want to include in the display. This array always ...

How can I retrieve the position of a div or an image within a div (specifically the top and left coordinates) and incorporate these values into CSS?

I'm currently working on a website that is dynamic and utilizes bootstrap. I am looking to incorporate an animation where the dynamic thumbnails in the col-md-4 div zoom to 100% when clicked, appearing at the center of the container. I am struggling ...

Storing information from a table into LocalStorage

$('.new_customer').click(function () { var table = $("table"); var number = table.find('tr').length; table.append('<tr id="' + number + '"><td><input type="button" class="btn btn-success btn-xs" ...

I am struggling to make php redirect work using onclick() function

My PHP button is not redirecting properly. Assuming the page destination is correct, is there anything else that could be causing this issue? echo "<button id=\"create\" onclick=\"location.href('/team/teams.php?op=create');&bso ...

What causes the unusual behavior of `overflow-x: auto;` when used within a parent element with `flex-direction: row;` styling

I have gone through numerous other queries regarding horizontally scrolling tables, but none seem to address this particular problem. When using a responsive table in the default Blazor Server template of a new project built with Bootstrap 4, the browser ...

What is the process for layering one image on top of another in HTML?

Don't miss checking out the amazing website wplayout.com. On the homepage, there is a stunning gallery that I want to enhance by adding a "premium" tag image on top of each picture. Currently, the premium image is displayed in the top right corner of ...

What is the most effective method for managing the onSelect data within the select tag in Angular's reactive form functionality?

Can someone please advise on the best approach to handling this scenario? I have a form with multiple fields, including a select tag. <form [formGroup]="myForm"> <select formControlName="" > <option *ngFor="let c of countries" value ...

What is the proper application of counter-reset when utilizing CSS counters to automatically number headings?

In my quest to automatically number headings with multiple levels of hierarchy in an HTML document using CSS, I have encountered various examples online that heavily rely on counter-reset. However, despite testing it in different configurations, I haven&ap ...

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

Currently, I have successfully created an iOS 5 application that sends a job to the print queue. The functionality works fine and utilizes the UIMarkupTextPrintFormatter to generate the document in HTML format. At this point, I am using a simple HTML str ...