What is the best way to vertically align the dropdown button with the other text boxes?

I'm currently utilizing a basic bootstrap template from getbootstrap.com. I am having trouble properly aligning the account type dropdown in this section. Additionally, the dropdown list items are not correctly aligned with the dropdown button. Any assistance would be greatly appreciated. Thank you.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data" align="center"> 
      <div class="form-group">

          <div class="col-sm-12">
            <div class="dropdown">
              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Account type
              <span class="caret"></span>
              </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Supplier</a></li>
                  <li><a href="#">Client</a></li>
              </ul>
            </div>
          </div>

          <div class="form-group">
            <label for="supplieruname" class="col-sm-2 control-label">Username:</label>
           <div class="col-sm-4"><input type="text" class="form-control" id="supplieruname" placeholder="Username" tabindex="1" required></div>
           </div>

          <div class="form-group">
            <label for="supplierpassword" class="col-sm-2 control-label">Set Password</label>
            <div class="col-sm-4"><input type="text" class="form-control" id="supplierpassword" placeholder="Password" tabindex="2" float="right" required></div>
          </div>

          <div class="form-group"> 
            <label for="acctype" class="col-sm-2 control-label">Account Type</label>
            <div class="col-sm-4"><input type="text" class="form-control" id="acctype" placeholder="Company Name" tabindex="3" float="right" required></div>
          </div> 

          
        </div>

        <div class="col-sm-4">
            <div class="form-group"><input class="btn" type="submit" value="Save">
            <input type="reset" class="btn" name="clear" value="Clear">
            </div>
          </div>

  </form>

htmlcsstwitter-bootstrap

Answer №1

To ensure that the dropdown menu is not 100% width and aligned to center, add the btn-group class to the dropdown element. Alternatively, you can apply the style display:inline-block to the .dropdown class.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data" align="center"> 
      <div class="form-group">

          <div class="col-sm-12">
            <div class="dropdown btn-group">
              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Account type
              <span class="caret"></span>
              </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Supplier</a></li>
                  <li><a href="#">Client</a></li>
              </ul>
            </div>
          </div>

          <div class="form-group">
            <label for="supplieruname" class="col-sm-2 control-label">Username:</label>
           <div class="col-sm-4"><input type="text" class="form-control" id="supplieruname" placeholder="Username" tabindex="1" required></div>
           </div>

          <div class="form-group">
            <label for="supplierpassword" class="col-sm-2 control-label">Set Password</label>
            <div class="col-sm-4"><input type="text" class="form-control" id="supplierpassword" placeholder="Password" tabindex="2" float="right" required></div>
          </div>

          <div class="form-group"> 
            <label for="acctype" class="col-sm-2 control-label">Account Type</label>
            <div class="col-sm-4"><input type="text" class="form-control" id="acctype" placeholder="Company Name" tabindex="3" float="right" required></div>
          </div> 

          
        </div>

        <div class="col-sm-4">
            <div class="form-group"><input class="btn" type="submit" value="Save">
            <input type="reset" class="btn" name="clear" value="Clear">
            </div>
          </div>

  </form>

Answer №2

In the meantime, you may use the following method to address it later.

Correct it within the webpage.

<style>
.dropdown, .dropup {
    position: fixed;
    z-index: 999;
   float:center;
}
.form-group{margin-bottom:20px;}

</style>

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

Utilizing AJAX to Fetch Data from Python

I am attempting to utilize AJAX to dynamically update a table with data retrieved from a Python script. However, when I make an AJAX request to the Python script, instead of receiving just the content within the print commands, I get the entire Python scri ...

pythonhtmlajax

Icon-enhanced Bootstrap dropdown selection

I have a unique select dropdown using Bootstrap where I want to display icons like the example below: https://i.sstatic.net/dZmTS.png <!DOCTYPE html> <html> <head> <script src="/scripts/snippet-javascript-console.min.js?v=1"& ...

javascripthtmlcssbootstrap-5

HTML/ModX styling for selected textboxes

I am looking to enhance the style of my search-box, which is similar to the one on THIS website. While I have tried using :active, the effect only lasts for a brief moment. Currently, my code is heavily influenced by modX terms, but I will still share it h ...

htmlcssmodx

What is the best way to create a grid layout that is responsive using HTML and CSS

