What is the best way to ensure uniform lengths for both labels and inputs?

Currently, I am in the process of developing a web app using razor pages. My main focus is on the front end (*.cshtml) where I have integrated 4 objects, each consisting of a label and two inputs. My aim is to have all three components appear in line, with the labels of all 4 objects being of uniform length, along with the inputs. While I have managed to align the items in a row, I am struggling to ensure that the labels across the objects are the same length. Also, I am curious if it is possible to maintain uniform length and responsiveness simultaneously.

As of now, the view resembles the image linked here: image shows labels and inputs as uneven

Here is the current cshtml code:

<div class="input-group mb-3 container">
  <div class="row">
    <div clss="col">
      @* Hub Country Field *@
      <div class="row form-inline">
        <label class="input-group-text" for="HubCountryID">HUB Country</label>
        <select class="form-select" id="HubCountryID" onclick="GetHubCountryDesc()" asp-items="@(new SelectList(Model.HubCountries," ID ","HUBCountryID "))">
          <option value="" selected disabled>-- Select HUB Country --</option>
        </select>
        <input class="form-control" type="text" id="HubCountryDescID" readonly />
      </div>
      @* Sales Region field *@
      <div class="row form-inline">
        <label class="input-group-text" for="SalesRegionID">Sales Region</label>
        <select class="form-select" id="SalesRegionID" onclick="GetSalesRegionDesc()" asp-items="@(new SelectList(Model.Regions," ID ","RegionID "))">
          <option value="" selected disabled>-- Select Region --</option>
        </select>
        <input class="form-control" type="text" id="SalesRegionDescID" readonly />
      </div>
      @* Market Channel Field *@
      <div class="row form-inline">
        <label class="input-group-text" for="MarketChannelToCustomerID">Market Channel to Customer</label>
        <select class="form-select" id="MarketChannelToCustomerID" onclick="GetMarketChannelDesc()" asp-items="@(new SelectList(Model.MarketChannels," ID ","MarketChannelID "))">
          <option value="" selected disabled>-- Select Market Channel --</option>
        </select>
        <input class="form-control" type="text" id="MarketChannelToCustomerDescID" readonly />
      </div>
      @* Market Segment Field *@
      <div class="row form-inline">
        <label class="input-group-text" for="MarketSegmentID">Market Segment</label>
        <select class="form-select" id="MarketSegmentID" onclick="GetMarketSegmentDesc()" asp-items="@(new SelectList(Model.MarketSegments," ID ","MarketSegmentID "))">
          <option value="" selected disabled>-- Select Market Segment --</option>
        </select>
        <input class="form-control" type="text" id="MarketSegmentDescID" readonly />
      </div>

Answer №1

If you want to customize the appearance of label and select, you can add CSS styles to them. Here's an example:

<style>
    label, select {
        width:200px;
    }
</style>

Here is the expected outcome: https://i.sstatic.net/QLQZh.png

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

Angular: Autocomplete field automatically shifts focus when an item is removed

I am currently working on an Angular 2 application that utilizes PrimeNG components. One of the UI features includes an autocomplete component with multi-select functionality (p-autoComplete) similar to the one showcased in the official documentation: < ...

What is the best way to update placeholders in Angular 8+?

