Creating consistent widths for drop downs and text boxes in Bootstrap

I'm currently using VB.Net MVC, Razor, Bootstrap, and Visual Studio 2013. My clients have requested that the dropdowns match the width of the text boxes.

Here is how I create my dropdowns:

@<div class="row">
    <div class="col-md-4">
        <label>@Model.ListOfFields(i): </label>
    </div>
    <div class="col-md-8">
        <div class="btn-group">
                <button class="btn btn-default dropdown-toggle btn-sm" type="button" 
                              id="@Model.ListOfFields(i)" data-toggle="dropdown" 
                              aria-expanded="true">

                     <span class="search" id="@Model.ListOfCategoryAttributeIDs(i)" ></span>
                     <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labeledby="@Model.ListOfFields(i)">

                    @For x As Integer = 0 To Model.ListOfDropDowns.Count - 1
                    Dim currentField As String = Model.ListOfFields(i)
                    Dim currentObject As CivilServiceInventoryMock.ViewModels.customDropDown = Model.ListOfDropDowns(x)

                    If (currentObject.fieldType).Equals(currentField) Then

                        Dim currentOption As String = currentObject.dropDownValue

                            @<li role="presentation">
                                <a id="ddListSelectItemType" class="ddListSelectItemType"
                                      onclick="lockValue(this)" role="menuitem" 
                                      tabindex="-1">
                                   <div class="itemOptions" id="@Model.ListOfCategoryAttributeIDs(i)">
                                       @Html.DisplayFor(Function(modelItem) currentOption)
                                   </div>
                                 </a>
                             </li>
                         End If
                         Next
                     </ul>
                </div>
           </div>
      </div>

This is how I create a text box:

    @For i As Integer = 0 To Model.ListOfDisplayTypes.Count - 1
        If Model.ListOfDisplayTypes(i).Equals("TextBox") Then
        @<div class="row">
            <div class="col-md-4">
                <b>@Model.ListOfFields(i): </b>
            </div>
            <div class="col-md-4">
                <input class="search" id="@Model.ListOfCategoryAttributeIDs(i)" 
                      name="@Model.ListOfFields(i)" type="text" placeholder="@Model.ListOfFields(i)" />
            </div>
        </div>
        End If
    Next

I've tried different CSS combinations to make the dropdowns and text boxes match in width without success. Could there be a specific combination of column size and width percentage to achieve this?

htmlcsstwitter-bootstrap

Answer №1

Take a look at the Boostrap documentation for more information: http://getbootstrap.com/css/#forms

