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.
Related
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 :)
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.
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;
}
I have a form that has a few TextBoxFor and 1 TextAreaFor
Here it is:
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(m => m.FromName, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FromName, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FromName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.FromEmail, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FromEmail, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FromEmail)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ToEmail, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.ToEmail, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.ToEmail)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Message, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextAreaFor(m => m.Message,60, 150, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-primary" value="Send" />
</div>
</div>
</div>
A picture of what it looks like:
The problem is that I am unable to adjust the width of the TextAreaFor.
I know that Bootstrap grid system is restricting this, but I don't think this should be impossible to simply keep the label where it is, but make the textareafor wider instead of taller.
What I am looking for, is my TextAreaFor to be wider than the regular TextBoxFor. I have tried inserting outrageous numbers into the int rows && int columns parameters of TextAreaFor but the only one that seems to work is int rows.
Any idea on how I can get my TextAreaFor to expand across the page?
Any help is appreciated.
UPDATE:
I have created this Bootply for all of you.
I have figured this out. After Inspecting the Elements, I saw that all of the input, textarea, and select had a max-width of 280px.
So all I had to do was give the textarea a class and set its max-width to something that I prefer.
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">