Issue with ASP.NET Form Input - Width behaving differently than expected (not expanding to 100%)

Simple Form Issue:

  • Problem: The width of the <input> element is not expanding to 100%
  • If the class form-control is applied to the element, it should have a width of 100%

Screenshot: Output from Visual Studio

  • Utilizing Visual Studio 2017 (MVC5 ASP.NET C#) - identical code as shown below
  • Both <input> and <textarea> are constrained to a specific width. Attempting to set style="width:100%" explicitly has no effect
  • Works flawlessly when tested on (https://jsfiddle.net/Dhinesh_Ram/0yh4Lx7w/) or "W3 school's Tryit Editor" but not within Visual Studio
  • Browsers I've attempted to troubleshoot in: Chrome, IE, Edge

<link rel="stylesheet" href="https://bootswatch.com/3/lumen/bootstrap.min.css" />

<div class="well bs-component">
  <form class="form-horizontal">
    <fieldset>
      <legend>Feedback</legend>

      <div class="form-group">
        <label for="inputName" class="col-lg-2 control-label">Name</label>
        <div class="col-lg-10">
          <input type="text" class="form-control" id="inputName" placeholder="Enter your name" />
        </div>
      </div>

      <div class="form-group">
        <label for="textArea" class="col-lg-2 control-label">Message</label>
        <div class="col-lg-10">
          <textarea class="form-control" rows="3" id="textArea" placeholder="Your message"></textarea>
          <span class="help-block">Detail if reporting a bug, including a screenshot would be beneficial</span>
        </div>
      </div>

    </fieldset>
  </form>
</div>

htmlcssinputbootstrap-4width

Answer №1

I've discovered the solution!

Navigate to your Project Map and access the directory: "Content"

Next, locate the file named "site.css"

You will see something like this:

/* Adjust width on the form input elements since they're initially 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

Now, modify max-width to 100%

max-width: 100%;

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

What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...

htmlcssgoogle-chrome

An effective method to showcase the HTML content retrieved by getElementsByClassName using JSON.parse()

Can someone help me modify this code so that it displays the value of favFood? It currently works with getElementById but not getElementsByClassName, and I want to use a class: server file - ProcesssingFileOnServer.php: <?php $myObj = new stdClass(); ...

javascriptphphtmljson

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

javascripthtmlcsstwitter-bootstrapbootstrap-carousel

Defaulting summernote to display in italics

Looking for a way to italicize a series of summernote inputs by default? I have removed all toolbar options except the italics button. Here's the HTML generating these inputs: <div style="width:250px;"> < ...

javascriptcssasp.net-mvcsummernote

Loop through a list of items and apply the bootstrap-select plugin to each

In an attempt to incorporate an update button within a loop using bootstrap-selectpicker, I encountered a challenge. Within each iteration of the loop, there is a form containing multiple select elements with selectpicker and a hidden button to save the se ...

javascriptjquerybootstrap-4bootstrap-selectbootstrap-selectpicker

Is it possible to overlap precisely half of one image with another using CSS?

Is it possible to overlap exactly half of an image in CSS using another image while maintaining a set height? The width of the images will vary based on their aspect ratios. Can this be achieved with CSS alone or would JavaScript need to be involved? The ...

javascripthtmlcss

Position of fixed div set relative to its parent fixed div

I'm facing an unusual situation where I need a fixed div to be positioned relative to its parent, which is also a fixed div. When you take a look at my example, everything will become clear. <div class="drawer"> <p>Drawer</p> & ...

htmlcss

Get an ICS file as text using JQuery

As a newcomer to JQuery and JS, I seek your understanding for any mistakes I may make. My current goal is to extract the text from an ICS file (e.g. BEGIN:CALENDAR....) using JavaScript. Here is a simple HTML file I am working with: <html> <b ...

javascriptjqueryhtmlget

When it comes to Rails and HTML data attributes, should you use a dash (-) or underscore (_) for

I've been encountering issues with HTML custom data attributes in my Rails application recently. I use a specific pattern to add data attributes to HTML tags and then access them later in my JavaScript (jQuery) code, like so: = %a.name{ href: "url.co ...

jqueryruby-on-railshtmlcustom-data-attribute

Retrieve the HTML document and all its elements

Is there a method in Python to save an entire webpage with all its contents (images, css) to a local directory using a URL? Additionally, is it possible to update the local HTML file to reference the locally saved content? ...

pythonhtml

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

javascripthtmljquerycss

Adding a new element with Jquery when a dropdown option is selected

What is causing this issue to not function properly? <script> $(document).ready(function(){ $('#custom_field option').click(function(){ $('#custom_field_input').append('<tr><td></td> ...

phpjavascriptjqueryhtmlforms

An unforeseen issue occurred while trying to access an indexed element ID

I've recently started learning javascript and jquery, and encountered a problem while working on a script. The script is created by php code that reads lines from a file, processes them, and displays them using arrays. In addition, javascript validat ...

javascriptjqueryhtmlvalidationinput

Turning various functions associated with different buttons into a universal function using a select element: How to make it possible?

Is there a way to make the load buttons Java functions work from a single button within a selection box, rather than having two separate buttons triggering different JavaScript functions? To clarify the question further: I have two distinct functions that ...

javascriptjavajqueryhtmlupload

Tips for preventing DIV elements from overlapping

In the process of creating a CSS design for a SIM game I enjoy playing, a client requested four boxes: two large ones with two smaller ones aligned horizontally in between. Everything was going smoothly until I attempted to add headers to the boxes. The en ...

htmlcssalignment

How to determine if an Angular list has finished rendering

I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...

javascripthtmlangularjs

How can I apply multiple Tailwind CSS classes to a single element on hover?

Is there a way to combine multiple tailwind css classes in one hover instance on an html element, rather than using separate hover instances? For example, instead of: <button class="hover:bg-blue-900 hover:text-white"></button> is t ...

csstailwind-css

What is the best way to divide a web page screen into three equal horizontal sections?

My goal is to split the screen into three equal sections horizontally so that I can place different images in each section. However, despite my efforts, I am encountering issues with white space and unequal division. This is my current setup: HTML: ...

htmlcsswebformsflexbox

If the browser size is small, revamp the website entirely

I have been implementing a media query in my CSS to improve the responsiveness of my website, but it seems like the design is still not looking right. Is there a technique available to first detect the browser width and then serve different index files acc ...

htmlcssmedia-queries

What is the best way to modify the appearance of embedded HTML within a PHP document?

I am currently in a 14-day internship where I am tasked with redesigning webpages. The pages are designed to display links to files in a folder that can be downloaded by clicking on them. Is there a way to change the style of this page using an external C ...

phphtmlcssdomresponsive-design