Utilizing Bootstrap to Showcase a Form

I am facing some confusion. In my MVC5 project, I am trying to display a form with 4 input fields. The display looks perfect without using the @using (HTML.BeginForm(...) statement.

@using(Html.BeginForm("Create", "HR", FormMethod.Post)) {

When the @using(HTML.BeginForm(...) statement is added, the display changes to something like this: https://i.sstatic.net/bU0bn.png

I am wondering where I might have gone wrong in my HTML helper?

Here are some sample HTML helper methods that I am using:

<div class="panel-group">
<div class="panel panel-primary">
    <div class="panel-heading"><h4>Create New Employee</h4></div>
    <div class="panel-body"> 
        <form class="form-horizontal">
     <div class="form-group">
                    <label class="control-label col-sm-2">First Name</label>
                    <div class="col-sm-10"> 
                        @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", placeholder = "Enter First Name" })
                    </div>
             </div>
     <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd">Middle Name</label>
                    <div class="col-sm-10"> 
                        @Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control", placeholder = "Enter Middle Name" })
                    </div>
             </div>
     </form> 
  </div>
   </div> 

Answer â„–1

It seems like the class attribute is getting lost when using @Html.BeginForm. Make sure to include it back in your code:

<div class="container">
<div class="row">
    <div class="col-md-6"><h2>Add New Product</h2></div>
    <div class="col-md-6">
        @using (Html.BeginForm("Create", "Product", FormMethod.Post, new { @class="form-horizontal" }))
        {
            <div class="form-group">
                <label for="name">Product Name:</label>
                @Html.TextBoxFor(m => m.ProductName, new { @class = "form-control", placeholder = "Enter Product Name" })
            </div>
            <div class="form-group">
                <label for="price">Price:</label>
                @Html.TextBoxFor(m => m.Price, new { @class = "form-control", placeholder = "Enter Price" })
            </div>
        }
    </div>
</div>

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 are the steps to adjust image size using CSS in an email signature?

Having trouble with my email signature. It appears fine on my end, but when the recipient replies, the images are oversized and the css is not rendering correctly in their response. I'm puzzled as to why this is happening. Here's the code snippe ...

Significant empty space to the left of content due to Zurb Foundation

I'm currently utilizing Zurb Foundation within a rails project. My goal is to structure a basic page that consists of a table, text field, and a couple of buttons. However, I am facing a significant gap on the left side of my content, causing the rig ...

React does not recognize CSS attributes

I am facing an issue with the CSS styling when using built-in tags like "form-group" in my code. Strangely, the browser does not apply the CSS when I use these built-in tags. However, if I define my own classes, such as "classes.form", the CSS is visible i ...

Is there a way to stop a music track from playing?

function playMusic(){ var music = new Audio('musicfile.mp3'); if (music.paused) { music.play(); } else { music.pause(); } } <input type="button" value="sound" onclick="playMusic()" ...

Unable to add a border to the thumbnail containing text

Is there a way to achieve a nice border on my thumbnail section below? I attempted using a container but it resulted in the text overflowing on md or sm screen widths. <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset ...

How can I adjust the size of my elements to be responsive in pixels

While browsing through Quora and Facebook feeds, I noticed the fixed size of user display pictures: width: 40px; height: 40px; Even when resizing the browser window for a responsive design, these pictures maintain their size at 40px x 40px. What other f ...

When working with JavaScript, the `textarea` value property will not recognize line breaks or white spaces when being read

Recently, I've been developing a browser-based notebook app. However, I encountered an issue where if I type a note like this: *hello this is my first note The app displays it as: hello this is my first note Additionally, I want elements with the ...

Tips for integrating scroll-snap and jQuery's .scroll() function together

I'm facing challenges in integrating both of these elements into the same project. When I activate overflow: scroll, my jQuery function does not work as expected. However, if I deactivate it, then the jQuery works but the scroll-snap feature does not ...

I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

Having trouble with my login form validation using jQuery. Can someone help me fix it? $(document).ready(function() { $("#form1").validate({ rules: { username: { required: true, minlength: 6 }, password: { ...

There is a space above the second div when using display inline-block

I'm encountering an issue with the display inline block property. I have two divs that I want to position next to each other, but there's a strange gap above the second div (#store_header_text) that I can't seem to explain. I've tried r ...

Why is it not possible for me to choose an element after it has been placed within a grid component?

Struggling to eliminate the blur effect on an image inside a grid element? It seems modifying the properties of an element within a grid class is causing some issues. To simplify, I conducted a basic test: I managed to change the ppp2 class when hovering ...

Is it possible to maintain the maximum height and width of a div across all levels of zoom?

In the process of developing a web application, I encountered an issue regarding setting the width and height of a div to a fixed number, regardless of the zoom level. While I was successful in changing the background color of the div across all zoom level ...

Display the cost based on the selection made

I am currently working on a restaurant website and have designed a form with select options. My goal is to have a price appear for the selected option. While I know that JavaScript is the solution for this, I must admit that I am not very proficient in Jav ...

Optimizing Your HTML/CSS/JavaScript Project: Key Strategies for Modular

When it comes to web frontend projects (html/css/javascript), they are often perceived as more complex to read and maintain compared to Java/C#/C/C++ projects. Is it possible to outline some optimal strategies for enhancing the readability, modularizatio ...

What is the best way to visually highlight the selected item in a list with a special effect?

I have a list that I'd like to enhance by adding an effect to the selected item after a click event. For instance, after clicking on the first item 'Complémentaire forfait', I want to visually highlight it to indicate that it has been selec ...

Using jQuery to toggle sliding the information above a div

I am facing an issue with my customized sliding menu. The menu slides over the image but not over the content-div, pushing it aside. I have tried to fix this problem but haven't found a solution yet. My goal is for the menu to slide over all divs and ...

How can I achieve a letter-spacing of 0.5 pixels in CSS?

Encountering an issue, I set out to enhance readability by adjusting letter-spacing to 1px. Displeased with the result, I attempted a half pixel spacing of 0.5px but found it ineffective. Subsequently, I experimented with em attributes but failed to accomp ...

How to align text to the left and right within a Bootstrap accordion

I am currently working on a Bootstrap accordion, and I have a specific layout in mind. I want to display text on both the left and right sides of the accordion header, right next to the arrow that expands and collapses the content: https://i.sstatic.net/d ...

Radiant Curvature Background Gradient

On my website, I'm trying to replicate the unique background gradient found here. Unlike a basic linear gradient that can be easily repeated as an image to fill any length, this one poses a challenge. Can anyone share a technique or method to help me ...

What is causing the slider image to be the only element that is not adapting to different screen sizes?

I am currently using the flexslider from woothemes and I am unable to understand why the image is consistently wider than the content when the browser window is resized or when viewed on an iPad/iPhone. Upon inspection, I couldn't find any styles on ...