I have a collection of items: a = ['apple', 'mango', 'grape', 'papaya', 'banana', 'cucumber']. An input element is present with a placeholder stating select from fruits (the array elements should ...

Having trouble getting my Leaflet map to display even after meticulously following the quick-start guide

I am experiencing an issue where the map is not displaying at all, leaving a blank space where it should be. Despite following Leaflet's quick-start guide, I have been unable to determine the cause of this problem. Here is the code that I currently h ...

The Selenium XPath isn't able to find the modal

I'm trying to target this specific input field: `(name="BtnOK" value="TAMAM" class="BoxButtonOK")` using xpath after a modal popup appears. I can't rely on .FindByClass because there are identical classes on the main page, but I specifically ne ...

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Recently, I took on the task of creating an eBay template for someone. With some assistance and a bit of trial and error, I managed to get it working, albeit with what I like to call "not-so-great" code. However, there is one issue that arises when viewing ...

What are some ways to style an image that has been added using JavaScript using CSS?

I utilized a JavaScript function to add an image, which looked like this: function show_image(src) { var img = document.createElement("img"); img.src= src; document.body.appendChild(img); } But when I attempt to change its style using CSS: img ...

Is there a way to rearrange my divs in the mobile display?

Is there a way to make the image column stack below the text info column in mobile view? I've tried using flexbox without success, so any help would be greatly appreciated. Thank you! <div class="container"> <div class="row"> ...

When attempting to launch my JavaFX 2 application from an HTML page, it fails to execute

I recently downloaded the JavaFX 2 samples and encountered an issue when trying to run one of them from its HTML file. Specifically, I am referring to a JavaFX application called BrickBreaker, which consists of three files: BrickBreaker.jar, BrickBreaker.j ...

The website flickers in and out as it loads

My site keeps flashing whenever it loads. Despite trying the solutions recommended in this stackoverflow post, I have had no success. Every page on my website loads a nav.html file using this code: $.get("nav.html", function(data){     $("#nav-placeho ...

Classes aren't displaying properly for elements inside

Is there a way to display the header only in a small size using the col-sm-* class of the div inside a container? It seems like the col-sm-* class is not working correctly and not floating them properly. <link href="https://maxcdn.bootstrapcdn.com/b ...

Ways to automatically trigger the opening of a Bootstrap accordion without manual

On my website, I have an "About Us" page featuring 3 bootstrap accordions - "Stories", and "Testimonials". My goal is to make it so that when a user clicks on the "FAQ" link in the navigation menu, they are directed to the "About Us" page with the "Testim ...

Display and conceal information upon tweeting

Can anyone help me troubleshoot an issue with hiding the Twitter button after displaying new content? I tried adding a script to make it work, but it's still not functioning properly. Any insights on what I might be doing wrong would be greatly apprec ...

Tips for updating the border color of a navigation tab

Struggling with changing the border color for Tab 2, while Tab 1 works fine. All my custom CSS comes after Bootstrap 5 CSS, so why isn't it overriding the changes? CSS .nav-tabs { border-color: black; } .nav-tabs > li > a { border-colo ...

Error: The function jQuery(...).hexColorPicker does not exist

I am attempting to utilize a color-picker jQuery plugin. Below is a screenshot of the JavaScript file: https://i.stack.imgur.com/ovRjx.png Here is the code I am using to initialize it: <script type="text/javascript> jQuery(function(){ ...

Creating an HTML template in an Angular service and utilizing it as an HTMLTemplateRef

I'm currently working on a major project that has a specific requirement. As part of this project, I am utilizing a library which allows me to open dialog (modal) popups. In order to do so, I need to configure some options for the modal opening proce ...

The Ajax request is successful on one server but fails on another

I have implemented an ajax call to the UPS address validation webservice. The call is successful when made from my application using this domain: http://serverone.org/addrvalidator. However, if I try using a different domain or an IP address instead of th ...

Is there a way to prevent all attribute menu items within a ul/li List from being clicked when one of them has already been selected

When I quickly click on the Photos1, Photos2, Photos3, and Photos4 menus, the "$.get(..." is sent to the server four times. It's important that all of these menus are disabled after any one is clicked. My development environment includes NodeJS, Expre ...

Enhance <th> elements using CSS classes

I'm encountering some issues with HTML tables. The layout of my table is as follows: <table class="shop_table cart" cellspacing="0"> <thead> <tr> <th class="product-remove">&nbsp;</th> <th clas ...

Utilizing a variable in a for loop with Django

I am a beginner in the world of Python and Django framework and I am encountering a small hurdle when trying to assign a variable to my for loop. Within my html file, there are buttons and a list (generated through a loop). For example: Buttons <li&g ...

Tips for importing font files from the node_module directory (specifically otf files)

We cannot seem to retrieve the fonts file from the node module and are encountering this error message. Can't find 'assets/fonts/roman.woff2' in 'C:\Projects\GIT2\newbusinessapp\projects\newbusinessapp\src ...