CSS file not working properly with ASP.NET MVC5 - html

In my ASP.NET MVC project i recently had problems with the CSS files (im using the Bootstrap files), i've tried repair Visual Studio 22, but that didn't work, after that i tried (CTRL + F5/ hot reload), that worked partially for the CSS files, the issue now is that the forms i have placed do not show properly in order, but rather side by side. as shown below
what the output looks like
Transfer.cshtml File
#model BankSystem.Models.transfer
#{
ViewBag.Title = "Transfer";
Layout = "~/Views/Shared/_bankLayout.cshtml";
}
#if (ViewBag.text != null)
{
<div style="color: #008000">#ViewBag.text</div>
}
<h2>Transfer</h2>
#using (Html.BeginForm("Transfer", "Home", FormMethod.Post))
{
<div class="container">
<div class="row form-horizontal">
<div class="form-group">
<div class="col-md-1">#Html.Label("Account Number")</div>
<div class="col-md-3">#Html.TextBoxFor(x => x.AccountNumber, new { #class = "form-control" })</div>
</div>
<div class="form-group">
<div class="col-md-1">#Html.Label("CUSIP")</div>
<div class="col-md-3">#Html.TextBoxFor(x => x.CUSIP, new { #class = "form-control" })</div>
</div>
<div class="form-group">
<div class="col-md-1">#Html.Label("Account Holder")</div>
<div class="col-md-3">#Html.TextBoxFor(x => x.AccountHolder, new { #class = "form-control" })</div>
</div>
<div class="form-group">
<div class="col-md-1">#Html.Label("Amount")</div>
<div class="col-md-3">#Html.TextBoxFor(x => x.Amount, new { #class = "form-control" })</div>
</div>
<div class="form-group">
<div class="col-md-1"><input type="submit" value="Send" class="btn btn-primary" /></div>
<div class="col-md-3">Cancel</div>
</div>
</div>
</div>
}
The forms that i have placed should be aligned on the left side going down, but instead they are all placed side by side, without changing anything in the style sheets, any help is appreciated.

<div class="row form-horizontal"> Seems to be the smoking gun here, as it surrounds all of the form-groups.
I would get rid of that div, and use <div class="form-group row"> in place of <div class="form-group">. This should ensure all of your form-groups are shown on separate lines.
Hope this helps :)

Related

How to center a card inside a container ( bootstrap) [duplicate]

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 1 year ago.
I have a container and, inside it, a card. I tried using justify-content-center,mx-auto and hardcoding css properties to bring the card to the center of the container, but I did not get the actual output.
Here is my html file
<div class="container bg-warning">
<div class="row mx-auto centermycard">
<div class="card mx-auto ">
<div class="card-title"><h2 class="text-center">Find Lyrics For Your Song</h2></div>
<div class="card-body ">
<div class="container">
#using (Html.BeginForm("FetchLyrics", "LandingPage", FormMethod.Get, Model))
{
#Html.ValidationSummary(true, "Please fix the below errors")
<div class="form-group">
#Html.LabelFor(model => model.songname, "I want a Song")
#Html.TextBoxFor(model => model.songname, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.songname)
</div>
<div class="form-group">
#Html.LabelFor(model => model.moviename, "From Movie")
#Html.TextBoxFor(model => model.moviename, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.artist, "By Artist")
#Html.TextBoxFor(model => model.artist, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.genre, "In genre")
#Html.TextBoxFor(model => model.genre, new { #class = "form-control" })
</div>
<div class="form-group">
<button class="btn btn-block btn-primary col-md-8 col-lg-8 text-center justify-content-center">Search</button>
</div>
}
</div>
</div>
</div>
</div>
</div>
centermycard css properties
.centermycard {
margin:0 auto;
}
where did I miss?
Adding the class mx-auto to just the card worked fine. JSFiddle
However, I don't understand why you're using a container within a card itself. You already have the entire thing enclosed in a container.

Stretching a textbox in a Form in ASP.NET MVC5

