How can we ensure that inputs in Asp.Net MVC 5 with Bootstrap fit the screen width?

I'm having trouble getting my textboxes to match the size of my buttons below in the cshtml file. I've made several changes, but nothing seems to work.

Here is a snippet from my cshtml file:

@model SomeModel.Models.LoginViewModel

<div class="row">
    <div class="col-md-8 col-sm-12 col-xs-12">
        <section id="loginForm">
            @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()
                <hr />
                @Html.ValidationSummary(true)
                <div class="form-group">
                    @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
                    <div class="col-md-12">
                        @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.UserName)
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                    <div class="col-md-12">
                        @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Password)
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12 col-xs-12">
                        <button type="submit" class="btn btn-success btn-block">Enter</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
                        <button type="submit" class="btn btn-primary btn-block">Don't Have an Account Yet</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
                        <button type="submit" class="btn btn-info btn-block">Forgot User ID or Password</button>
                    </div>
                </div>
                <p>
                    @Html.ActionLink("Register", "Register") if you don't have a local account.
                </p>
            }
        </section>
    </div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Any suggestions on what may be causing this issue?

Answer №1

The original MVC5 template comes with a css rule in Site.css:

input, select, textarea { max-width: 280px; }

Personally, I tend to delete this rule.

This can lead to issues when using Bootstrap v3 input groups as the input box may not stretch to fit its container's width.

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

The content spills over the edges, yet a scrollbar emerges to guide the way

I have created an Image Slideshow using HTML5 and CSS. The slideshow consists of a div with the property overflow:hidden. The images are animated to move from right to left within the div. While this functionality works smoothly in Chrome, I am facing an ...

Enhance your user interface with Boostrap select icon spacing

Hello, I am currently experiencing an issue with my code where there is a space between the icon on the left and the field. I need to remove this space, does anyone have any ideas on how to do this? Thank you! <div class="col-auto"> <label c ...

Using Bootstrap Confirmation with an Ajax call is not functional

Can you help me identify the potential issue? I have a service that returns JSON data, which I use to populate my table. When I hardcode the data, the plugin works fine as shown in the code snippet below: <td><strong>April Invoice</strong& ...

Increase the spacing between accordion panels on a webforms ASP.NET application

Tech: This webpage is built on an Asp.net Webforms application using a master page and an ajax accordion control. All elements for the page are contained within a designated placeholder. The design of the webpage includes an ajax accordion with multiple A ...

What is the reason behind changing the line-height for one inline-block sibling div affecting both divs?

Here's my setup: <div> <div style="display:inline-block; ">div_1</div> <div style="display:inline-block; line-height:20px;">div_2</div> </div> Why does setting the line-height property f ...

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

Arranging the placement of ui-angular carousel navigation buttons

I am currently working on a carousel that showcases images along with some meta data. For medium and large screens, I want the meta data to be displayed on the right side of the image, while for smaller screens, I need it to appear below the image. So far, ...

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 ...

What is the best way to bring the global stylesheet into a Vue component?

Embarking on my first VueJS project, I decided to create a global stylesheet to maintain consistent styles across different components. After installing the SCSS loader and setting up my stylesheets, I encountered an issue. $mainFont: 'PoppinsRegular, ...

Tips for preventing a bootstrap modal from being dragged beyond its parent container

I need help figuring out how to prevent my bootstrap modal from being dragged outside of its parent container. Is there a way to constrain the modal within its parent? $(document).ready(function() { ShowValidationResult(); }); function ShowValidation ...

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Using Django 3.1.7 on a MacBook Pro now, I recently moved the Django project from a Windows 10 machine. Despite setting up the database and superuser again, running pipenv sync didn't result in serving any of my URLs or Admin page CSS styles. The serv ...

Creating a dynamic bootstrap carousel featuring Instagram-sourced images with a focus on showcasing nearby content

I'm looking to create a bootstrap carousel (or similar responsive slider) that displays images on the right and left of the main image, visible at the sides of the screen. It would be great if these side images had a transparent overlay or blur effect ...

Modify the background color of fc-today

Searching for a current solution to this issue has been challenging. Today, I am attempting to modify the highlighted background in my project. My code includes the <FullCalendar> component nested inside <Box>: <Box flex={"1 1 100%" ...

Exploring the method of iterating through every single row, column, and cell within a GridView in ASP.NET to assign specific values

I am struggling to iterate through each row, column, and cell to populate a GridView with a list of employee objects. Each employee has an ID, name, and city, which should be displayed in separate columns. The first column should show the ID, the second co ...

Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...

What is the best way to maintain the current position in a component while interacting with another component?

I have a component that displays a collection of cards with images. There is a button that toggles between showing another component and returning to the original list of cards. The issue I am encountering is that every time I return to the list of cards, ...

Enhancing forms with unique membership options

I am managing a website that relies on the asp.net membership tables (ASP 3.5 site). To streamline user management, I plan to upload user data from an Excel sheet directly into the membership tables using a form. After using a simple app to process the Exc ...

ASP view displaying overlapping controls

I currently have a form written in ASP that incorporates JQuery for handling two elements: an image upload and a datepicker. The code snippet responsible for the image upload functionality is $(function() { $("#wcpImage").makeAsyncUploader({ uplo ...

Ways to randomly rearrange div each time a new page is loaded

I wrote some code to shuffle my div elements when the page is reloaded, but I really want them to be shuffled every time a new visitor lands on the page. Since I am not an expert in jquery/javascript, I decided to reach out here for some guidance. Here&ap ...

How to Properly Adjust the Material UI CircularProgress Size

Is there a way to display the Material UI CircularProgress component at a size that nearly fills the parent div, which has an unknown size? Ideally, I want the size to be around 0.8 * min(parent_height, parent_width). I've experimented with adjusting ...