I have been searching all over the internet and have not been able to find a grid layout like this. The "grid-template-columns" property is not achieving what I need, as I cannot make one box larger than the others. I am looking to create 4 equal boxes an ...

htmlcsscss-grid

Generating a dataframe with cells that have a combination of regular and italicized text using the sjPlot package functions

I've been trying to set up a basic data table where the genus name in the "Coral_taxon" column is italicized, but the "spp." part following it remains lowercase. I thought of using the expression() function for each row in "Coral_taxon," but so far, I ...

htmlrdataframesjplotitalic

`The logo does not dim when the popup is displayed`

I'm currently experiencing an issue with pop-ups on my page - when they appear, they create a shade over all elements of the page except for my two logos and are displayed with a border around them. Here's what my page looks like before the popu ...

javascriptcssreactjsimagepopup

Cross-border PHP document

Each PHP page must begin with the following code: <?php $host="localhost"; // Host name $username=""; // MySQL username $password=""; // MySQL password $db_name=""; // Database name $tbl_name=""; // Table name // Connect to server and select datab ...

phphtml

Displaying messages in an Angular 2 chatbox from the bottom to the top

As a newcomer to using typescript, I am currently working on an angular 2 project and facing some challenges with creating a chatbox. My goal is to have new messages displayed at the bottom while pushing the old ones up one line at a time, as shown in this ...

htmlcssnode.jsangulartypescript

Implementing grid items in CSS Grid that do not stretch the grid row and have a container that is scrollable

Here is my dilemma: I am looking to create a grid with a fixed number of columns (that can be adjusted via javascript) and a variable number of rows, all with equal heights. The rows will be determined by the number of grid items, which are represented a ...

cssangularscrollflexboxcss-grid

What is the reason for translate3d(…) causing a scrollbar to appear on iframes?

Is there a way to hide the tiny, fixed scrollbar that appears at the bottom of an <iframe> with overflow-x: scroll, even when there is no content to scroll, while keeping the transform: translate3d(0px, 0px, 0px) style set? https://i.sstatic.net/kaV ...

htmlcssiframe

"Unfortunately, the Ajax Update feature seems to only work properly on

Encountering difficulties with updating records in a PartialView using Ajax. A View is called with @Html.Action("_PartialView", "Controller", new { id = OrderId }) and a PartialView contains an Ajax Form. @model IEnumerable<WebMartin.Models.OrderExecut ...

htmlajaxasp.net-mvc

Text and Image Coordination

I'm encountering some challenges with a specific section. My goal is for it to resemble this. However, I am currently achieving something different, like this. .timeline { text-align: center; } #about-us { ul { &:before { ...

htmlcsstwitter-bootstrap-4

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

javascriptjquerycssjquery-uijquery-mobile

Embedding a stylesheet into an HTML document can be done automatically

Currently, I am working on creating standalone error pages (404/503) as individual HTML files. My server-side setup involves Node.js, but these specific files will be hosted directly in Nginx. One of the challenges I am facing is automatically including a ...

javascripthtmlcssbuildgulp

How can I stack images on top of each other within a div

Currently, I am in the process of creating a blackjack game and encountering an issue with overlapping cards. Despite implementing the code below, all I see is a column of cards displayed. I have looked at similar questions for guidance, but I'm unab ...

htmlcssbootstrap-5

Updating padding through local storage does not function as intended

I recently added two buttons to my website for adjusting the padding. While they are functional, I find myself manually setting the padding for nav, main, and footer in the CSS. Here is the snippet of the code: main { padding: 20px 25%; } footer { ...

javascripthtmljquerycss

Redefining the colors of an SVG when it is a CSS background image in code

I currently have an SVG icon encoded within my CSS file. I'm looking to change the color of this icon when a user hovers over it without creating a duplicate icon in a different color. Here's a snippet from my CSS file: background-image: url("d ...

htmlcsssvgbackground-image

Place the element at the bottom of the row above

I'm utilizing Angular to retrieve a list of items from the server and exhibit them on the page using: <div class="col-sm-6 col-md-4" ng-repeat="activity in activities"> <img ng-src="[[ act.icon ]]" height="100" alt=""> <h3>[ ...

htmlcssangularjs

Different ways of manipulating images with JavaScript

I attempted to tackle the issue independently, but I'm stumped. Is there a way to adjust the width of an image in JS when the screen dimensions are changed? ...

javascripthtmlimagewidthscreen

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

javascriptphphtml