Can someone please explain to me why my textbox is not streching?? I've spent a ridiculous amount of time on this and I'm obviously missing something.
I've looked at various answers on SO and other website but to no avail. I've tried changing attributes in using style, but again no luck!
I found an article on SO but can't find it now, but I do have the sample that was provided: resize example and the article stated that you could simply set the width:100% in style, but even looking at this example is driving me nuts as both lines are stretching 100%, yet only one of them has it width set to 100%
#using System
#model MyCompany.Models.ApplicationFormModel
#{
ViewBag.Title = "Application Form";
}
#*<h2>ApplicationForm</h2>*#
<div class="row">
#*<div class="col-sm-6">*#
<div class="well bs-component">
#using (Html.BeginForm("ApplicationForm", "Registration",
FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Application Form</legend>
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name,
new { #class = "control-label col-sm-2" })
<div class="col-sm-10">
#Html.TextBoxFor(model => model.Name,
new { #class = "form-control", style = "width:100%" })
#Html.ValidationMessageFor(model => model.Name, "",
new { #class = "text-danger" })
</div>
</div>
<div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</fieldset>
}
</div>
#*</div>*#
</div>
Look in Site.css
There probably you will find next lines
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}

Align CheckBox to the right using Bootstrap

I'm using MVC5 and Bootstrap and I have the following code with produces a label and a checkbox. I want to align the checkbox to the right of it's div. Is there a bootstrap class for this? Or how do I do it in CSS?
<div class="form-group">
#Html.LabelFor(model => model.Use_Address, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
<div class="checkbox">
#Html.CheckBoxFor(model => model.Site.Use_Address, new { id = "checkUseAddress" })
</div>
</div>
</div>
There is a class "pull-right" in bootstrap, try this out.

How do you left align a div?

I Have tried to left align a div by using:
<div class="col-md-3 float-left">
and
<div class="col-md-3" style="text-align: left;">
nothing I try is working?
I tried the float now and the !important and still not working, so here is more of my code:
<div class="form-horizontal">
<h4>Branch</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group col-md-12">
<div class="col-md-2">
#Html.LabelFor(model => model.BranchName, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-3">
#Html.EditorFor(model => model.BranchName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.BranchName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group col-md-12">
<div class="col-md-2">
#Html.LabelFor(model => model.Active, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-3" style="float: left !important;">
#Html.EditorFor(model => model.Active)
#Html.ValidationMessageFor(model => model.Active, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class=" col-md-offset-1 col-md-2">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
And here is a pic to see what I mean. It looks terrible with the checkbox and the textbox so far from their labels.
Can't tell you much without more code or a more specific description of the problem. Regardless of that, my assumption is that you need the contents of a div left aligned? By the class names you are using, I assume you are using Bootstrap. In that case, try adding this class to your div:
text-left
If that doesn't work, try this:
style="text-align: left !important;"
If the second one works, you have CSS that is written somewhere else that is predominate, try to find this CSS and remove/change it. If you are confused about this, read up on CSS Specificity. Do not leave the !important attached for no reason; in general this is considered bad practice.
reference:
http://getbootstrap.com/css/#type-alignment
For left align of a div
<div style="float: left;"></div>
for left align of a text
<p style="text-align:left;"></p>
Try
<div class="col-md-1">
instead of
<div class="col-md-2">
on your Label Div's
The gap should come from the size of the col-md-2. If you choose col-md-1 the gap should be smaller.
You want to allign a div, and not a text. So you can use:
<div class="col-md-3" style="float:left">

How can I make everything(input textbox and buttons, and background image) on my MVC 5 page fixed no matter the screen size?

I am new to HTML/CSS/JS and trying to rewrite a ColdFusion PHP website(http://startabusinessweekend.com) to ASP.NET MVC5 EF5 with bootstrap 3 built-in.
I got all the business logic and functionalities working. I have been searching all day to figure out how to mimic the EXACT screen behavior. i.e. to keep the background image and the input text box fixed regardless of the screen sizes. I know this is the opposite of what MVC5/bootstrap is supposed to do - Responsive Web Design. Apart of redesigning the layout, I need to use the same layout and get it done in two days!
The problem I struggled with is that the input text boxes "float" around as the screen sizes change/shrink, which normally should be what you want for a RWD website. How can I dumb-down MVC5/bootstrap to display fixed content as you can see in the current website. http://startabusinessweekend.com.
In addition, the top part of the background image on my MVC webpage doesn't get displayed either.
If there is an answer out there please forgive me.
Thanks in advance!
here is the view cshtml I wrote:
#model SABW.Models.tTellUsAboutYou
#{
ViewBag.Title = "Start a Business Weekend";
}
#*<h2>Create</h2>*#
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#*<div id="background" />*# #* background image *#
#Html.ValidationSummary(true)
<div class="form-group"> #* form-group is equalvalent to a row *#
#*#Html.LabelFor(model => model.FirstName, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-lg-12">
#Html.TextBoxFor(model => model.FirstName, new { #placeholder = "First Name" })
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="form-group">
#*#Html.LabelFor(model => model.LastName, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-md-12 col-xs-12">
#*#Html.EditorFor(model => model.LastName)*#
#Html.TextBoxFor(model => model.LastName, new { #placeholder = "Last Name" })
#Html.ValidationMessageFor(model => model.LastName)
</div>
</div>
<div class="form-group">
#*#Html.LabelFor(model => model.EmailAddress, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-md-12 col-xs-12">
#*#Html.EditorFor(model => model.EmailAddress)*#
#Html.TextBoxFor(model => model.EmailAddress, new { #placeholder = "Email Address" })
#Html.ValidationMessageFor(model => model.EmailAddress)
</div>
</div>
<div class="form-group">
#*#Html.LabelFor(model => model.DayTimePhone, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-md-12 col-xs-12">
#*#Html.EditorFor(model => model.DayTimePhone)*#
#Html.TextBoxFor(model => model.DayTimePhone, new { #placeholder = "Phone" })
#Html.ValidationMessageFor(model => model.DayTimePhone)
</div>
</div>
<div class="form-group">
#*#Html.LabelFor(model => model.Zip, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-md-12 col-xs-12">
#*#Html.EditorFor(model => model.Zip)*#
#Html.TextBoxFor(model => model.Zip, new { #placeholder = "Zip Code" })
#Html.ValidationMessageFor(model => model.Zip)
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-xs-3">
<input type="submit" value="Please sign me up now" class="btn btn-danger" />
</div>
<div class="col-md-9" id="video">
<iframe width="400" height="283" src="//www.youtube.com/embed/VpVo8WRpb9c" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-xs-2 col-md-offset-4 col-xs-offset-4">
<h3>#*#Html.ActionLink("FAQ'S", "QnA", "SABW")*# </h3> #* need to pass the ViewBag.SourceName to the FAQ controller*#
<h2>#Html.ActionLink("FAQ'S", "QnA") </h2> #* need to pass the ViewBag.SourceName to the FAQ controller*#
</div>
</div>
<input type="hidden" name="SourceName" id="SourceName" value="#ViewBag.SourceName" />
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
and here is the _Layout.cshtml (I tried to tweaked the viewport!)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#*<meta name="viewport" content="width=2048, min-scale=1.0, max-scale=1.0, initial-scale=1.0">*#
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
**bold**<div id="background"/>**bold** #* background image *#
<div class="container body-content">
#RenderBody()
#*<hr />*#
<footer>
<p id="privacy">©#DateTime.Now.Year The Entrepreneur's Source | Privacy Policy</p>
</footer>
</div>
#Scripts.Render("~/bundles/jqueryval") #* KHP 12/19/2014 added for validation *#
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Start with 'fixing' the middle section
<div class="container-fixed">
<div class="row maincontent">
.. content goes here..
</div>
</div>
css
.container-fixed {
margin: 0 auto;
max-width: 800px; //width : 800px;
}
.maincontent{
background-image: url('bg.png');
}