To create an inline form, simply add the class "form-inline" to the parent container that groups the input elements together (it doesn't have to be a form element).

Once you've added the "form-inline" class, make sure to wrap the input elements with `div` tags and they will appear in the same size.

@For j As Integer = 0 To Model.ListOfDisplayTypes.Count - 1
    If Model.ListOfDisplayTypes(j).Equals("TextBox") Then
    @<div class="row">
        <div class="form-group col-md-4">
            <b>@Model.ListOfFields(j): </b>
        </div>
        <div class="form-group col-md-4">
            <input class="search" id="@Model.ListOfCategoryAttributeIDs(j)" 
                  name="@Model.ListOfFields(j)" type="text" placeholder="@Model.ListOfFields(j)" />
        </div>
    </div>
    End If
Next

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

Guide to placing an image below a <div> using HTML?

Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https:/ ...

htmlcssbootstrap-4

Tips for updating WordPress without changes appearing live right away

I want to quickly and easily make CSS changes to a WordPress website without doing it live. Is there a way to make these changes locally and then upload them? What is your recommendation? Some people have mentioned that making changes locally can be diffi ...

phpcsswordpress

Issues with the functionality of jQuery's .load() method are causing

I am encountering an issue for the first time. Inside ajax.html, I have the following code in the header: $(document).ready(function(){ $( "#result" ).load( "/loaded.html" ); }); In the same directory, there is a second page named loaded.html: <d ...

javascriptjqueryhtmlajax

What could be causing this div to shift positions when the browser window is resized?

When resizing the browser, I'm having trouble keeping the div boxes in place. The bottom-right lower div (vd-grid-sub-box) keeps shifting away when I slightly decrease the browser size. Additionally, vd-grid-right-col overlaps with the banner if the s ...

htmlcss

Guide to automatically inserting text into an html form and submitting it without manual intervention

Currently, I am in the process of a project where my main goal is to design an HTML form for submitting replies. One interesting feature I want to include is an option for users who are feeling lazy to simply click on "auto-generate comment", which will ...

javascriptjqueryhtml

What is the best way to divide a Modal Header column into two separate sections?

Is there a way to center the text in the Modal Header and have the H1 and P tags occupy one row each? Applying d-block to each creates two columns. I also tried increasing the Height in the Modal Header without success. If you have a solution, please hel ...

htmlcssbootstrap-5

Loop through the elements retrieved by the `getElementsByName` method in

My goal is to access each node by elementName using the following JavaScript code: function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { if (h1[i].name == "demoNode") { var att ...

javascriptjqueryhtmlxmlxslt

Issue with toggling in react js on mobile devices

Currently, I am working on making my design responsive. My approach involves displaying a basket when the div style is set to "block", and hiding it when the user browses on a mobile device by setting the display to "none". The user can then click on a but ...

javascriptcssreactjstypescripttoggle

The PHP-based registration process is malfunctioning

Trying to simply register, but I'm encountering an issue where the file is named Login.html/.php instead of just Login.html. Below is my HTML form in Login.html: <!DOCTYPE html> <html> <head> <title>Register/ Login</title&g ...

phphtmlmysqlxampp

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

I am attempting to make the div full width while also implementing a slideDown/Up effect. I am struggling to identify the specific CSS needed to adjust the width accordingly. Currently, this is what I have: I can see that the class open is dynamically ad ...

csstwitter-bootstrapbootstrap-4

How come I am able to reference a component in styled-components while others cannot?

When using styled-components, you can reference another React component using the syntax ${Label}. However, I have noticed that it only works with certain components and not others. Despite reading the documentation at , I encountered an issue when trying ...

javascripthtmlcssreactjsstyled-components

How can I ensure that the content within a div does not overflow and that horizontal scrolling is enabled? What is the correct way

After designing my profile page, I encountered a problem related to horizontal scrolling caused by overflow. Despite trying various solutions like adjusting the width of .profilePg, I haven't been able to resolve this issue without disrupting the over ...

htmlcssoverflow

Firefox experiencing trouble handling flexbox overflow

Having some trouble with a test project that involves using flexbox. The task at hand is to create a dashboard with multiple lists of cards arranged side-by-side with infinite overflow. I was able to achieve this layout, however, the issue arises when eac ...

htmlcssangularjsfirefoxflexbox

Error message in console: AngularJS throws an error saying 'No module found: uiCropper'

Hey there, I'm looking to add an image cropper to my webpage. I came across some code on Codepen, but when I tried using it, the code didn't work and I encountered this error angular.module('app', ['uiCropper']) .controll ...

javascripthtmlcssangularjs

Tips for customizing the selected and hover color of ListItem in Material UI

Having trouble getting the 'selected' or 'hover' colors to work for the ListItem component. I've tried setting its classes like this: <ListItem selected button key="home" classes={{ selected: classes.listItemSelected } ...

cssreactjsmaterial-ui

tips on displaying textbox content on a php webpage

I have a piece of code where, when text is entered into a textbox and the add attribute button is clicked, the entered value is displayed on the page twice. One appears in the first row of a table, and the other appears in the first row of a second table. ...

javascriptphphtml

Can two div elements be positioned next to each other without relying on CSS float?

Every time I try to use CSS float to align two elements next to each other on a webpage, IE and Firefox always throw unexpected surprises my way. Is there an alternative method to position two divs side by side on a website without relying on CSS float? ...

htmlcsslayout

Verifying the accessibility of a website using JQuery/Javascript

I am attempting to use JavaScript to ping a website and display the result. Unfortunately, I have not had any success with this JSFiddle: https://jsfiddle.net/yyjowtru/ Although I believe I am close to achieving the desired outcome, changing the URL in t ...

javascriptjqueryhtml

Using scale transformations to animate SVG group elements

I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...

javascriptjqueryhtmlcsssvg

Unhook, add at the beginning, and set requirements jQuery

There are two clickable div elements that can switch classes when clicked. If the first one contains "1", it will be given a class of "active". If the second one contains "2", it will have the class "active" while removing the class from the first one. &l ...

javascriptjqueryhtmlcss